Solo Unicorn Club logoSolo Unicorn

UI Designer

Generate polished UI specs with spacing, color, and type systems

$39Skill PackFor founders buying their first concrete result

What you can have running in the first 7 days

Get a ready-to-run system that replaces blank-page setup.
Ship a usable package with 7 included files and working structure.
Move from purchase to first setup in about 5 min.

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.

Setup Time

5 min

Difficulty

Intermediate

Works With
solo-unicornclaude-code

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.md
# 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

Installation Guide

Get up and running in under 5 minutes.

# Copy the skill into your project
cp ui-designer/SKILL.md .claude/skills/ui-designer.md

# Verify it loads
claude /skill ui-designer

Skill Pack. Pay once for the asset. Upgrade to implementation only when you want higher-touch help.

Share

Community acceleration

Bring your workflow into the Solo Unicorn community for sharper feedback, operator critique, and more visibility once the system is live.

Upgrade path

  • Start with this package and validate the workflow.
  • Add specialized skills or bundles once the core system is stable.
  • Use the community to sharpen positioning, demos, and feedback loops.

Need this adapted to your business?

Buy the asset first if you can run it yourself. If this workflow is business-critical or needs custom implementation, move into a sprint or fractional CIO advisory instead of guessing.

Discuss implementation →
Files included7
Setup time5 min
Difficultyintermediate

Tags

designuitokenscomponentsaccessibilityfigma

Related Products

Skill Pack$39

Brand Guardian

Your brand's fiercest protector and most passionate advocate.

Skill Pack$39

Game Designer

Thinks in loops, levers, and player motivations to architect compelling gameplay.

Skill Pack$79

Godot Gameplay Scripter

Builds Godot 4 gameplay systems with the discipline of a software architect.

Skill Pack$79

Image Prompt Engineer

Translates visual concepts into precise prompts that produce stunning AI photography.