web-design

Установка

npx skillfoxx add skills/web-design

npx skills add xiaopu-ai/web-design --skill web-design -a claude-code -y

npx skills add xiaopu-ai/web-design --skill web-design -a cursor -y

npx skills add xiaopu-ai/web-design --skill web-design -a github-copilot -y

npx skills add xiaopu-ai/web-design --skill web-design -a codex -y

npx skills add xiaopu-ai/web-design --skill web-design -a gemini-cli -y

npx skills add xiaopu-ai/web-design --skill web-design -a cline -y

npx skills add xiaopu-ai/web-design --skill web-design -a roo -y

npx skills add xiaopu-ai/web-design --skill web-design -a opencode -y

git clone https://github.com/xiaopu-ai/web-design ~/.claude/skills/web-design

Это чужой код. Посмотрите файлы в репозитории перед установкой.

Что делает

Скилл делит работу над веб-страницей на два шага: сначала спецификация, потом код. На входе он принимает PRD, ссылку-референс, скриншот, ключевые слова или название бренда в любом сочетании и извлекает из них дизайн-подсказки. Затем собирает файл DESIGN.md из разделов по цвету, типографике, компонентам, раскладке, движению, глубине, адаптивности и доступности, который вы правите и храните в проекте. После вашего согласия генерирует код строго по спецификации и сам проверяет его по чек-листу. В комплекте справочники по дизайн-системам, паттернам и движению, а также скрипты для разбора сайтов и подбора изображений.

Для кого. Для дизайнеров и разработчиков, которым нужен веб-интерфейс с единой спецификацией, а не разрозненный код.

Пример запроса к агенту

Сделай DESIGN.md и лендинг по этому референсу, но с более теплой палитрой

Ограничения

Скилл рассчитан на веб-фронтенд и не про backend или логические баги. Разбор сайтов-референсов идет через Playwright, а подбор изображений через Unsplash, для этого нужны сеть и локальное окружение. Локальный запуск демо-страницы требует http-сервера, открытие через file не работает.

Как отключить. Удалите папку web-design из каталога скиллов Claude Code.

Проверка безопасности

• Скрипты разбирают сайты-референсы через Playwright и ходят за изображениями в Unsplash
• Скилл генерирует и пишет код страницы в проект

Коротко о README

README описывает web-design как скилл Claude Code, который сначала выдает DESIGN.md, а потом код. Работа идет тремя фазами: понимание входа, сборка спецификации из девяти разделов и генерация кода строго по ней с самопроверкой по чек-листу и сверкой с референсом. В репозитории лежат SKILL.md, справочники по дизайн-системам, паттернам и движению, скрипты на Playwright для разбора сайтов и подбора изображений, а также демо-лендинг. Установка идет клонированием в каталог скиллов Claude Code. Лицензия MIT.

SKILL.md

---
name: web-design
description: Web 视觉设计 SKILL。输入 PRD / 参考 URL / 截图 / 关键词（任意组合），先产出一份标准化 DESIGN.md 设计规范，用户确认后据此生成 UI/UX、视觉、动效、响应式全部达标的 web 代码。专攻 web 端：Landing Page、Portfolio、产品页、博客、个人站、SaaS 介绍页等。当用户说"帮我做个网站""设计一个页面""参考 XX 做一个""把这个截图/PRD 做成网页""做一个 landing page""出一份 design 规范"时触发。不用于后端、数据库、纯逻辑 bug 修复。
---

# Web Design

Web 端视觉设计 SKILL。两阶段工作流：**先出规范（DESIGN.md），再出代码。**

DESIGN.md 是显式文件产物，保存到项目目录，可跨项目复用、可手动修改、可给其他工具消费。

## 核心流程

```
Phase A  理解需求（灵活输入）──→  Phase B  输出 DESIGN.md（用户确认）──→  Phase C  生成项目代码
```

**启动时先检测**（按优先级）：
1. 项目里已经有 DESIGN.md 了吗？→ 有则沿用/修改/重建
2. 项目里有 PRD.md 吗？→ 有则进入 A4（PRD 驱动流程）
3. 都没有 → 正常走 Phase A

---

## Phase A: 理解需求

输入是灵活的，以下任意组合都行，不要强制用户走固定路径：

| 输入 | 处理方式 |
|------|---------|
| **参考 URL** | 抓取 HTML+CSS，提取 Token，motion audit |
| **截图 / 设计稿** | 从视觉提取气质、色温、密度、字体风格 |
| **关键词 / 描述** | "暗色克制衬线风格" → 从 style-seeds 匹配 Token |
| **品牌名** | "做成类似 Linear 的" → 先查 `references/design-systems/`，有则直接读取；无则抓取该网站 |
| **混合** | "参考这个 URL 但配色要暖一些" → 提取 + 覆盖 |
| **PRD 文档** | 读取 PRD.md 的产品定位、页面结构、设计交接区 → 分析竞品风格 → 推导设计方向 |

### A1. URL 分析（有参考 URL 时）

**意图判断**：参考（提取设计语言，做独立新页面）vs 复刻（用户明确说"复刻/clone"）。

Похожие