xiaopu-ai/web-design

아름답고 일관된 웹 페이지를 디자인하는 클로드 코드 스킬 — 사양이 먼저, 코드가 그 다음입니다.

✨ 그것이 하는 일들

SKILL에 PRD, 참조 URL, 또는 스크린샷 같은 조합을 입력하면 됩니다. 이 조합은 읽기 쉽고 편집 가능하며 이식 가능한 DESIGN.md first를 생성합니다. 그 후에야 웹 코드를 생성합니다.

그 결과: UI, 비주얼, 모션, 반응성 모두 잘 구현되어 있습니다. 페이지 전반에 걸쳐 일관되고, AI 도구 전반에 걸쳐 휴대할 수 있으며, 손으로 편집할 수 있습니다.

🧭 작동 방식

단계 A · 이해하기. PRD / URL / 스크린샷 / 키워드 / 브랜드명에서 디자인 단서를 추출합니다. 우아한 후속 체인이 드문 입력에서도 작동을 유지합니다.

**단계 B · DESIGN.md를 작성하세요. ** 전체 9섹션 사양: 색상 · 유형 · 구성 요소 · 레이아웃 · 동작 · 깊이 · 해야 할 것과 하지 말아야 할 사항 · 반응형 · 접근성. 승인하면 사양은 프로젝트 내에 존재하며 손으로 편집할 수 있습니다.

**C 단계 · 코드 생성. ** 규격을 엄격히 준수함. 100점 품질 체크리스트에 따른 자체 감사. 참조 URL이 있을 때 차이 감사.

📦 저장소 레이아웃

🚀 설치

클로드 코드 스킬 디렉토리에 복제하기:

✨ What it does

Feed the SKILL a PRD, a reference URL, or a screenshot — any combination works. It produces a readable, editable, portable DESIGN.md first. Only then does it generate the web code.

The result: UI, visuals, motion, and responsiveness that all land. Consistent across pages, portable across AI tools, editable by hand.

🧭 How it works

Phase A · Understand. Extracts design cues from PRD / URL / screenshot / keywords / brand name. A graceful fallback chain keeps it working even with sparse inputs.

Phase B · Produce DESIGN.md. A full 9-section spec: color · type · component · layout · motion · depth · do’s & don’ts · responsive · accessibility. Once you approve it, the spec lives in your project and can be edited by hand.

Phase C · Generate code. Strictly follows the spec. Self-audits against a 100-score quality checklist. Diff-audits when a reference URL exists.

📦 Repository layout

web-design/
├── SKILL.md            # the skill itself (instructions for Claude)
├── references/         # design systems, style seeds, motion library,
│                       # interaction patterns, quality checklist
├── scripts/            # Playwright crawler, static token extractor,
│                       # Unsplash image fetcher
└── docs/               # landing page (served by GitHub Pages)
    ├── index.html
    ├── styles.css
    ├── app.js
    ├── DESIGN.md       # the page's own spec (produced by the SKILL itself)
    └── images/

🚀 Install

Clone into your Claude Code skills directory:

git clone https://github.com/KAOPU-XiaoPu/web-design ~/.claude/skills/web-design

Claude Code will auto-discover the SKILL the next time you start a session.

💻 Run the landing page locally

cd web-design/docs
python3 -m http.server 8000
# open http://localhost:8000

Opening index.html directly with file:// won’t work — Google Fonts and the OGL ES module need an HTTP origin.

🙏 Credits