skills.rest
alexiolan
alexiolanCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

ux-brief

Convert UI feature specs into UX briefs with patches and success criteria.

17|Updated Mar 30, 2026
Search Tags:#claude#ux-design#ux#ui-patterns#frontend-design#brief-generation
One-click install
npx skills add https://github.com/alexiolan/craft-skills --skill ux-brief-alexiolan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ux-brief
Source: https://github.com/alexiolan/craft-skills/tree/main/skills/ux-brief
Command: npx skills add https://github.com/alexiolan/craft-skills --skill ux-brief-alexiolan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

UI feature specs frequently drift into implementation gaps, causing misaligned designs and rework. UX briefs codify design intent, provide a prioritized patch plan, and set success criteria for downstream agents.

Core Features & Use Cases

  • Automated UX briefs: translate specs and aesthetic direction into concrete tasks, patches, and acceptance criteria.
  • Plan-to-implement pipeline: coordinates with frontend-design and ui-ux-pro-max when needed, delivering design-review-ready briefs.
  • Use Case: for a new UI component suite, produces structured patches and measurable success criteria that guide developers and QA.

Quick Start

Provide the feature spec path and target UI files to generate the UX brief.

Frequently Asked Questions about ux-brief

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I turn UI feature specs into actionable UX briefs for frontend development?▼

To turn UI feature specs into actionable UX briefs, provide the feature spec path and target UI files to generate a structured document with anchor points, prioritized patches, and measurable success criteria for downstream design-to-implementation work.

What is a UX brief and when do I need one for UI design?▼

A UX brief is a structured document that codifies design intent, aesthetic direction, and acceptance criteria from UI specs. You need one when UI feature specs risk drifting into implementation gaps, causing misaligned designs and rework.

How do I generate a UX brief with concrete patches and success criteria?▼

Generate a UX brief by inputting frontmatter, specs, and aesthetic direction into the processor, which outputs a markdown file containing sections for anchor points, patches, and success criteria to guide developers and QA.

Can I use this UX brief generator with frontend-design and ui-ux-pro-max modes?▼

Yes, the UX brief generator spans solo frontend-design mode and combined modes with ui-ux-pro-max, coordinating a plan-to-implement pipeline that delivers design-review-ready briefs for downstream agents.

Does the generated UX brief output support integration with existing plan directories?▼

Yes, the UX brief outputs directly to the .claude/plans/YYYY-MM-DD-{feature}/ux-brief.md path, ensuring the generated design contracts integrate seamlessly with existing date-stamped plan directories.

What is the best way to prevent design-to-implementation drift for new UI component suites?▼

The best way to prevent design-to-implementation drift is to codify design intent into a structured UX brief with prioritized patch plans and measurable success criteria before development begins on new UI component suites.

Related Skills

Explore More Design & Creative Skills→
mewomewoliumewomewoliu
1

design-taste

Apply a defined aesthetic direction across critique, spec, code, and variant workflows.

Community
Advanced
mwolff328-stackmwolff328-stack
1

survivorpulse-backtesting

Coordinate multi-disciplinary development workflows for the SurvivorPulse CMEA prototype.

Community
Intermediate
j-showj-show

designer

Orchestrate design specifications, visual previews, and accessible UI code for web applications.

Official
Advanced
guilhermemarketingguilhermemarketing
59

frontend-ui-ux

Translate design briefs into cohesive UI components and interaction patterns.

Community
Intermediate