스킬: 이미지를 코드로
참조 이미지의 디자인을 진정한 디자인 시스템으로 재구성하세요. 일회성 복사본이 아닌 시스템(색상/타이포그래피/간격 언어)을 일치시키고, 저작권이 있는 이미지나 브랜드 에셋은 절대 가져오지 마세요.
단계
- 디자이너처럼 참조를 읽어보세요. 다음을 추론하고 기록하세요:
- 팔레트 — 1개의 주요 표면 패밀리, 텍스트 색상, 1개의 주요 액션 + 최대 1개의 강조색 (임의의 hex를 추측하지 말고 색상을 샘플링하세요).
- 타이포그래피 — 패밀리 느낌(기하학적/그로테스크/세리프), 스케일 점프, 디스플레이 대 본문 대비, 두께.
- 간격 및 밀도 — 기본 단위, 섹션 리듬, 카드 패딩; 넉넉함 대 좁음.
- 반경 및 깊이 — 반경 언어(날카로움/부드러움/필), 그림자 대 가는선 구분.
- 레이아웃 아키타입 + 순서 — 전체 너비 히어로 / 비대칭 분할 / 벤토 / 에디토리얼 스택 (
taste/design-taste.md→ 변형 규칙).
- 가까운 시스템이 있으면 앵커로 삼으세요.
taste/aesthetic-systems.md/python3 scripts/design_systems.py search <term>을 탐색하고 해당 레시피를 채택하여 결정을 안정화하세요. - 추론된 값으로 토큰 테마를 구축하세요. 3계층 DTCG로 (
design-tokens스킬); 단일theme.css를 생성하세요. 모든 색상 쌍을scripts/contrast.py/scripts/validate_contrast.py(라이트 + 다크)로 검증하세요 — AA를 통과하지 못한 샘플링된 브랜드 색상은 조정됩니다; 취향이 POUR보다 우선하지 않습니다. - 레이아웃 및 컴포넌트를 토큰 기반으로 재구축하세요.
frameworks/adapter-protocol.md+components/*를 통해: 하나의 공유 프리미티브 레이어, 모든 8가지 상태, a11y 연결, 이모지 없음 (lucide), 단일 테마.design-taste.md를 적용하여 일반적인 수준으로 퇴보하지 않도록 하세요. - 참조와 대비하여 검증하세요. 렌더링하고 스크린샷을 찍어 참조와 나란히 비교하세요;
node scripts/measure_render.mjs,lint_hardcodes.py,taste_audit.mjs,npm run verify를 실행하세요.
검증 (완료 조건)
npm run verify가 100% 통과 (토큰 해결, 대비 AA 라이트+다크, 하드코드/이모지 없음, 실제 렌더링 WCAG).- 재구축된 UI는 하나의 추론된 토큰 테마를 사용합니다 — 섹션별 팔레트는 없습니다.
- 결과 스크린샷이 참조의 디자인 언어와 시각적으로 일치합니다.
정직한 한계: 이는 픽셀 단위 복사본이 아닌 디자인 시스템을 일치시킵니다. 참조의 사진, 로고 또는 저작권이 있는 텍스트를 재현하지 마세요 — 대신 자체 콘텐츠나 일반적인 플레이스홀더로 대체하세요.