아름다운 UI 만들기 (Ship Beautiful UI)
AI가 만든 UI는 에이전트가 매번 동일한 기본값(같은 폰트, 같은 그라디언트, 같은 동일한 카드 행)에서 시작하기 때문에 모두 비슷해 보입니다. 이 스킬은 기본값을 다음과 같은 프로세스로 대체합니다:
- 브리핑. 주제, 대상, 그리고 화면의 단 하나의 역할을 명확히 합니다.
- 방향 설정. 템플릿이 아닌 주제 자체의 세계에서 디자인을 구축합니다.
- 고정. 모든 시각적 결정을
DESIGN.md에 기록하고 확인합니다. - 구축.
DESIGN.md의 토큰만 사용합니다. 화면당 하나의 대담한 아이디어. - 모션. 변화를 설명하는 모션만 추가합니다.
- 검토. AI 흔적과 품질 격차를 찾고, 스크린샷을 확인하며,
REVIEW.md를 작성합니다.
항상 이 순서를 따릅니다. 0단계나 5단계를 건너뛰지 마십시오.
우선순위
두 지침이 충돌할 경우, 더 높은 우선순위의 지침이 적용됩니다:
- 사용자의 직접적인 말.
DESIGN.md(생성된 이후).references/폴더에 있는 이 스킬의 규칙들.- 다른 UI 스킬을 포함하여 로드된 다른 모든 것.
충돌을 해결할 때는 사용자가 이의를 제기할 수 있도록 한 줄로 설명하세요.
이 스킬의 도구들
모든 스크립트는 Python 3 표준 라이브러리로 작성되었습니다. 이 스킬의 폴더에서 실행하거나 전체 경로를 전달하세요.
| 스크립트 | 기능 |
|---|---|
scripts/derive.py | 주제 세계의 단어들로부터 대비가 확인된 팔레트를 생성합니다 (78가지 소재 사용) |
scripts/direction.py | 제품 종류에 대해 3가지 방향 옵션(팔레트 + 타이프 페어링 + 레이아웃)을 제시하고 DESIGN.md 초안을 작성합니다 |
scripts/lint_design.py | DESIGN.md의 구조, 섹션 순서, 토큰 참조, WCAG 대비를 검사합니다 |
scripts/detect.py | 프론트엔드 코드에서 40가지 AI 흔적과 품질 기준 미달 요소를 스캔합니다 |
| 라이브러리 | 내용 |
|---|---|
data/materials.json | 주제 세계의 78가지 소재 (종이, 음식, 자연, 공예, 화면, 돈, 돌봄, 놀이, 여행) |
data/palettes.json | 60가지 팔레트 (라이트/다크 모드, 모두 대비 확인됨) |
data/type-pairings.json | 40가지 타이프 페어링 (모두 무료 구글 폰트, 역할 및 참고 사항 포함) |
data/layouts.json | 20가지 레이아웃 패턴 (와이어프레임 포함) |
references/effects.md | 순수 CSS/JS로 구현된 16가지 효과 (축소 모션 대비 포함) |
references/04-motion.md | 타이밍 토큰 및 12가지 모션 레시피 |
references/ux-rules.md | 영역별 80가지 UX 규칙 |
references/anti-patterns.md | 40가지 탐지 규칙 및 12가지 시각적 기본값 |
0단계: 브리핑
references/00-brief.md를 읽으세요. 주제, 대상, 역할, 제약사항의 네 줄과 주제 세계의 명사 다섯 개를 작성하세요. 브리핑이 부실하다면 이 항목들을 제안하고 한 번의 메시지(최대 세 가지 질문)로 확인을 받으세요.
1단계: 방향 설정
references/01-direction.md를 읽으세요.
- 기본: 주제에서 파생. 세계 명사 중 3-5개를 선택하고 다음 명령을 실행하세요:
python3 scripts/derive.py --words "<명사>"(제품이 밤에 사용된다면--mode dark추가). 팔레트를data/의 타이프 페어링 및 레이아웃과 분위기에 맞게 짝지으세요. - 대체: 라이브러리에서 선택 – 주제에 강력한 시각적 세계가 없거나 사용자가 빠르게 옵션을 원할 때:
python3 scripts/direction.py --kind <종류> --brief "<한 줄>". 3가지 옵션을 보여주고 사용자가 선택하게 하세요. - 기존 브랜드: 브랜드 자체가 방향입니다. 브랜드의 색상과 타이포그래피를 추출하여 사용하세요.
- 계획을
references/anti-patterns.md의 시각적 기본값과 비교하고, 일치하는 항목이 있다면 브리핑에서 요청하지 않은 한 수정하세요.
2단계: 고정
references/02-lock.md를 읽으세요.
- 프로젝트 루트에
DESIGN.md를 작성하세요: 상단에 YAML 토큰, 그 다음##섹션을 순서대로 (개요, 색상, 타이포그래피, 레이아웃, 입체감 & 깊이, 형태, 컴포넌트, 권장사항 및 금지사항).direction.py --write가 초안을 제공합니다;templates/DESIGN.md는 빈 양식입니다. - 브리핑을 개요에 넣고, 거부된 기본값을 권장사항 및 금지사항에 넣으세요.
python3 scripts/lint_design.py DESIGN.md를 실행하고 구축 전에 모든 오류를 수정하세요.
3단계: 구축
references/03-build.md를 읽고 작업하면서 references/ux-rules.md를 참조하세요.
- 토큰을 CSS 변수(또는 프레임워크 테마)에 한 번 매핑하고 해당 이름만 사용하세요.
- 화면당 하나의 기억에 남는 요소. 나머지는 모두 조용하게.
references/effects.md의 효과는 최대 하나만, 그 요소에, 토큰으로 색상을 변경하여 사용하세요.- 품질 기준에 맞게 구축하세요: 360px 너비, 가시적인 포커스, AA 대비, 축소 모션, 실제 카피, 로딩/빈 상태/오류 상태.
4단계: 모션
references/04-motion.md를 읽으세요. 사용자 트리거 모션은 거기에 있는 타이밍 토큰과 레시피를 사용합니다. 화면당 최대 하나의 주변 모션 순간. 모든 모션에는 축소 모션 경로가 있습니다.
5단계: 검토
references/05-review.md를 읽으세요.
python3 scripts/detect.py <소스 또는 파일들>. 모든 오류를 수정하세요; 경고는 수정하거나 그대로 두는 이유를 기록하세요.python3 scripts/lint_design.py DESIGN.md를 다시 실행하세요. 코드와DESIGN.md가 일치해야 합니다.- 환경이 허용한다면 데스크톱 및 390px 너비로 스크린샷을 캡처하고, 브리핑과 비교하여 이미지를 비판적으로 검토하세요.
templates/REVIEW.md에서REVIEW.md를 작성하세요.
결과물
완료되면 프로젝트에는 DESIGN.md (유효함), UI (토큰만으로 구축됨), 그리고 REVIEW.md가 있습니다. 사용자에게 몇 줄로 알려주세요: 방향과 그 이유, 하나의 기억에 남는 요소, 그리고 의도적으로 생략한 것.