xiaopu-ai/web-design

A Claude Code SKILL для создания красивых, последовательных веб-страниц — сначала спецификация, потом код.

✨ Что он делает

Введите SKILL PRD, reference URL или скриншот — любая комбинация работает. Она создаёт читаемый, редактируемый, портативный DESIGN.md first. Только после этого генерируется веб-код.

Результат: интерфейс, графика, движение и отзывчивость — всё это соответствует действительности. Единообразно на разных страницах, портативно с помощью 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