웹사이트 디자인
각 프로젝트는 주제와 실제 참고 자료에 기반하여 고유한 디자인을 갖습니다. 이 스킬은 작업 순서와 이 프로젝트의 파일을 관리하며, 실제 디자인 역량은 함께 설치된 디자인 스킬에서 제공됩니다.
게이트
design/DESIGN.md → 디자인 입력에 네 줄이 모두 채워질 때까지 페이지 또는 컴포넌트 코드를 작성하지 않습니다. 순서대로 작성되며, 각 줄은 출처 또는 "없음"으로 표시됩니다. 기존 디자인에 대한 사소한 조정은 유일한 예외입니다(규칙 참조).
1. 입력 수집 (이 순서대로)
각 단계는 이전 단계에서 결정된 사항을 읽습니다. 이전 입력이 항상 이후 입력보다 우선합니다.
- 사용자의 참고 자료 및 디자인 문서 (최우선 순위)
design/DESIGN.md를 읽습니다. 채워져 있다면(색상 토큰에 값이 있으면) 기본으로 사용하여 3단계로 이동합니다.design/references/: 각 이미지를 한 번 읽고 이미지당 한 줄씩 DESIGN.md → 참고 자료에 작성합니다(file → take: … · avoid: …). 이후에는 해당 텍스트를 기준으로 작업합니다.- 대화에서 사용자가 제공한 링크, 브랜드 가이드, 로고, 색상 또는 글꼴, 그리고 PROJECT.md를 참고합니다.
- 브리프가 비어 있으면? 한 메시지에 세 가지 짧은 질문을 사용자에게 합니다: 무엇이고 누구를 위한 것인지; 분위기를 나타내는 세 단어; 마음에 드는 또는 싫어하는 사이트. 답변을 DESIGN.md → 브리프에 작성합니다.
- 디자인 입력 → 참고 자료를 작성합니다(찾은 내용 또는 "없음").
- 1단계에서 디자인 언어가 제공되지 않은 경우: awesome-design-md 기반
{{run}} design:md list는 카테고리별로 카탈로그를 한 줄씩 출력합니다(--category <단어>로 범위를 좁힙니다). 브리프에 맞는 2~3개를 제안하고(각각 한 문장으로 이유 설명), 사용자가 선택하도록 합니다.{{run}} design:md use <이름>은 해당 항목을 크레딧과 함께design/DESIGN.md로 복사합니다. 모든 브랜드 이름, 로고 및 상표를 이 프로젝트의 것으로 교체합니다.- 1단계에서 디자인 언어를 제공했거나 DESIGN.md가 이미 항목에서 시작하는 경우(헤더에 명시됨) 이 단계를 건너뜁니다.
- 디자인 입력 → 기반을 작성합니다(항목 이름 또는 "없음: 사용자 참고 자료에서 구성").
- taste-skill (스킬
design-taste-frontend): 아트 방향- 이 페이지에 대해 1~4단계(브리프 및 주제 목록, 논증, 방향, 아이디어)를 실행합니다.
- 1~2단계에서 색상과 타입이 고정되면
--keep palette,type플래그를 사용하여 디자인 언어를 유지하면서 구성, 이미지 및 섹션을 계획합니다. - 선택된 방향을 DESIGN.md의 섹션(테마, 레이아웃, 컴포넌트)에 작성하고, 디자인 입력 → 방향을 작성합니다(방향 ID와 한 줄 이유).
- 이 사이트 요구 사항에 맞는 실제 사이트
references/project-types.md에서 프로젝트 유형 섹션을 열고(rg -n "^## " <파일>), 이 페이지에 필요한 특정 패턴(가격, 결제, 문서, 대시보드, 온보딩 등)에 대해references/inspiration.md의 갤러리를 참조합니다.- 브라우저 도구를 사용하여 해당 패턴에 대한 2~3개의 실제 사이트를 연구합니다(계층 구조, 밀도, 설명 방식). 각 사이트당 한 줄씩 DESIGN.md → 참고 자료에 작성합니다.
- 디자인 입력 → 참고 사이트를 작성합니다.
2. 빌드
- 토큰: DESIGN.md의 토큰을 {{#tanstack-start}}
src/styles.css{{/tanstack-start}}{{#next}}src/app/globals.css{{/next}}{{#shadcn}} (shadcn/ui의--background,--primary,--radius…){{/shadcn}}의 테마에 매핑합니다. 컴포넌트에 원시 16진수 값을 사용하지 않습니다. - 빌드: 스킬
frontend-design을 사용하여 taste-skill의 방향 시트(5~6단계)를 따릅니다. {{#shadcn}} shadcn/ui 컴포넌트(스킬shadcn;{{dlx}} shadcn@latest add <컴포넌트>)를 사용합니다. {{/shadcn}} 컴포넌트 및 아이콘 선택:references/libraries.md. - 콘텐츠: 실제 콘텐츠를 사용합니다. 사용자에게 요청하거나 구체적인 일반 텍스트를 직접 작성합니다. 로렘 입숨, 가짜 로고, 통계 또는 사용후기는 사용하지 않습니다. 한 가지를 기억에 남게 만들고 나머지는 조용하게 유지합니다.
- 기준: 360px부터 반응형, 가시적 포커스,
prefers-reduced-motion, WCAG 2.2 AA 대비, 그리고 빈 상태, 로딩 상태 및 오류 상태를 지원합니다.
3. 검토
- taste-skill의 게이트 및 룩 단계(7~8단계)를 실행하며, 390px, 768px 및 1440px 스크린샷을 촬영합니다(스킬
playwright-cli{{#next}} 또는 개발 서버에 대한next-dev-loop{{/next}} 사용). - 스킬
web-design-guidelines(접근성 및 UX), 스킬writing-guidelines(모든 카피), 스킬web-perf(주요 페이지 로딩 성능)를 실행합니다. - 상위 3개 문제를 수정하고, 완료하기 전에 장식 요소 하나를 제거합니다.
규칙
- 참고 자료에서 원칙(계층 구조, 리듬, 밀도, 타입, 색상)을 학습합니다. 사이트의 레이아웃, 텍스트, 로고, 일러스트레이션 또는 코드를 복사하지 않으며, 다른 브랜드의 이름, 로고 또는 상표를 배포하지 않습니다.
- 사용자의 브리프와 참고 자료가 awesome-design-md 기반보다 우선하며, awesome-design-md 기반이 taste-skill의 기본값보다 우선하고, taste-skill의 기본값이 자신의 취향보다 우선합니다.
- 기존 디자인에 대한 사소한 시각적 조정(간격, 팔레트 내 색상, 하나의 컴포넌트)은 빠른 변경입니다. DESIGN.md를 따르고 입력 단계를 다시 실행하지 않습니다.