К основному содержанию
скилл CX Codex

brief · educlopez — скилл для Claude Code: что делает и как установить

Создаёт или обновляет дизайн-бриф проекта в файле .ui-craft/brief.md. Помогает зафиксировать назначение интерфейса, принципы и границы продукта перед генерацией UI.

Установить в Claude Code · Через Skills CLI (Vercel) Все способы и платформы ↓
npx skills add educlopez/ui-craft --skill brief -a claude-code
Открыть на GitHub

Что делает brief

Скилл проверяет наличие .ui-craft/brief.md. Если файла нет, агент ищет в корне репозитория DESIGN.md или design-tokens.json, чтобы взять готовые данные оттуда, либо опрашивает разработчика по пяти разделам. В бриф входят цель продукта, основной пользователь, принципы, метрика успеха и явные ограничения интерфейса (out of scope).

Если принципы ещё не сформулированы или формулировки размыты, запускается воркшоп на основе каталога с 42 примерами из 8 категорий продуктов. Скилл разбирает прошлые спорные решения по интерфейсу и отсекает шаблонные фразы. Если данных всё равно не хватает, он ставит заглушку с датой [TO DEFINE — YYYY-MM-DD].

Файл пишется только после подтверждения черновика пользователем, а при обновлениях старые формулировки не удаляются, а помечаются устаревшими. Скилл принципиально не делает git commit сам: сохранение файла в репозитории остаётся за вами.

Какие задачи решает

  • составить дизайн-бриф проекта в файле .ui-craft/brief.md
  • сформулировать дизайн-принципы через разбор прошлых споров по UI
  • зафиксировать границы интерфейса и список того, что он делать не должен
  • разобрать готовый PRD на обязательные секции брифа

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

  • Составь дизайн-бриф для нашего UI
  • Обнови целевого пользователя в .ui-craft/brief.md
  • Запусти бриф интерфейса по нашему PRD

Как установить brief

1Через Skills CLI (Vercel)

npx skills add educlopez/ui-craft --skill brief -a claude-code

2Вручную: положить файлы

~/.claude/skills/brief/SKILL.md

Папка скилла целиком; для одного проекта — .claude/skills/brief/

По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов

Вопросы о brief

Как установить brief в Claude Code?

Выполните команду npx skills add educlopez/ui-craft --skill brief -a claude-code. Файл сохранится по пути ~/.claude/skills/brief/SKILL.md.

Что делает скилл brief?

Он ведёт структурированное интервью или парсит документацию, чтобы собрать дизайн-контракт из пяти секций и сохранить его в .ui-craft/brief.md.

Что происходит, если у проекта ещё нет дизайн-принципов?

Скилл запускает мини-воркшоп: предлагает примеры из каталога на 42 позиции, просит разобрать реальные прошлые споры по UI и не принимает общие фразы.

Исходный текст

SKILL.md · MIT
---
name: brief
description: "Write or update the project's durable design brief at .ui-craft/brief.md. Invoke when the user asks for brief on their UI, or mentions 'brief' alongside design / UI / frontend work."
---

<!-- HARNESS MIRROR — do not edit here. Canonical source: skills/ or commands/. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->

**Context:** this sub-skill is one lens of the broader `ui-craft` skill. If the `ui-craft` skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.

Load `references/brief.md` for the brief format before proceeding.

## Step 1: Detect existing brief

Check whether `.ui-craft/brief.md` exists. Use Read or ls on `.ui-craft/`.

**If it exists:** load its contents. If `$ARGUMENTS` names a specific update ("update principles", "shift target user", "add out of scope"), focus the session there and skip unchanged sections. Otherwise summarize what's in the brief and ask: "What do you want to change?"

**If it doesn't exist:** proceed to Step 2. Also check the repo root for a `DESIGN.md` or `design-tokens.json` (an ecosystem convention some teams already maintain) — if present, read it and pre-fill the brief's answers from it instead of re-asking; note the source. The brief complements an existing design contract, never contradicts it.

## Step 2: Draft a new brief (absent case)

Walk the user through the five required sections in a single pass. Ask ONE compact question per section. Do not open five separate prompts unless the user asks for depth.

Compact prompt template:

> "To write your design brief I need five things — answer as tersely as you like, I'll fill in structure:
> 1. **Product purpose** — what does it do, in one sentence?
> 2. **Primary user** — who, by role and context?
> 3. **Principles** — what does this product believe? Give me three to five stances it takes. (If you don't have these yet, say so — I'll run the principles workshop.)
> 4. **Success metric** — what does 'the user succeeded on this surface' look like in observable behavior?
> 5. **Out of scope** — three to five things this surface deliberately does NOT do."

**Principles workshop case:** if the user says "I don't have principles yet" or gives vague answers ("make it good", "keep it simple"), do NOT fabricate principles from vague input. Load `references/principles-catalog.md` first. The catalog has 42 worked example principles across 8 product categories — use them as conversation seeds, not as templates to adopt literally. Show 2-3 from the closest category to the user's product, then ask which resonate or which they'd flip. Then run the principles workshop from `references/brief.md` as a focused sub-flow: ask for three past design decisions that were debated, then derive candidate principles from the patterns. Refuse to accept platitudes — push back and prompt for substance.

