Simple design skill for AI agents

Overview

Simple is the foundational design system skill on typeui.sh. It makes no attempt to be clever, thematic, or distinctive — and that's exactly what makes it powerful. Inter for type, blue for actions, violet for accents, white surfaces, 4px grid. Every choice is the proven default, the option with the fewest trade-offs, the foundation that just works.

When you add this skill file to your AI coding tool, every component it generates looks like it belongs in any well-built product. No personality to manage, no theme to maintain, no visual metaphor to stay consistent with. Just clean, readable, professional UI that gets out of the user's way.

Design tokens

Color palette

Simple uses the most universally recognized token palette in interface design — the same colors you'd find in a freshly initialized Tailwind project or a well-configured component library:

There's nothing novel about this palette, and that's the point. Users already know that blue means "do something," green means "it worked," and red means "be careful." Simple leverages existing mental models instead of teaching new ones. The AI agent builds with these tokens without ever needing to explain the visual language to the people using the interface.

Typography

Simple uses Inter for all body and display text, paired with JetBrains Mono for code and monospaced content. This is the most widely deployed UI type pairing in modern web development — and the most exhaustively tested.

Inter was designed specifically for computer screens. Its tall x-height, open apertures, and carefully tuned spacing make it readable at every size from 12px metadata to 32px hero headings. The type scale uses six practical sizes:

• 12px — Fine print, tertiary metadata
• 14px — Captions, helper text, secondary labels
• 16px — Body text (default)
• 20px — Large body, lead text, card titles
• 24px — Section headings (h3)
• 32px — Page headings, hero text (h1/h2)

Font weights span 100 (thin) to 900 (black). Simple's approach to weight is pragmatic: 400 for body text, 500 for labels and UI chrome, 600 for headings, 700 for primary emphasis. The full range is available, but the skill teaches the AI to stay in the middle — consistent, predictable, no surprises.

JetBrains Mono brings programming ligatures and clear glyph differentiation to code blocks and technical content, the same combination trusted by millions of developers in their IDEs every day.

Spacing

A 4px base unit drives the spacing scale: 4 / 8 / 12 / 16 / 24 / 32. The scale is deliberately conventional — the same progression you'd find in most design systems and utility-first CSS frameworks. The AI agent uses 8px for tight groupings, 16px for standard component padding, 24px for section gaps, and 32px for major divisions. No custom increments, no density modes, no surprises. Every developer who reads the output already knows what these values mean.

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.

Design philosophy

Simple operates on a principle that most design systems overcomplicate: the best UI is the one users don't notice. Every decision optimizes for familiarity, predictability, and zero learning curve:

• Convention over invention — every token, every font choice, every spacing value is the industry standard. The AI agent never generates something a user hasn't seen before, which means they never need to figure out how to use it
• One typeface, full range — Inter for everything. No display/body split to manage, no font-switching hierarchy to coordinate. Size and weight handle the entire hierarchy within a single, perfectly readable typeface
• The boring palette — blue and violet are the defaults because they work in every context. Professional, accessible, neutral enough for any brand to adopt, recognizable enough that users never question what's interactive
• Predictable spacing — the 4px grid matches what developers already expect from Tailwind, Bootstrap, and every major component library. No custom density modes or baseline grids to learn
• Invisible design — the highest compliment for Simple is that nobody talks about how it looks. Users accomplish their tasks, developers read the code without confusion, and the interface never draws attention away from content

This makes Simple the right choice for:

• MVPs and prototypes that need to look professional immediately
• Internal tools and admin panels where function matters more than brand
• SaaS products in early stages before brand identity is finalized
• Developer documentation and technical platforms
• Any product where the team wants to ship fast and iterate on design later
• Starter templates and boilerplate projects
• Products that serve diverse audiences and can't afford a polarizing aesthetic

Accessibility

Simple enforces WCAG 2.2 AA compliance as a hard requirement. Convention-driven design is inherently accessibility-friendly — the more familiar the interface, the easier it is for everyone to use. 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 — the blue primary creates strong, unambiguous focus rings on white surfaces
• Maintain sufficient color contrast ratios across all token pairings, with the blue/violet against white providing comfortable margins above AA requirements
• Prioritize accessibility over aesthetics when the two conflict

Simple's conventional palette was essentially designed around accessibility constraints. Blue #3B82F6 on white passes AA for large text, and the near-black text (#111827) on white exceeds 15:1 contrast. The AI agent rarely encounters contrast challenges because the entire token system is pre-validated for accessibility.

Every accessibility rule 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 simple

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

3. Start prompting — Claude will generate clean, professional interfaces with Inter typography, the blue-violet palette, and predictable 4px spacing.

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 Simple guidelines — using Inter throughout, conventional color tokens, and standard spacing that any developer can read and maintain.

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 Simple apart

Simple is the only typeui.sh design skill that deliberately has no distinguishing visual identity. That absence is the feature:

• Zero learning curve — every token, font, and spacing value matches what developers already know from Tailwind, shadcn/ui, and the broader React ecosystem. The AI's output is immediately readable to any frontend engineer
• Universal compatibility — no strong visual opinion means Simple's output works as a starting point for any brand. You can layer your own identity on top without fighting an existing theme
• Pre-validated accessibility — the entire color system was effectively designed around WCAG compliance. The AI almost never generates contrast violations because the tokens don't allow it
• Maximum AI consistency — when the skill file has no edge cases, no unusual fonts, and no thematic constraints, the AI agent produces remarkably consistent output across prompts. Simple is the most predictable skill to work with
• The honest starting point — if you don't know what design system you want yet, start with Simple. It gives you production-quality UI today and a clean foundation to customize tomorrow
• Quality gates — every rule is anchored to a token or measurable threshold, keeping the conventional output consistent whether the AI generates a single form field or an entire application