Design Handoff Brief Skill: PRD to Designer Brief

What is the design-handoff-brief skill?

The design-handoff-brief skill is one plain markdown file inside the pm-claude-skills library. It tells an AI coding agent how to turn a feature brief, a PRD or even rough notes into a structured brief for a designer.

Its own description puts the aim plainly: give designers the context they need before opening Figma, so they are grounded in user context and constraints instead of discovering them after going in the wrong direction.

What the agent asks for first

• A feature brief or PRD. Even rough notes work.
• The designer's name or team, used for personalisation.
• Technical constraints that engineering already knows about.
• The timeline, meaning when the design needs to be done.

What the brief contains

• A user goal written as: when I [situation], I want to [motivation] so that I can [outcome].
• Context and emotional state: where the user is in the journey and what just happened.
• Design success criteria, measurable where possible.
• Constraints split into technical, brand, accessibility and legal or compliance.
• Edge cases to design for, plus an explicit list of what is out of scope.
• Reference material: user research, existing patterns in the component library, competitor examples.

A built-in contrast calculator

The skill points the agent at notugly, a command run through npx. Its example: #777777 on white measures 4.478 and fails the 4.5:1 AA line, while #767676 measures 4.54 and passes. The ratio travels with each colour in the handoff table.

According to the skill, the tool is deterministic, has zero dependencies and makes no model call, so it costs nothing to run and returns the same answer every time.

Who the design-handoff-brief skill is for

Best for

• Product managers who want a brief ready before the design kickoff, not a feature name tossed over the wall.
• Founders and developers who act as their own PM and need structure for a designer or contractor.
• Teams that keep re-litigating scope in design reviews. The out-of-scope section exists for that. After the brief, a critique pass with design-critique-mcp can follow.

Not for

• Producing visuals, layouts or components. It writes a brief and does not design anything.
• Auditing or building a component library. It only briefs designers. For building one in Figma, see figma-generate-library; audit skills sit in the same repository.
• Replacing a conversation. The skill expects you to confirm that engineering constraints are accurate before handing the brief over.

Use it with UiChemy

Once the designer has built the screens in Figma from your brief, UiChemy Figma to WordPress converts the finished design into an editable WordPress page. The brief and the conversion are separate steps. Click Get Started on uichemy.com.

How to install Design Handoff Brief Skill: PRD to Designer Brief

npx pm-claude-skills add

1. Run the library installer

   The README gives npx pm-claude-skills add for any tool, with Cursor, Codex, Windsurf, Cline and Zed named. It installs the library, which includes this skill.

2. Or use the Claude Code plugin route

   In Claude Code, the README says to run /plugin and search for pm-skills, which it describes as the official Anthropic directory entry.

3. Or copy the file by hand

   Clone the repository with git clone https://github.com/mohitagw15856/pm-claude-skills.git and copy the exports/openclaw/design-handoff-brief folder to wherever your agent loads skills from. For ChatGPT and Gemini, the README says to copy from the exports folder.

4. Ask for a brief

   Paste your PRD and use one of the trigger phrases, such as write a design brief, create a design handoff or brief a designer on a new feature.

Check that it loaded

Ask the agent to write a design brief from a short feature description. It should ask for the designer, constraints and timeline if missing, then answer in the section order described above.

Read the official instructions on GitHub

Key features

• User goal, not feature nameStep two of the process reframes feature language into user outcome language, and the output uses the pattern: when I, I want to, so that I can. A quality check rejects goals phrased as design the checkout flow.
• Emotional context sectionThe brief records where the user is in the journey and what they are feeling. The skill's anti-patterns say that designs without emotional grounding come out technically correct but experientially flat.
• Measurable success criteriaThe brief lists the criteria the design will be judged against. A quality check says each one must be measurable or observable, so looks good does not qualify.
• Four kinds of constraintConstraints are split into technical, brand, accessibility with the WCAG level required, and legal or compliance where it applies, so a designer sees limits before sketching.
• Specific edge casesThe skill asks for edge cases specific to this feature's failure modes and requires at least one to cover an error or failure state. Generic entries such as handle errors are rejected.
• Out-of-scope boundariesA required section names what this iteration will not solve. The quality check wants at least one item that might seem in scope but is not, which prevents scope creep in design.
• Reference material listThe brief links user research, the Figma component library and competitor examples when they are relevant, so the designer starts from the same sources as the PM.
• Contrast ratios in the handoffUsing the notugly command, the agent computes the ratio, the APCA lightness contrast and the nearest passing colour for a pair, then pastes the numbers beside each colour value.
• Validation stepThe last process step checks that every edge case is specific enough to design for and every out-of-scope item is concrete enough to say no to.

Frequently asked questions