Expressive design skill for AI agents

Overview

Expressive is a vibrant, personality-driven design system skill for AI-powered development. It pairs bold colors with playful layouts and a monospaced typographic voice to create interfaces that feel energetic and creative while staying structurally sound.

When you add this skill file to your AI coding tool, every component it builds — from buttons and cards to full authentication flows — carries the same visual energy, consistent spacing, and well-defined interaction patterns that make Expressive feel intentional rather than chaotic.

Design tokens

Color palette

Expressive uses a high-contrast, dual-accent color system anchored by pink and blue:

The pink-and-blue primary/secondary pairing gives the AI agent a strong visual identity to work with. All color references in the skill file use semantic tokens, so the agent never hardcodes hex values into components.

Typography

Expressive commits fully to IBM Plex Mono across every typographic role — primary, display, and monospaced. This unified monospaced voice is what gives the design its distinctive developer-friendly, technical-yet-playful character.

The type scale follows six predefined sizes:

• 14px — Captions, helper text, metadata
• 16px — Body text (default)
• 18px — Large body, lead text
• 24px — Section headings (h3)
• 32px — Page headings (h2)
• 40px — Hero headings (h1)

Font weights span the full range from 100 (thin) to 900 (black), giving the AI agent maximum expressive range for establishing hierarchy, emphasis, and personality within a single typeface.

Spacing

A 4px base unit drives the spacing scale: 4 / 8 / 12 / 16 / 24 / 32. Even with bold colors and playful layouts, this constraint keeps every component rhythmically aligned and visually grounded.

Component coverage

The skill file covers 40+ component families grouped by function:

• Inputs and forms — buttons, text inputs, selects, comboboxes, checkboxes, radios, switches, textareas, date/time pickers, file uploaders
• Data display — cards, tables, data lists, data grids, charts, stats/metrics, badges, chips, avatars
• Navigation — breadcrumbs, pagination, steppers, sidebars, top bars, command palette, tabs
• Overlays — modals, drawers, sheets, tooltips, popovers, menus
• Feedback — alerts, toasts, notifications center, progress indicators, skeletons, empty states
• Page-level — authentication screens, settings pages, documentation layouts, onboarding flows, pricing blocks, search

For each component, the skill defines required interaction states (default, hover, focus-visible, active, disabled, loading, error), keyboard and touch behavior, spacing and typography token usage, and responsive edge cases.

Brand personality

Expressive is designed for products that need to stand out. The combination of a monospaced typeface at every level, a vibrant pink primary color, and the full weight spectrum creates a visual language that reads as confident and creative.

This makes it a strong fit for:

• Developer tools and dashboards
• Creative portfolios and agency sites
• SaaS products that want to differentiate from the typical blue-and-sans-serif template
• Landing pages and marketing sites that need visual energy

The skill file encodes this personality at the token level, so the AI agent produces consistent output whether it's generating a simple button or an entire onboarding flow.

Accessibility

Expressive enforces WCAG 2.2 AA compliance as a hard requirement. Bold colors and playful layouts don't come at the cost of usability. The skill file instructs the AI agent to:

• Use keyboard-first interaction patterns for all interactive elements
• Include visible focus states on every focusable component
• Maintain sufficient color contrast ratios — especially important given the vibrant primary and secondary tokens
• Prioritize accessibility over aesthetics when the two conflict

Every accessibility rule in the skill is written to be testable in code review.

How to use with Claude AI

In Cursor IDE

1. Pull the skill file into your project:

npx typeui.sh pull expressive

2. The file is saved to .cursor/skills/expressive/SKILL.md by default. Cursor automatically picks up skill files from this directory and makes them available to Claude.

3. Start prompting — Claude will use the Expressive tokens, monospaced typography, and pink-blue color system when generating UI code.

In Claude Desktop or API

1. Copy the skill file content from the typeui.sh page (use the Copy button in the sidebar).

2. Paste it into your system prompt or as a reference document at the start of your conversation.

3. Ask Claude to build components or pages. It will follow the Expressive guidelines — using IBM Plex Mono throughout, the correct color tokens, and the full weight range for typographic hierarchy.

In other AI tools

The skill file is standard markdown and works with any AI tool that accepts system-level instructions:

• Windsurf — place the file in your project's .windsurf/rules/ directory
• GitHub Copilot — add it to .github/copilot-instructions.md or reference it in your prompt
• OpenAI GPTs — upload it as a knowledge file in the GPT configuration
• Any LLM API — include the file content in the system message

What sets Expressive apart

Most design system skills optimize for neutrality. Expressive takes the opposite approach — it gives the AI agent a strong opinion:

• One typeface everywhere — IBM Plex Mono for body, display, and code creates a unified voice that's immediately recognizable
• Full weight spectrum — weights from 100 to 900 let the AI build dramatic hierarchy within a single font family
• Vibrant dual-accent palette — pink primary + blue secondary gives every interface an energetic identity without requiring custom illustration
• Anti-patterns built in — the skill tells the AI what not to do (low contrast text, broken spacing rhythm, vague labels), so the playful style never becomes sloppy
• Quality gates — every rule is anchored to a token or threshold, keeping the output consistent across any number of generated components