Elegant design skill for AI agents

Overview

Elegant is a minimal, clean design system skill built for AI-powered development workflows. It provides a complete set of design tokens, component guidelines, and accessibility rules that AI agents can follow to generate consistent, production-ready interfaces.

When you add this skill file to your AI coding tool, every component it generates — from buttons and forms to full page layouts — will follow the same visual language, spacing rhythm, and interaction patterns defined by Elegant.

Design tokens

Color palette

Elegant uses a purpose-driven color system built on semantic tokens:

All color usage in the skill file references semantic tokens rather than raw hex values, so the AI agent always picks the right color for the right context.

Typography

Elegant pairs Google Sans for body and display text with Anonymous Pro for monospaced elements like code blocks and terminal output. The type scale follows six predefined sizes:

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

Font weights range from 100 (thin) to 600 (semibold), giving the AI agent enough range to establish clear visual hierarchy without overusing bold styles.

Spacing

A 4px base unit drives the entire spacing scale: 4 / 8 / 12 / 16 / 24 / 32. This constraint keeps layouts rhythmically consistent regardless of which component the AI generates.

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.

Accessibility

Elegant enforces WCAG 2.2 AA compliance as a hard requirement, not a suggestion. 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 across all token pairings
• 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 elegant

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

3. Start prompting as usual — Claude will reference the Elegant design tokens, spacing scale, and component rules 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, and it will follow the Elegant guidelines — using the correct color tokens, type scale, spacing rhythm, and interaction states.

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 makes a good design skill

The Elegant skill file goes beyond listing colors and fonts. It encodes opinionated design decisions that prevent the most common AI-generated UI mistakes:

• Semantic tokens over raw values — the AI picks primary instead of hardcoding #3B82F6, so your design stays maintainable
• Explicit interaction states — every component gets defined hover, focus, active, and disabled states instead of leaving them to chance
• Anti-patterns — the skill explicitly tells the AI what not to do (low contrast text, inconsistent spacing, ambiguous labels)
• Quality gates — rules are anchored to tokens and thresholds, not vague adjectives like "make it look nice"

The result is AI-generated UI that looks intentionally designed rather than randomly assembled.