AI UI Design Skills Pack

You designed what the feature does.
Not what it looks like when it fails.
This pack designs that too.

Drop one folder into your project. Claude Code now must plan what every AI feature looks like before writing code — what shows while it's loading, what shows when something goes wrong, how someone using a screen reader experiences it, and how the design matches your other components.

Install in 30 seconds View on GitHub
8
Skills
5
Agents
7
Required States
0
Hardcoded Values Allowed
What general design systems miss

Six gaps in every AI feature UI

Your design system handles fonts, spacing, and colours. It has no rules for AI. What shows while the AI is thinking? What if someone using a screen reader can't hear the response arrive? What does the input box actually need? None of that is covered.

States

Only the success state was designed

Streaming looks broken without a cursor. Error is a blank screen. Empty is a void with a text box. Six of the seven states were never designed — they just happened.

→ ai-states-required
Streaming UI

No streaming cursor. No [Stop] button.

A textarea and a div are not AI-native components. Streaming output needs role="log", a blinking cursor, auto-scroll that respects user position, and live markdown rendering.

→ ai-component-patterns
Accessibility

Screen readers hear nothing during streaming

The AI response arrives word by word. Without the right setup, a screen reader hears nothing. The blinking cursor announces itself on every word unless you explicitly hide it from assistive technology.

→ accessible-ai-output
Prompt UX

It's a textarea with Enter to send

A prompt input is not a textarea. It needs auto-resize, Cmd+Enter semantics, a suggestion system, a feedback loop (idle → submitting → streaming → complete), and a token counter.

→ prompt-ux-design
Output Design

Unstyled markdown. No confidence signals.

Rendered markdown without typography is a wall of text. Responses with hedging language look identical to confident responses. There is no progressive disclosure for 2000-word outputs.

→ ai-output-design
Design Tokens

#3b82f6 hardcoded in six components

AI components built under deadline hardcode colour, spacing, and type. Each new component copies the pattern. A rebrand becomes a multi-file migration instead of three token values.

→ design-token-audit
What correct looks like

Streaming output, designed

The difference between streaming output that works for everyone and one that doesn't is three settings and a cursor. This pack makes sure they're always there.

document-assistant — streaming output
What are the key risks in section 4.2?
The three primary risks identified in section 4.2 are supplier concentration, currency exposure, and regulatory compliance in the target markets. The supplier concentration risk is flagged as high — two vendors account for 73% of component supply with no approved alternates on record.
Required ARIA — enforced by accessible-ai-output
<div role="log" aria-live="polite" aria-atomic="false">
  <span aria-hidden="true">▋</span> ← cursor, invisible to screen readers
The 8 Rules

One rule per design gap

Two rules require design work before any code is written. Three rules verify everything is correct before the feature ships.

ai-states-required All 7 visual states — loading, responding, done, failed, cut off, uncertain, empty — designed with real copy before any code is written Before Code
design-before-code Written plan covering layout, all visual states, the copy, and how interactions work — saved to a real file — before any code is written Before Code
accessible-ai-output Screen reader announcements, tab order, and readability — checked in 20 minutes before ship, not a week of fixes after Before Ship
ai-component-patterns 6 parts every AI feature needs — the input area, the streaming response, source links, activity log, confidence signals, and what to show when there's nothing yet — each with required elements Before Ship
prompt-ux-design How the input grows as you type, what suggestions appear, how the visual feedback changes from waiting to sending to receiving to done — not just a fixed-height text box Before Code
ai-output-design How headers, lists, code, and 8 other text elements look, how confident vs uncertain responses appear different, how very long outputs are handled — designed before coding begins Before Code
ai-onboarding-design What new users see, what they should try first, what happens when the AI can't answer — not just an empty text box waiting Before Code
design-token-audit All colours, spacing, and sizes reference shared design values — not hardcoded anywhere. Changing the theme means updating three values, not editing 40 files. Before Ship
How it works

Claude must produce real proof — not just say it's done

Each rule requires a specific output with real values. Claude cannot say 'all states are designed' without showing a file where all 7 states are actually written out.

ai-states-required — completion statement
AI states designed.
Feature: document-assistant
Touchpoints covered: 2 (main response area, inline citation panel)
State map: design/ai-states/document-assistant.md ✓

