Skill Packs
UI Designer
Generate polished UI specs with spacing, color, and type systems
// First 7 days
What can be running fast.
01
Get a ready-to-run system that replaces blank-page setup.
02
Ship a usable package with 7 included files and working structure.
03
Move from purchase to first setup in about 5 min.
// Included files
What is inside the package.
Description
What is UI Designer?
A skill that instructs your agent to produce design-ready UI specifications. Covers design token systems (spacing, color, typography), component anatomy breakdowns, responsive behavior rules, accessibility contrast requirements, and interaction state documentation. Outputs specs that developers can implement without guessing.
Upgrade path
- 01Start with this package and validate the workflow.
- 02Add specialized skills or bundles once the core system is stable.
- 03Use the community to sharpen positioning, demos, and feedback loops.
# UI Designer Skill
## Design Token System
Define tokens before designing components:
### Spacing Scale (base: 4px)
- xs: 4px | sm: 8px | md: 16px | lg: 24px | xl: 32px | 2xl: 48px
### Color Palette
- Primary: define 50-950 scale from brand color
- Neutral: gray scale for text and backgrounds
- Semantic: success (green), warning (amber), error (red), info (blue)
- Ensure 4.5:1 contrast ratio on all text colors
### Typography Scale
- Display: 36/40px — hero headings only
- H1: 30/36px | H2: 24/32px | H3: 20/28px
- Body: 16/24px | Small: 14/20px | Caption: 12/16px
- Font: system stack — no custom fonts without performance budget
## Component Spec Template
For every component, document:
1. Anatomy (labeled wireframe)
2. States: default, hover, focus, active, disabled, error
3. Responsive: how it adapts at sm/md/lg breakpoints
4. Accessibility: role, aria-labels, keyboard nav// Community acceleration
Use the room after the purchase.
Bring your workflow into the Solo Unicorn community for sharper feedback, operator critique, and more visibility once the system is live.
Related products
More from this shelf.
automate / Write the test first, every time, without being told
TDD Master Skill
Write the test first, every time, without being told
automate / Systematic bug isolation instead of random print statements
Debug Detective
Systematic bug isolation instead of random print statements
automate / Catch real bugs, skip the nitpicks
Code Review Pro
Catch real bugs, skip the nitpicks
automate / Deep research with sources, not hallucinated summaries
Research Analyst
Deep research with sources, not hallucinated summaries