Prompts
Ready-to-use prompts for design with AI.
32 resources
Prompting Basics
Practical foundations for writing clear prompts that produce better design and code output.
DE Design Token Audit Prompt
A prompt that analyzes your design token JSON and identifies issues like missing semantic layers, inconsistent naming, and accessibility gaps.
Accessibility Review
Review a component or page for WCAG 2.1 compliance, covering contrast, keyboard navigation, screen readers, and motion.
Accessibility Prompts
Prompt checklist for enforcing accessibility in AI-generated UI components.
Adoption Metrics Framework
Define meaningful adoption metrics for your design system, including what to measure, how to collect data, and target benchmarks.
Changelog Entry Writer
Write clear, useful design system changelog entries that help consumers understand what changed and what to do about it.
Component Deprecation Notice
Write a clear, actionable component deprecation notice with migration steps, timeline, and replacement guidance.
Semantic Color Mapping
Map primitive color values to semantic design tokens with clear intent, usage rules, and accessibility notes.
Brand-to-Token Mapping
Translate brand guidelines (PDF, style guide) into a structured set of design tokens with proper naming and hierarchy.
CO Component Documentation Generator
Generate comprehensive component documentation including props, usage guidelines, do's and don'ts, and accessibility notes from a component's code.
Component Metadata Prompts
Prompt templates for extracting, documenting, and sharing component metadata.
Component Spec Generator
Generate a full component specification from just a component name, including props, variants, states, tokens, and accessibility requirements.
Component Variant Finder
Identify missing variants, states, and edge cases for an existing component by analyzing common UI patterns.
Design Critique
Run a structured design critique session using a framework that covers usability, visual design, accessibility, and consistency.
Design System Components Prompts
Prompts for generating components from Figma with MCP and documenting implementation.
Design System Health Check
Run a quick, structured health check on your design system covering tokens, components, documentation, adoption, and tooling.
Design System RFP/Proposal
Write a compelling design system proposal or RFP document to secure buy-in, budget, and headcount from leadership.
Design System Work: The System Prompt
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.
Design Tokens Prompts
Prompt templates for generating, auditing, and syncing design tokens.
Documentation Prompts
Prompts for generating and maintaining component and design system documentation.
Figma-to-Code Review
Review AI-generated or hand-written code against a Figma design to catch visual mismatches, missing states, and token drift.
Force Claude to Output Design Tokens as JSON
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.
Icon Naming Convention
Standardize icon naming across your design system with a consistent, predictable naming scheme.
Design System Migration Plan
Generate a step-by-step migration plan for moving between design system versions, tools, or architectures.
Prototyping Prompts
Prompt templates for building interactive prototypes and implementation-ready handoff artifacts.
Responsive Token Generator
Generate responsive design tokens that adapt spacing, typography, and layout across breakpoints.
Research Prompts
Prompt templates for user research, competitive analysis, and design trend exploration.
Spacing Scale Generator
Create a consistent spacing scale from a base unit, with token names and usage guidelines for layout and component spacing.
Storybook Story Generator
Generate comprehensive Storybook stories for a component, covering all variants, states, and edge cases.
Dark Mode Token Mapping
Generate dark mode token values from an existing light mode token set, with proper contrast and readability adjustments.
Token Documentation Generator
Generate clear, structured documentation for a set of design tokens, including usage examples, do's and don'ts, and visual references.
Token Naming Audit
Audit your design token names against naming conventions and flag inconsistencies, typos, and structural issues.