web-design
KAOPU-XiaoPu/web-designClaude Code скилл для проектирования красивых и консистентных веб-страниц. Принимает PRD, URL или скриншот, генерирует читаемый DESIGN.md-файл со спецификацией из 9 разделов, а затем создаёт код, строго следуя ей.
Установка
git clone https://github.com/KAOPU-XiaoPu/web-design.gitREADME
web-design
Claude Code скилл для проектирования красивых, консистентных веб-страниц — сначала спецификация, потом код.
✨ Что делает скилл
Передайте скиллу PRD, ссылку на сайт или скриншот — подойдёт любая комбинация. Сначала он создаёт читаемый, редактируемый и переносимый файл DESIGN.md. И только после этого генерирует код.
Результат: UI, визуальная часть, анимации и адаптивность — всё на месте. Консистентно между страницами, переносимо между AI-инструментами, редактируется вручную.
🧭 Как это работает
Фаза A · Анализ. Извлекает дизайн-сигналы из PRD / URL / скриншота / ключевых слов / названия бренда. Цепочка запасных вариантов обеспечивает работу даже при скудных входных данных.
Фаза B · Создание DESIGN.md. Полная спецификация из 9 разделов: цвет · типографика · компоненты · макет · анимация · глубина · что делать и чего избегать · адаптивность · доступность. После вашего подтверждения спецификация остаётся в проекте и может редактироваться вручную.
Фаза C · Генерация кода. Строго следует спецификации. Проводит самоаудит по чеклисту качества из 100 пунктов. При наличии ссылки на референс выполняет diff-аудит.
📦 Структура репозитория
web-design/
├── SKILL.md # сам скилл (инструкции для Claude)
├── references/ # дизайн-системы, стилевые сиды, библиотека анимаций,
│ # паттерны взаимодействия, чеклист качества
├── scripts/ # Playwright-краулер, статический экстрактор токенов,
│ # загрузчик изображений Unsplash
└── docs/ # лендинг (публикуется через GitHub Pages)
├── index.html
├── styles.css
├── app.js
├── DESIGN.md # спецификация самой страницы (создана скиллом)
└── images/
🚀 Установка
Клонируйте в директорию скиллов Claude Code:
git clone https://github.com/KAOPU-XiaoPu/web-design ~/.claude/skills/web-designClaude Code автоматически обнаружит скилл при следующем запуске сессии.
💻 Запуск лендинга локально
cd web-design/docs
python3 -m http.server 8000
# откройте http://localhost:8000Открывать index.html напрямую через file:// не получится — Google Fonts и ES-модуль OGL требуют HTTP-источника.
🙏 Благодарности
Анимационные эффекты на лендинге основаны на работах David Haz:
- vue-bits (MIT) — GradientBlinds, RollingGallery
- react-bits (MIT) — DomeGallery
Структура DESIGN.md вдохновлена проектом awesome-design-md (MIT).
📄 Лицензия
MIT — используйте, форкайте, публикуйте.
Сделано с ❤️ автором @KAOPU-XiaoPu