All 7 states documented:
Loading: skeleton (3 lines), "Searching your documents…", [Cancel] ✓
Streaming: cursor (▋), live text, [Stop], auto-scroll stops on user scroll ✓
Success: full response, [Copy] [👍 👎] [Retry], citation list ✓
Error: red border, "Something went wrong. Try again.", [Try again] ✓
Partial: dashed border, "Response cut off — Continue?", [Continue] ✓
Uncertain: amber left bar, ⚠ "Low confidence — verify this", [Show sources] ✓
Empty: 4 example prompts, input focused, capability boundary stated ✓

Edge cases:
Stream interrupted mid-word: partial token cleared, Error state shown ✓
Empty string response: treated as Partial, not Success ✓
Submit during generation: queued, shown after current completes ✓

Claude cannot write design/ai-states/document-assistant.md ✓
with real copy for all 7 states without actually doing the state design. That is the enforcement.

The 5 Specialists

Five AI roles Claude can take on

Each specialist has a narrow focus. Reviewers give PASS / CONDITIONAL / BLOCK verdicts and write reports to real files — not chat messages.

Opus

ai-ui-designer

Plans and builds every AI component from written spec to working code. Writes the spec and state maps before any code. Never hardcodes a colour, size, or spacing value.

Sonnet

ux-critic

Reviews every AI feature against all 5 rules. Writes the report to a real file. Verdict: pass, fix these things, or blocked — never 'looks good.'

Sonnet

state-designer

Writes exactly what the user sees in all 7 visual states — the words, the transitions, and 3 edge cases — before any component is built.

Sonnet

prompt-ux-designer

Designs the input area: how it grows, what suggestions appear, how the visual state changes from idle to sending to receiving to done. Never just a fixed-height text box.

Sonnet

accessibility-reviewer

Reviews screen reader support, keyboard navigation, colour contrast, and readability. Writes the report to file. Will not approve streaming output without proper screen reader announcements.

Before and after

What changes

The difference is not catching issues in review. It is the work existing before implementation starts.

✗ Without builder-design

✗ Streaming output is a div. No cursor. Auto-scroll fights the user when they try to read.
✗ Error state is an uncaught exception. Users see a blank screen or a browser error.
✗ Prompt input is a fixed-height textarea. Enter sends. Long messages overflow silently.
✗ Streaming content is invisible to screen readers. No ARIA live region.
✗ #3b82f6 hardcoded in 6 components. Rebrand = migration sprint.
✗ Empty state is a blank text input. First-time users have no idea what to ask.

✓ With builder-design

✓ role="log" aria-live="polite", streaming cursor aria-hidden, scroll follows user position.
✓ Error state: red border, "Something went wrong. Try again.", [Try again] re-focuses input.
✓ Auto-resize textarea, Cmd+Enter sends, [Stop] during generation, token counter at 80%.
✓ Streaming announced as it arrives. Cursor silent. Errors interrupt. Actions reachable by keyboard.
✓ All colours, spacing, shadows reference tokens. Theme change = three token values.
✓ 4 clickable domain-specific prompts. Capability boundary stated. Input focused on load.
Installation

30 seconds to enforce design

Sparse-clone installs only skills/ and .claude/agents/. Non-destructive — won't overwrite existing files.

macOS / Linux
curl -fsSL https://raw.githubusercontent.com/
RBraga01/builder-design/master/install.sh | bash
Windows (PowerShell)
irm https://raw.githubusercontent.com/
RBraga01/builder-design/master/install.ps1 | iex
Start with ai-states-required before writing any component code, then design-before-code to write the spec. Run design-token-audit and accessible-ai-output before any AI component PR merges.
The builder-* ecosystem

One pack per domain

All packs work standalone. All share the same enforcement model. Use one, some, or all.

Foundation

A Team

25 pre-configured engineering specialists, 18 workflow skills, a lead orchestrator, and a Pipeline Auditor. The base layer.
You are here

builder-design

AI UI design enforcement. States, streaming UI, prompt UX, accessibility, and design tokens.
AI Engineering

builder-ai

Eval, prompt versioning, fallback design, RAG pipelines, safety review. Three hard gates that block ship.
Product

builder-product

Product quality gates. PRD, feature scoping, metric definition, research synthesis, A/B test design, AI feature validation.
Growth

builder-growth

Growth quality gates. Positioning, copy, funnel analysis, experiments, retention design, AI messaging review.