telexed ~ c / 40578481-d31radar:60 · agent_toolLIVE
← 피드로
NO.
#40578481
분야
에이전트·도구
출처
Hacker News · Show HN AI
게재
2026-04-09 11:23:31
중요도
★ 6/10 — radar 60
`CSS Studio`, 브라우저에서 만진 UI를 에이전트가 바로 코드로 반영
FIG-4051:1

`CSS Studio`, 브라우저에서 만진 UI를 에이전트가 바로 코드로 반영

`CSS Studio`: In-browser visual edits that stream to your coding agent

디자인 툴이 별도 캔버스가 아니라 실제 사이트 위에서 돌고, 수정 사항을 MCP로 에이전트에 흘려보내 코드까지 바로 바꾼다. 프론트엔드 미세조정과 애니메이션 작업 속도를 꽤 당겨줄 만해 지금 써볼 만함.

[ 요점 ]
  1. 실제 사이트를 dev mode로 띄운 뒤 그 위에서 직접 편집한다. 목업 복제 없이 실서비스 기준으로 UI를 다듬는 흐름이다.
  2. 에이전트에서는 /studio를 실행하고 MCP 서버를 polling하거나 Claude Channels로 연결한다. 기존 에이전트 스택에 얹기 쉽다.
  3. 변경 사항은 viewport·URL 정보와 함께 JSON으로 스트리밍된다. 화면 맥락까지 전달돼 코드 수정 정확도를 올리는 방식.
  4. 텍스트 편집, 스타일 조정, 애니메이션 타임라인까지 포함했다. 단순 프롬프트 기반 UI 수정기보다 작업 범위가 넓다.
  5. 에이전트가 코드베이스를 실제로 수정하는 환경에서 가장 강하다. 그 전제가 없으면 장점 대부분이 바로 줄어든다.
원문cssstudio.ai원문 보기 →

// related