#0001
`CSS Studio`, 브라우저에서 만진 UI를 에이전트가 바로 코드로 반영
`CSS Studio`: In-browser visual edits that stream to your coding agent
60radar
CSS Studio브라우저 UI 편집 도구 — 실제 사이트 수정값을 코드로 반영
디자인 툴이 별도 캔버스가 아니라 실제 사이트 위에서 돌고, 수정 사항을 MCP로 에이전트에 흘려보내 코드까지 바로 바꾼다. 프론트엔드 미세조정과 애니메이션 작업 속도를 꽤 당겨줄 만해 지금 써볼 만함.
- 실제 사이트를 dev mode로 띄운 뒤 그 위에서 직접 편집한다. 목업 복제 없이 실서비스 기준으로 UI를 다듬는 흐름이다.
- 에이전트에서는
/studio를 실행하고MCP서버를 polling하거나Claude Channels로 연결한다. 기존 에이전트 스택에 얹기 쉽다. - 변경 사항은 viewport·URL 정보와 함께 JSON으로 스트리밍된다. 화면 맥락까지 전달돼 코드 수정 정확도를 올리는 방식.
- 텍스트 편집, 스타일 조정, 애니메이션 타임라인까지 포함했다. 단순 프롬프트 기반 UI 수정기보다 작업 범위가 넓다.
- 에이전트가 코드베이스를 실제로 수정하는 환경에서 가장 강하다. 그 전제가 없으면 장점 대부분이 바로 줄어든다.
출처: cssstudio.ai원문 보기 →