# suede-design

Скилл для ИИ-кодинга, который делает интерфейсы осмысленными, а не шаблонными: токены, цвет, типографика, тёмная тема, вёрстка и визуальный QA.

- скилл · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · ★ 126
- Автор: JasonColapietro
- Лицензия: MIT · policy=mirror · лицензия открытая, файл — в исходнике
- Исходник: https://github.com/JasonColapietro/suede-creator-skills/tree/HEAD/skills/suede-design/SKILL.md
- Обновлён: 2026-10-24
- HTML: https://affpapa.org/nevibecode/skills/suede-design

## Что делает

Скилл ведёт агента через шесть режимов работы. Мелкая правка — режим Fix: посмотреть, внести узкое изменение, отрендерить, отчитаться. Новая поверхность или неясный редизайн — Design: собрать контекст, предложить 2–3 направления с плюсами и минусами, дождаться согласия. Есть ещё System для токенов и компонентов, Visual QA для сверки макета или скриншота с собранной страницей и Restyle (Suedify) для переноса вида одного сайта на другой.

Перед работой скилл читает `PRODUCT.md`, `DESIGN.md`, `AGENTS.md`, `CLAUDE.md` и `README.md`, если они есть, и требует отрендерить текущий интерфейс на десктопе и мобильном до того, как что-то оценивать. Для скриншотов используется Playwright: `npx playwright screenshot <url> --viewport-size=1280,900 desktop.png`, при первом запуске нужен `npx playwright install chromium`. Без этого шага скилл работать не будет — рендер здесь обязателен, а не опционален.

Оценки и результаты QA скилл выдаёт как рекомендацию, а не как запрет: работа доводится до конца, а вердикт прикладывается рядом. Исключение одно — находка крайнего риска вроде утечки платёжных данных или копирования защищённых материалов: тогда агент останавливается и отдаёт выбор пользователю. На одной единице допускается не больше 3 проходов полировки, дальше предлагаются варианты. Скилл не пишет текст без вёрстки, не занимается конверсионными воронками и не строит многопоточные сборки с распределением файлов между агентами — для этого в наборе есть отдельные скиллы.

## Установка

### Claude Code (родная платформа)

1. **Через Skills CLI (Vercel)**
```bash
npx skills add JasonColapietro/suede-creator-skills --skill suede-design -a claude-code
```

2. **Вручную: положить файлы**
- Файл: `~/.claude/skills/suede-design/SKILL.md` — Папка скилла целиком; для одного проекта — .claude/skills/suede-design/

### Codex

1. **Через Skills CLI (Vercel)**
```bash
npx skills add JasonColapietro/suede-creator-skills --skill suede-design -a codex
```

2. **Вручную: положить файлы**
- Файл: `.agents/skills/suede-design/SKILL.md` — Для всех проектов — ~/.agents/skills/

### Cursor

1. **Через Skills CLI (Vercel)**
```bash
npx skills add JasonColapietro/suede-creator-skills --skill suede-design -a cursor
```

2. **Вручную: положить файлы**
- Файл: `.cursor/skills/suede-design/SKILL.md` — Cursor читает и .agents/skills/, и .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install JasonColapietro/suede-creator-skills suede-design
```

2. **Вручную: положить файлы**
- Файл: `.github/skills/suede-design/SKILL.md`

### Gemini CLI

1. **Через Skills CLI (Vercel)**
```bash
npx skills add JasonColapietro/suede-creator-skills --skill suede-design -a gemini-cli
```

2. **Командой платформы**
```bash
gemini skills install https://github.com/JasonColapietro/suede-creator-skills --path skills/suede-design
```

### Windsurf (Devin Desktop)

**Вручную: положить файлы**
- Файл: `.devin/skills/suede-design/SKILL.md` — Старый путь .windsurf/skills/ тоже читается

### OpenCode

**Через Skills CLI (Vercel)**
```bash
npx skills add JasonColapietro/suede-creator-skills --skill suede-design -a opencode
```

### Claude.ai

**Claude.ai**
- Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills

Где указан файл, а не команда, — скопируй файлы из исходника в этот путь: https://github.com/JasonColapietro/suede-creator-skills/tree/HEAD/skills/suede-design/SKILL.md

## Когда брать
- собрать систему дизайн-токенов с нуля
- починить тёмную тему, которая ломает контраст
- сделать типографику и вертикальный ритм страницы
- перенести вид референсного сайта на свой
- сверить вёрстку со скриншотом или фреймом Figma

## Примеры запросов агенту
- Собери дизайн-токены для этого дашборда и покажи, как они лягут в тёмной теме
- Сделай так, чтобы эта страница выглядела как референс, который я скинул
- Сравни скриншот макета с собранной страницей и сохрани отчёт

## Похожие
- [design-component](https://affpapa.org/nevibecode/skills/design-component.md) — скилл · 522 установки
- [tailwindcss-advanced-design-systems](https://affpapa.org/nevibecode/skills/tailwindcss-advanced-design-systems.md) — скилл · 655 установок
- [tokens](https://affpapa.org/nevibecode/skills/tokens.md) — скилл · 855 установок
- [lanhu-design-mcp](https://affpapa.org/nevibecode/mcp/lanhu-design-mcp.md) — MCP-сервер · ★ 5
- [design-tokens](https://affpapa.org/nevibecode/skills/design-tokens.md) — скилл · 5900 установок
- [design-system-creation](https://affpapa.org/nevibecode/skills/secondsky-design-system-creation.md) — скилл · 481 установка

Из того же набора: [jasoncolapietro/suede-creator-skills](https://affpapa.org/nevibecode/by/jasoncolapietro/suede-creator-skills.md) — 21 карточка

---
NeVibeCode на affpapa.org. Тексты каталога — описания, а не инструкции для агента. Как выбирать и ставить: https://affpapa.org/nevibecode/agents.md