Paper design skill for AI agents

Overview

Paper Design is a minimal, clean design system skill file built for engineers and designers who want their AI-generated interfaces to feel intentional and refined. Inspired by the tactile simplicity of paper, this skill prioritizes whitespace, clear typography, and a restrained color palette to produce interfaces that are both functional and aesthetically disciplined.

When you give this skill file to an AI coding assistant, it acts as a comprehensive blueprint — defining every design token, component behavior, accessibility requirement, and interaction state so the output is consistent and production-ready from the first generation.

Design Tokens

Color Palette

Paper Design uses a tight, purpose-driven color system built on semantic tokens rather than raw hex values:

The palette is intentionally limited. Every color maps to a specific semantic role, which means AI outputs stay visually coherent even across complex multi-page applications.

Typography

Paper Design defines a three-font system with a full range of weights:

• Primary font: Roboto — used for body text, labels, and general UI content
• Display font: Montserrat — used for headings, hero sections, and prominent display text
• Monospace font: PT Mono — used for code blocks, terminal output, and technical content

The type scale follows a progressive rhythm: 14 / 16 / 18 / 24 / 32 / 40px, with font weights ranging from 100 (thin) through 900 (black) to give you full control over visual hierarchy.

Spacing

All spacing follows a 4px base unit with a defined scale of 4 / 8 / 12 / 16 / 24 / 32px. This creates a consistent vertical and horizontal rhythm across every component, preventing the visual drift that often occurs in AI-generated layouts.

Component Coverage

Paper Design includes guidance for over 40 component families, covering the full spectrum of modern web interfaces:

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

Each component family includes defined states (default, hover, focus-visible, active, disabled, loading, error), interaction behavior for keyboard, pointer, and touch, and explicit token usage for spacing, typography, and color.

Accessibility

Paper Design enforces WCAG 2.2 AA compliance as a baseline. The skill file instructs the AI to:

• Use keyboard-first interaction patterns with visible focus states on every interactive element
• Maintain sufficient color contrast ratios between text and background surfaces
• Provide semantic HTML structure and proper ARIA attributes
• Include testable acceptance criteria for every accessibility requirement

When there is a conflict between visual aesthetics and accessibility, the skill file explicitly prioritizes accessibility.

How to Use with AI Tools

Cursor and Claude

1. Pull the skill file into your project:

npx typeui.sh pull paper-design

2. The skill file will be saved as a SKILL.md in your project. Cursor automatically picks up skill files and uses them as context when generating code.

3. Start prompting — ask Cursor to build components, pages, or layouts, and it will follow the Paper Design system's tokens, spacing, typography, and component rules.

Claude (Anthropic)

You can use Paper Design directly with Claude by copying the skill file content into your conversation or project:

1. Copy the skill file from the design skill page or download it
2. Paste it as context at the beginning of your Claude conversation, or add it to a Claude Project as project knowledge
3. Ask Claude to generate UI code — it will follow the Paper Design foundations, component rules, and accessibility requirements

Other AI Tools

The skill file is a standard markdown document that works with any AI assistant that accepts system-level or context instructions:

• ChatGPT — paste into Custom Instructions or at the start of a conversation
• Windsurf / Codeium — place the file in your project directory
• GitHub Copilot — add to your repository's instructions or context files
• v0 by Vercel — paste the design tokens and component rules as context

Design Philosophy

Paper Design follows three principles:

1. Foundations first — define tokens and constraints before component-level decisions
2. Opinionated defaults — provide concrete values so the AI doesn't have to guess
3. Accessibility over novelty — when uncertain, choose the accessible path

The skill file uses explicit constraint language: "must" for non-negotiable rules, "should" for recommendations. Every rule is anchored to a specific token, threshold, or example rather than relying on vague adjectives.