**Parsing long input:** if the user provides a product description or PRD, parse it into the five sections rather than re-asking for information already given. State what you extracted and ask for confirmation or corrections.

**Thin answers:** if an answer is too vague to constrain a design decision, ask one targeted follow-up. Maximum two follow-ups per section before flagging it as incomplete and moving on.

## Step 3: Show before writing

Always show the proposed brief in full before writing the file. Ask: "Does this look right, or anything to adjust?"

Do not write until confirmed.

## Step 4: Write the file

Create `.ui-craft/` if it doesn't exist. Write the confirmed content to `.ui-craft/brief.md`.

The file must contain all five sections with the exact headings from `references/brief.md`. No omissions.

## Step 5: After writing

Tell the user the file is at `.ui-craft/brief.md`. Suggest committing it:

> "Commit `.ui-craft/brief.md` to the repo — it's documentation, not config. The agent reads it every session."

Do not auto-commit. Per project rules, commits require explicit user instruction.

## Constraints

- All five sections are required. If one is genuinely unknown, write it as a dated placeholder with `[TO DEFINE — YYYY-MM-DD]` so the gap is visible.
- The brief is append-mostly on updates. Never delete past content — mark deprecated with date and reason.
- No brand names, product examples, or generic SaaS language inside the user's brief. The brief describes their product, not the template.

**Next step:** `/tokens` — the brief decides the intent, the tokens encode it (rung 2).

© educlopez · MIT · educlopez/ui-craft

Похожие скиллы

Всё по теме «Дизайн» →

Сначала — brief от других авторов.

brief официальный anthropics Собирает правовые сводки по почте, календарю, договорам и другим подключённым источникам. Пригодится для утреннего обзора, поиска по теме или разбора инцидента. CX Codex +1 2 800установок brief calm-north Скилл готовит подробные ТЗ для авторов и SEO-копирайтеров с анализом выдачи, структурой заголовков и требованиями E-E-A-T. CX Codex +1 6 400установок brief-to-tasks julianoczkowski Превращает дизайн-бриф в упорядоченный список задач методом вертикальных срезов и сохраняет чек-лист в markdown-файл. CX Codex +1 5 200установок design-brief Owl-Listener Формирует бриф проекта с описанием проблемы, аудитории, ограничений и метрик успеха. Пригодится на старте отдельной задачи. CX Codex +1 2 100установок uncodixfy cyxzdev Учит агента не генерировать типичный «кодексовый» интерфейс: без градиентов, плавающих панелей и декоративных заголовков. Пригодится, когда фронтенд от ИИ выглядит слишком шаблонно. CX Codex +1 5 600установок figma-create-design-system-rules официальный openai Генерирует правила дизайн-системы для кодовой базы при переносе макетов из Figma. Помогает агентам соблюдать структуру компонентов и токенов проекта. CX Codex +1 2 900установок skeumorphism typeui.sh Скилл задаёт правила для интерфейсов в стиле скевоморфизма: текстуры, 3D-эффекты и знакомые физические метафоры. Нужен для проектирования UI. CX Codex +1 2 300установок vibrant typeui.sh Задаёт агенту правила яркого интерфейса: палитра, шрифты, отступы и требования доступности. Пригодится, когда нужен живой визуальный стиль, а не серый дефолт. CX Codex +1 2 300установок

Из того же набора13

colorize Скилл добавляет один акцент в 3–5 местах интерфейса или убирает лишний цвет, возвращая экран к нейтральной основе. CX Codex +1 888установок heuristic Прогоняет интерфейс по 10 эвристикам Нильсена и 6 законам дизайна, выдаёт таблицу находок и балл UsabilityScore от 0 до 100. CX Codex +1 879установок shape Скилл прогоняет экран через вайрфрейм-проход: ASCII-раскладка, список состояний, инвентарь контента и открытые вопросы — до первой строки кода. CX Codex +1 865установок tokens Проверяет, как в проекте устроены дизайн-токены, и помогает собрать трёхслойную систему с нуля. Пригодится, когда цвета и отступы расползлись по файлам. CX Codex +1 853установок finalize Прогоняет интерфейс через детектор, токены и 10 проходов планки качества, а потом выдаёт вердикт: READY, NOT READY или BLOCKED. CX Codex +1 850установок redesign Обновляет интерфейс сайта или приложения без потери структуры, SEO и конверсионных форм. Помогает освежить визуал, когда код и контент уже работают. CX Codex +1 463установок quieter Скилл для ИИ-кодинга, который снижает визуальный шум в интерфейсе: меньше движения, проще сетка, спокойнее цвет. Пригодится, когда UI выглядит перегруженным. CX Codex +1 449установок bolder Скилл добавляет интерфейсу характер: больше разброса в раскладке, движения и один акцентный приём. Пригодится, когда вёрстка работает, но выглядит пресно. CX Codex +1 443установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой