skills.rest
buiphucminhtam
buiphucminhtamCOMMUNITY
Explore all skills by this author →
GitHub

ui-designer

Translate BRD inputs into design briefs, tokens, and wireframes for frontend teams.

47|11|Updated Mar 6, 2026
Search Tags:#design#accessibility#handoff#tokens#wireframes#ux#design-system
One-click install
npx skills add https://github.com/buiphucminhtam/forgewright --skill ui-designer-buiphucminhtam
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-designer
Source: https://github.com/buiphucminhtam/forgewright/tree/main/skills/ui-designer
Command: npx skills add https://github.com/buiphucminhtam/forgewright --skill ui-designer-buiphucminhtam

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Translate BRD inputs into production-ready design briefs, tokens, and wireframes for frontend engineers, bridging business requirements and implementation.

Core Features & Use Cases

  • Design system creation and UX specs
  • Wireframes, component inventories, and design tokens
  • Handoff to frontend engineers with accessibility guidelines and interaction patterns
  • Use Case: When starting a new product, generate a complete design brief, tokens, and wireframes to guide development.

Quick Start

Generate a complete design brief, tokens, and wireframes for a new SaaS dashboard.

Frequently Asked Questions about ui-designer

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

FAQPage Schema
How do I translate business requirements into design tokens and wireframes?▼

To translate business requirements into design tokens and wireframes, input your BRD to generate a production-ready design brief, component inventories, and interaction patterns for frontend teams.

What is included in a frontend handoff for a new product redesign?▼

A frontend handoff for a new product redesign includes complete design briefs, wireframes, interaction patterns, accessibility targets, and design tokens to bridge business requirements and implementation.

Can I generate a complete design system from a BRD for a large-scale UI refresh?▼

Yes, you can generate a complete design system for a large-scale UI refresh by processing BRD inputs to produce component inventories, design tokens, and UX specifications.

Does UI design generation include accessibility guidelines and interaction patterns?▼

UI design generation includes accessibility targets and interaction patterns directly within the design brief, ensuring frontend engineers receive compliant and functional UX specifications.

What is the best way to create a design brief for a new SaaS dashboard?▼

The best way to create a design brief for a new SaaS dashboard is to process your product requirements, automatically generating wireframes, design tokens, and a component inventory for development.

When do I need to generate a component inventory and design tokens?▼

You need to generate a component inventory and design tokens when starting new product initiatives or executing large-scale UI refreshes that require structured frontend handoff and consistent UX specs.

Related Skills

Explore More Design & Creative Skills→
Exia-thdExia-thd

product-manager

Generate business requirement documents with wireframes and acceptance criteria.

Community
Advanced
artosetrovartosetrov

figma-implement-design

Translate Figma frames into reusable frontend components aligned with design tokens.

Community
Advanced
JhonMM27JhonMM27

ui-ux-designer

Translate UX research into tokenized components with WCAG accessibility checks.

Community
Advanced
jeffwweeejeffwweee

ui-designer

Generate HTML wireframes, React/MUI mockups, and design specifications.

Community
Intermediate