Prompts

Prompt checklist for enforcing accessibility in AI-generated UI components.

Review a component or page for WCAG 2.1 compliance, covering contrast, keyboard navigation, screen readers, and motion.

Define meaningful adoption metrics for your design system, including what to measure, how to collect data, and target benchmarks.

Translate brand guidelines (PDF, style guide) into a structured set of design tokens with proper naming and hierarchy.

Write clear, useful design system changelog entries that help consumers understand what changed and what to do about it.

Map primitive color values to semantic design tokens with clear intent, usage rules, and accessibility notes.

Write a clear, actionable component deprecation notice with migration steps, timeline, and replacement guidance.

Generate comprehensive component documentation including props, usage guidelines, do's and don'ts, and accessibility notes from a component's code.

Prompt templates for extracting, documenting, and sharing component metadata.

Generate a full component specification from just a component name, including props, variants, states, tokens, and accessibility requirements.

Identify missing variants, states, and edge cases for an existing component by analyzing common UI patterns.

Run a structured design critique session using a framework that covers usability, visual design, accessibility, and consistency.

Prompts for generating components from Figma with MCP and documenting implementation.

Run a quick, structured health check on your design system covering tokens, components, documentation, adoption, and tooling.

Write a compelling design system proposal or RFP document to secure buy-in, budget, and headcount from leadership.

A drop-in system prompt template for any Claude work that touches your design system. Cache it once, reuse it on every screen, audit, and component review.

Prompt templates for generating, auditing, and syncing design tokens.

Prompts for generating and maintaining component and design system documentation.

Review AI-generated or hand-written code against a Figma design to catch visual mismatches, missing states, and token drift.

A prefill technique that makes Claude return parseable JSON tokens with no preamble, no apology, and no markdown wrapper. Drop-in pattern for token extraction pipelines.

Standardize icon naming across your design system with a consistent, predictable naming scheme.

Generate a step-by-step migration plan for moving between design system versions, tools, or architectures.

Prompt templates for building interactive prototypes and implementation-ready handoff artifacts.

Prompt templates for user research, competitive analysis, and design trend exploration.

Generate responsive design tokens that adapt spacing, typography, and layout across breakpoints.

Create a consistent spacing scale from a base unit, with token names and usage guidelines for layout and component spacing.

Generate comprehensive Storybook stories for a component, covering all variants, states, and edge cases.

Generate dark mode token values from an existing light mode token set, with proper contrast and readability adjustments.

Generate clear, structured documentation for a set of design tokens, including usage examples, do's and don'ts, and visual references.

Audit your design token names against naming conventions and flag inconsistencies, typos, and structural issues.