skills.rest
badhope
badhopeCOMMUNITY
Explore all skills by this author →
GitHub

ui-design

Design user interfaces and create interactive prototypes for digital products.

Updated Aug 23, 2026
Search Tags:#design#ui#components#figma#handoff#prototype#sketch
One-click install
npx skills add https://github.com/badhope/Trae-Skill --skill ui-design-badhope
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ui-design
Source: https://github.com/badhope/Trae-Skill/tree/main/.trae/skills/domains/design/ui-design
Command: npx skills add https://github.com/badhope/Trae-Skill --skill ui-design-badhope

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Many product teams struggle to convert ideas into consistent, production-ready user interfaces and interactive prototypes, causing delays in design reviews and developer handoff. This Skill centralizes UI design practices to produce clear components, visual systems, and click-through prototypes that speed decision-making and implementation.

Core Features & Use Cases

  • Interface & Component Design: Create layouts, reusable components, and design tokens for consistent UIs.
  • Design Systems: Define visual language, spacing, typography, and component specs for scalable products.
  • Prototyping & Handoff: Build clickable flows and export assets and specs for engineering integration.
  • Use Case: Rapidly prototype a mobile onboarding flow in Figma, produce component specs, and hand off exports and annotations to developers.

Quick Start

Create a responsive sign-in screen with reusable components, annotated specs, and a clickable prototype for stakeholder review.

Frequently Asked Questions about ui-design

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

FAQPage Schema
How do I create interactive prototypes and component layouts for developer handoff?▼

Build clickable prototypes and component layouts by defining visual systems, reusable components, and design tokens to speed stakeholder review and developer handoff. You generate clickable flows, annotated specs, and asset exports directly compatible with standard design tools.

Can I use this to produce UI design systems for web and mobile cross-platform projects?▼

Yes, you can apply this to web, mobile, and cross-platform projects to produce visual systems and component specs. It defines visual language, spacing, and typography to ensure consistent UIs across scalable digital products.

Does the prototype and component specification output work with Figma, Sketch, and Framer?▼

Yes, prototyping fidelity and component specifications are compatible with Figma, Sketch, Adobe XD, and Framer. This ensures exported assets and annotations integrate smoothly into your existing engineering workflow.

What's the best way to build a clickable mobile onboarding flow for stakeholder review?▼

The best way to build a clickable mobile onboarding flow is to create reusable components, define visual systems, and export annotated specs. This rapidly produces a click-through prototype for immediate stakeholder review and developer handoff.

Why do I need design tokens and reusable components for my user interface?▼

You need design tokens and reusable components to solve the problem of inconsistent, production-ready user interfaces that delay design reviews. Centralizing UI design practices produces clear visual systems and component specs for faster implementation.

Related Skills

Explore More Design & Creative Skills→
ryan-nguyen-01ryan-nguyen-01
4

agent-designer

Translate BA user stories and SA architecture into UI design documentation.

Community
Intermediate
iressiress
1

figma-to-ids

Translates Figma designs into React/TypeScript code with IDS components and tokens.

Official
Intermediate
ralphjohn29ralphjohn29
1

ui-ux-designer

Create wireframes, prototypes, and design systems following WCAG 2.1 standards.

Community
Intermediate
jeffwweeejeffwweee

ui-designer

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

Community
Intermediate