skills.rest
Adelie-Squad
Adelie-SquadOFFICIAL
Explore all skills by this author →
GitHub

UI Designer Agent

Create UI systems with design tokens, component libraries, and handoff notes.

17|1|Updated Feb 3, 2026
Search Tags:#handoff#ui-design#design-system#visual-design#design-tokens#component-library#responsive-layouts
One-click install
npx skills add https://github.com/Adelie-Squad/solopreneur-team-agents --skill ui-designer-agent
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: UI Designer Agent
Source: https://github.com/Adelie-Squad/solopreneur-team-agents/tree/main/agents/experience/ui-designer
Command: npx skills add https://github.com/Adelie-Squad/solopreneur-team-agents --skill ui-designer-agent

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Bridges the gap between UX outputs and high-quality UI systems by turning wireframes, brand guidance, and constraints into consistent visual direction, token libraries, and handoff assets.

Core Features & Use Cases

  • Design Direction Workshops: Captures mood, tone, and principles with reference comparisons so the visual strategy is grounded before detailed work begins.
  • Design Tokens & Component Libraries: Produces comprehensive color palettes, typography ramps, spacing scales, and component specs (buttons, inputs, cards, navigation) ready for implementation.
  • Layout & Handoff Deliverables: Details responsive screen grids, component states, assets, accessibility checks, and implementation guidance for the Creative Frontend agent.

Quick Start

Ask the UI Designer Agent to transform the UX Designer's wireframes and brand guide into a responsive design system with tokens, components, and handoff notes.

Frequently Asked Questions about UI Designer Agent

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

FAQPage Schema
How do I generate design tokens for a responsive component library?▼

Yes, UI handoff notes for developer implementation can include detailed responsive screen grids, component states, and accessibility checks. These handoff deliverables provide the exact implementation guidance needed for frontend development.

What is the best way to turn wireframes into a complete UI design system?▼

The best way to turn wireframes into a UI design system is by capturing mood, tone, and visual principles first. This grounds the visual strategy before generating detailed component specifications and layout deliverables for implementation.

Can I use design tokens to document component states and accessibility checks?▼

Yes, you can use design tokens to document component states and accessibility checks. The system produces comprehensive component specs alongside detailed color, typography, and spacing tokens to ensure consistent implementation.

How do I create responsive layouts with consistent visual design direction?▼

To create responsive layouts with consistent visual design direction, apply defined design tokens to detailed screen grids. This ensures the visual strategy remains unified across different screen sizes during the handoff process.

Do I need brand guidance and wireframes to start building a design system?▼

Yes, you need brand guidance and wireframes to start building a design system. These inputs provide the foundational constraints and structure required to produce accurate design tokens, component libraries, and handoff assets.

Related Skills

Explore More Design & Creative Skills→
truchottruchot
2

direction-artistique

Define visual identity, brand language, and governance for projects.

Community
Advanced
zm2231zm2231

handoff-manager

Generate design handoff specifications with component specs, design tokens, and accessibility notes.

Community
Advanced
bohewubohewu
1

ui-ux-workflow

Generate bounded UI/UX assessments, wireframes, and flow definitions.

Community
Advanced
sotono-046sotono-046
1

design-principles

Define design direction, color, typography, and spacing tokens for dashboards.

Community
Basic