Skip to main content
skill CX Codex

brief · educlopez — Claude Code skill: what it does, how to install

Generates or updates a durable design brief in .ui-craft/brief.md. It anchors product goals, user context, principles, and UI scope before code generation starts.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add educlopez/ui-craft --skill brief -a claude-code
Open on GitHub

What brief does

The skill checks whether .ui-craft/brief.md already exists. If missing, it inspects the repo root for DESIGN.md or design-tokens.json to pre-fill details before asking questions. It structures the brief around five compulsory sections: product purpose, primary user, principles, success metric, and what is out of scope.

When principles are missing or sound vague, it triggers a principles workshop backed by a catalog of 42 worked examples across 8 product categories. The agent examines past debated design decisions rather than accepting generic platitudes. Missing items receive a dated [TO DEFINE — YYYY-MM-DD] placeholder so gaps remain visible.

Updates follow an append-mostly rule where superseded items are marked deprecated instead of deleted. The file is never written without explicit user confirmation, and committing .ui-craft/brief.md to git is left entirely to the developer.

What it helps with

  • generate a durable UI design brief at .ui-craft/brief.md
  • establish concrete design principles through a structured workshop
  • define explicit out-of-scope boundaries for frontend surfaces
  • parse existing PRD files into structured design brief sections

Example prompts for the agent

  • Draft a design brief for this frontend
  • Update principles in .ui-craft/brief.md
  • Create our UI brief based on the PRD

How to install brief

1Skills CLI (Vercel)

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

2Manually: put the files in place

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

Copy the whole skill folder; for one project use .claude/skills/brief/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about brief

How to install brief in Claude Code?

Run npx skills add educlopez/ui-craft --skill brief -a claude-code. It registers the skill under ~/.claude/skills/brief/SKILL.md.

What does the brief skill do?

It interviews you or parses your PRD into five required sections, then writes a confirmed design contract into .ui-craft/brief.md.

What happens if principles are not yet defined?

It loads a catalog with 42 reference principles across 8 categories, asks about past design debates, and rejects generic slogans.

Source text

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

Similar skills

Everything for Design →

brief by other authors comes first.

brief official anthropics Builds legal briefings from connected sources such as email, calendars, and contracts. Use it for a daily scan, research on a legal topic, or incident context. CX Codex +1 2,800installs brief Alireza Rezvani Turns a strategic question or meeting notes into a one-page brief with options, assumptions and success criteria. Meant to run before deliberation. 386installs brief calm-north Generates editor-ready SEO content briefs with SERP analysis, outline templates, and E-E-A-T requirements. CX Codex +1 6,400installs brief-to-tasks julianoczkowski Converts a design brief into an ordered checklist of vertical slice tasks and saves it as a markdown file. CX Codex +1 5,200installs design-brief Owl-Listener Drafts a project brief covering problem space, audience, constraints, and success criteria. Built for kicking off a specific task or feature. CX Codex +1 2,100installs uncodixfy cyxzdev Teaches the agent to skip the default Codex aesthetic: soft gradients, floating panels, decorative copy. Use it when generated frontend looks too much like a template. CX Codex +1 5,600installs figma-create-design-system-rules official openai Generates project-specific design system guidelines for AI coding agents handling Figma-to-code tasks. It inspects existing components and writes rules directly into your repository. CX Codex +1 2,900installs skeumorphism typeui.sh This skill guides skeuomorphic UI work with textures, 3D effects, and familiar physical metaphors. Use it when shaping a design system. CX Codex +1 2,300installs vibrant typeui.sh Gives your agent a full set of rules for a lively UI: color tokens, type scale, spacing and accessibility. Useful when the default grey look is not what you want. CX Codex +1 2,300installs

From the same set14

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor