xiaopu-ai/web-design

美しく一貫したウェブページをデザインするためのClaudeコードスキル — 仕様が先、コードが二の次です。

✨ それが何をするのか

SKILLにPRD、referenceURL、またはscreenshotを入力するなど、どんな組み合わせでも構いません。読みやすく、編集可能で、ポータブルなDESIGN.md**を最初に生成します。その後に初めてウェブコードが生成されます。

その結果、UI、ビジュアル、動き、レスポンシブさがすべて実現しています。ページ全体で一貫性があり、AIツール間で携帯可能で、手作業でも編集可能です。

🧭 仕組み

フェーズA ·理解。 PRD/URL / スクリーンショット / キーワード / ブランド名からデザインのヒントを抽出します。優雅なフォールバックチェーンにより、入力が少ない時でも動作を維持できます。

フェーズB ·DESIGN.mdを生成。 完全な9セクション仕様:色 ·タイプ ·コンポーネント ·レイアウト ·動き ·深さ ·やるべきこと・してはいけないこと ·レスポンシブ ·アクセシビリティ。一度承認すれば、仕様はプロジェクト内に残り、手作業で編集が可能です。

フェーズC ·コードを生成。 仕様を厳格に遵守。100点の品質チェックリストに対して自己監査。参照URLが存在する場合に差分監査を行う。

📦 リポジトリのレイアウト

🚀 インストール

Claude Codeのスキルディレクトリにクローンします:

✨ 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