대부분의 AI 에이전트는 코드가 어떻게 보여야 할지 알기도 전에 코드를 작성합니다.

잘못된 색상. 일관성 없는 간격. 제대로 구현되지 않은 모션.
당신은 그것을 수정합니다. 그리고 다시 수정합니다. 그러고 나서 세 번째로 또 수정합니다.

한 개발자가 에이전트가 키보드에 손을 대기 전에 멈추게 하는 스킬(skill) 파일을 작성했습니다.
그 스킬의 이름은 web-design입니다.

이것은 컴포넌트 라이브러리(component library)가 아닙니다. 템플릿 팩(template pack)도 아닙니다. 단 하나의 스킬 파일입니다. 당신이 PRD(제품 요구 사항 문서), 참조 URL, 또는 스크린샷을 입력하면, 단 한 줄의 코드를 작성하기 전에 완전한 디자인 사양(design spec)을 생성합니다.

여기 이해가 되지 않는 부분이 있습니다.

Anthropic은 Claude Code를 출시했습니다. 그들은 그것에 처음부터 전체 앱을 작성할 수 있는 능력을 부여했습니다.

하지만 그들은 '구축하기 전에 디자인을 이해하라'는 규칙을 부여하지 않았습니다.
GitHub의 한 개발자는 그렇게 했습니다.

Phase A: 이해(understand). 당신이 제공하는 무엇으로부터든 색상, 타이포그래피(typography), 레이아웃(layout), 그리고 모션 단서(motion cues)를 추출합니다.

Phase B: DESIGN.md 생성. 색상, 타입, 컴포넌트, 레이아웃, 모션, 깊이, 권장 사항 및 금지 사항(do's and don'ts), 반응형(responsive), 접근성(accessibility)의 9개 섹션으로 구성됩니다. 당신이 이를 승인합니다. 당신은 이를 수동으로 편집할 수 있습니다.

Phase C: 코드 생성. 사양을 엄격히 따릅니다. 즉흥적인 것은 아무것도 없습니다.
Figma는 사용자당 월 15달러가 듭니다. 이 스킬은 비용이 들지 않습니다.

544개의 스타(stars). MIT 라이선스. 한 명의 개발자. 에이전시 아님. 펀딩 없음.

설치하지 마세요.

당신의 AI 에이전트는 당신의 디자인이 어떻게 보여야 할지 추측해야만 합니다. 그것이 수정 사이클이 무한히 반복되는 이유입니다.

(댓글에 내용이 있습니다)