HN
Hacker News • 52일 전
CSS 스튜디오 오픈소스 공개
IMP 7/10
핵심 요약
브라우저 내에서 웹사이트를 시각적으로 디자인하고, 변경 사항을 기존 AI 코딩 에이전트에 전달하여 코드베이스를 직접 수정할 수 있는 도구인 'CSS Studio'가 공개되었습니다. 개발자는 MCP 서버와 연동되는 이 도구를 통해 텍스트, 스타일, 애니메이션 등을 직관적으로 편집하고 즉각적으로 코드에 반영할 수 있습니다.
번역된 본문
안녕하세요 HN! 방금 CSS Studio를 공개했습니다. 이 도구는 웹사이트 내에서 실행되며, 브라우저 상에서 작동하고, 기존 AI 에이전트에 업데이트를 전송하여 어떤 코드베이스든 수정할 수 있게 해주는 디자인 도구입니다. 웹사이트에서 직접 최신 버전을 사용해 볼 수도 있습니다.
기술적으로 이것이 작동하는 방식은 사이트를 개발 모드(dev mode)로 보고 편집을 시작하는 것입니다. 에이전트에서 /studio 명령어를 실행하면 MCP 서버를 폴링(또는 Claude Channels 사용)합니다. 변경 사항은 일부 뷰포트 및 URL 정보와 함께 JSON 형식으로 MCP를 통해 스트리밍되며, 이 기능에는 변경 사항을 가장 잘 구현하는 방법에 대한 지침이 포함되어 있습니다.
여기에는 시각적 편집 도구에서 기대할 수 있는 많은 기능이 포함되어 있습니다. 예를 들어 텍스트 편집, 스타일 지정, 그리고 애니메이션 타임라인 편집기 등이 있습니다.
원문 보기 (영어)
Hi HN! I've just released CSS Studio, a design tool that lives on your site, runs on your browser, sends updates to your existing AI agent, which edits any codebase. You can actually play around with the latest version directly on the site.<p>Technically, the way this works is you view your site in dev mode and start editing it. In your agent, you can run /studio which then polls (or uses Claude Channels) an MCP server. Changes are streamed as JSON via the MCP, along with some viewport and URL information, and the skill has some instructions on how best to implement them.<p>It contains a lot of the tools you'd expect from a visual editing tool, like text editing, styles and an animation timeline editor.