SkillFoxx
Telegram

web-design — скилл

Скилл дизайна веб-страниц для Claude Code: сначала спецификация DESIGN.md, потом код по ней

  • 815 ★ репозитория
  • Последний коммит
  • MIT
Скилл

Расширенный доступ

Почему такой уровень

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

xiaopu-ai/web-designАвтор:KAOPU-XiaoPu

Установка

Работает в

В терминале, через SkillFoxx CLI

npx skillfoxx add skills/web-design

Определит агенты на машине, покажет уровень доступа и зафиксирует версию.

Другие способы установки

Доступ и проверки

Как мы проверяем

Расширенный доступИнструмент запускает код или ходит в сеть, а внешние данные только читает.

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

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

Что делает

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

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

Подходит, если

  • Нужен лендинг, портфолио или страница продукта с цельным стилем
  • Хочется сначала зафиксировать дизайн в DESIGN.md, а потом код
  • Есть референс или скриншот, по которому нужна своя страница

Не подходит, если

  • Задача про backend, базу или логический баг, а не про вид страницы
  • Не нужна отдельная спецификация, важен только быстрый черновой код

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

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

Ограничения

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

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

Частые вопросы

Что за DESIGN.md?

Спецификация из девяти разделов: цвет, типографика, компоненты, раскладка, движение, глубина, правила, адаптивность и доступность. Ее можно править руками и хранить в проекте.

Можно дать референс?

Да, на входе принимаются PRD, ссылка, скриншот, ключевые слова и название бренда в любом сочетании.

Обсуждение

Вопросов и отзывов пока нет.

Скиллы

Скилл Claude Code и других агентов для сборки сайтов, где режиссура задается до кода: арт-дирекшн, генерация ассетов локальными CLI и проверка анти-слоп линтеро

СкиллРасширенный доступ1 тыс.

Скилл Claude превращает сайты, картинки и файлы Figma в дизайн-систему: Markdown, токены DTCG и промпты для сборки элементов

СкиллРасширенный доступ245

Скилл-движок дизайна для локальных агентов: мокапы, прототипы, лендинги, дашборды и слайды в виде самодостаточного HTML прямо в редакторе

СкиллРасширенный доступ6,4 тыс.11

Скилл дизайна интерфейсов: арт-дирекция под продукт, общий DESIGN.md, токены, проверка верстки и доступности в браузере.

СкиллРасширенный доступ51

Скилл дизайна фронтенда с восемью эстетическими якорями: каждый фиксирует палитру, шрифты и текстуру в токенах CSS. Отдельный проект, не от Anthropic

СкиллМинимальный доступ167

Скилл превращает скриншот, макет, кадр Figma или живую страницу в адаптивный сайт и сверяет результат с дизайном

СкиллМинимальный доступ143

Коротко о README

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

Бейдж для README

Исходный 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"）。

Сообщить о проблеме