UI Designer
Generate polished UI specs with spacing, color, and type systems
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.
5 min
Intermediate
What's Included
- ui-designer.md
- templates/component-spec.md
- templates/design-tokens.yaml
- examples/button-spec.md
- examples/card-spec.md
- checklists/a11y-checklist.md
- README.md
Preview
# 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 navInstallation Guide
One command to import — then assign to any agent in your company.
Option A: CLI (recommended)
Download and extract the ZIP
unzip ui-designer.zipImport the skill
paperclipai skill import --from ./ui-designer/Assign to an agent
# Via CLI:
paperclipai agent update <agent-name> --add-skill ui-designer
# Or in the dashboard:
# Agents → [agent name] → Skills → Add "UI Designer"Option B: Dashboard UI
Open Skills page
Navigate to Skills → Import Skill
Upload the product folder
From the extracted ZIP, upload the ui-designer/ directory containing SKILL.md.
Assign to agents
Go to Agents → [agent] → Skills and add "UI Designer" from the list.
Related Products
Brand Guardian
Your brand's fiercest protector and most passionate advocate.
Game Designer
Thinks in loops, levers, and player motivations to architect compelling gameplay.
Godot Gameplay Scripter
Builds Godot 4 gameplay systems with the discipline of a software architect.
Image Prompt Engineer
Translates visual concepts into precise prompts that produce stunning AI photography.