SUMMARY
Purpose: Design Tokens bridge the gap between design and development by standardising UI properties (like colour, spacing, and typography) into platform-agnostic variables used across prototypes and production code.
Design Thinking Phase: Prototype
Time: 60–90 minutes to define tokens + ongoing governance
Difficulty: ⭐⭐
When to use:When designing high-fidelity prototypes that need engineering alignmentWhen preparing UI specs or design systems for front-end handoffWhen scaling component libraries across multiple platforms (e.g. iOS, Android, Web)
What it is
Design Tokens are named entities—such as “spacing-md” or “brand-primary”—that store design decisions (e.g. 16px spacing or #007AFF). They serve as the atomic foundations for scalable design systems, allowing design and development teams to align UI properties consistently across tools, platforms, and codebases.
📺 Video by NNgroup. Embedded for educational reference.
Why it matters
Design Tokens ensure precision and consistency across design and development, making collaboration smoother and reducing design debt. By treating UI values as shared infrastructure, teams can quickly theme products, manage accessibility states, and provide scalable support for multiple brand variants—all from a single source of truth.
When to use
- During the prototyping phase, to simulate build-ready fidelity in UI mockups
- When documenting specs for dev handoff or component library integration
- As part of scaling mature design systems across multiple brands or platforms
Benefits
- Rich Insights: Helps uncover user needs that aren’t visible in metrics.
- Flexibility: Works across various project types and timelines.
- User Empathy: Deepens understanding of behaviours and motivations.
How to use it
Here’s a step-by-step approach to implementing Design Tokens in practice:
- Audit UI Styles: Inventory colours, typography, spacing, and other reusable attributes in your design files.
- Define Token Categories: Group tokens by function—such as colours, spacing, font sizes, shadows, and border radii.
- Name Tokens Intuitively: Use semantic labels (e.g. `color-danger-bg`) rather than hard-coded values (e.g. `#FF0000`).
- Apply Tokens in Prototypes: Use design tools like Figma Variables or plugins (e.g. Tokens Studio) to apply atomic values.
- Sync with Development: Convert token definitions into code (e.g. JSON, CSS custom properties, Style Dictionary) for dev integration.
- Document Usage: Provide contextual guidelines on when and how to apply each token inside your design system documentation.
Example Output
A simplified set of semantic design tokens for mobile and web:
- color-primary: #1A73E8
- color-background: #FFFFFF
- font-size-body-lg: 16px
- spacing-md: 16px
- radius-sm: 4px
These tokens are then referenced in design components (e.g. buttons, inputs) and used in code as CSS variables or iOS/Android styles.
Common Pitfalls
- Hardcoding values in components: Avoid bypassing tokens by using absolute values like #333 or px directly.
- Over-naming tokens: Don’t create a unique token for every variation—group meaningfully by purpose (e.g. ‘input-border’ vs. ‘checkbox-border’).
- Forgetting cross-platform needs: Ensure tokens support native and web platforms with consistent naming schemas.
10 Design-Ready AI Prompts for Design Tokens – UX/UI Edition
How These Prompts Work (C.S.I.R. Framework)
Each of the templates below follows the C.S.I.R. method — a proven structure for writing clear, effective prompts that get better results from ChatGPT, Claude, Copilot, or any other LLM.
C.S.I.R. stands for:
- Context: Who you are and the UX situation you're working in
- Specific Info: Key design inputs, tasks, or constraints the AI should consider
- Intent: What you want the AI to help you achieve
- Response Format: The structure or format you want the AI to return (e.g. checklist, table, journey map)
Level up your career with smarter AI prompts.Get templates used by UX leaders — no guesswork, just results.Design faster, research smarter, and ship with confidence.First one’s free. Unlock all 10 by becoming a member.
Prompt Template 1: “Audit Your Design Tokens Across Devices”
Audit Your Design Tokens Across Devices
Context: You’re a Senior Product Designer reviewing a component set for responsive web and native mobile platforms.
Specific Info: The UI includes buttons, input fields, and cards with shared properties but platform-specific variations.
Intent: Assess the consistency, redundancy, and gaps in token definitions across screen sizes and OS environments.
Response Format: Table comparing token usage (name, value, context) across web, iOS, and Android, highlighting any inconsistencies.
Ask if additional screen sizes or design files should be checked.
Suggest one way to standardise token definitions across platforms.
Prompt Template 2: “Generate Accessible Colour Tokens Based on WCAG”
Generate Accessible Colour Tokens Based on WCAG
Context: You’re a Design System Lead creating a new colour theme for a high-contrast mode variation.
Specific Info: The default palette includes 8 core colours and 3 semantic statuses (success, warning, error).
Intent: Generate WCAG-compliant colour token pairs (foreground/background) that meet minimum contrast ratios.
Response Format: List of token pairs with their contrast ratios + label if they meet AA or AAA accessibility standards.
Ask if branding requirements limit colour changes.
Next, suggest appropriate text/icon sizes for low-vision users.
Prompt Template 3: “Propose a Token Split Between Semantic and Functional Values”
Propose a Token Split Between Semantic and Functional Values
Context: You’re refactoring a bloated token library with 200+ individual entries.
Specific Info: Many tokens refer to specific pages (e.g. 'dashboard-title-font') or use-value naming (e.g. 'grey-800').
Intent: Help categorise and rename tokens using semantic (meaning) vs. functional (value) split logic.
Response Format: Grouped token list with recommended naming conventions, explanation, and rationale.
Ask if legacy code references must be preserved.
Recommend a transition or migration plan if renaming is approved.
Prompt Template 4: “Create a Figma Variable Map for Prototyping”
Create a Figma Variable Map for Prototyping
Context: You’re setting up Figma variables for use in interactive prototypes tied to your token system.
Specific Info: Your tokens include 4 colour scales, 3 text sizes, and 2 elevation settings.
Intent: Create a Figma variable naming schema that’s scalable and developer-friendly.
Response Format: JSON-style map of variable names with descriptions and example application.
Ask if tokens will be translated into Style Dictionary or native code.
Then, propose naming adjustments to improve developer handoff.
Prompt Template 5: “Spot Redundant Spacing Tokens in a Component Library”
Spot Redundant Spacing Tokens in a Component Library
Context: You’ve received feedback that spacing in cards and containers feels inconsistent.
Specific Info: Library includes 10 spacing tokens and 6 variants of card + list components.
Intent: Identify overlapping or unused spacing tokens and recommend a cleaner scale.
Response Format: Table showing token name, usage count, example components, and redundancy rating.
Ask if spacing tokens should align to an 8pt grid.
Suggest one visualisation format to present this cleanup to stakeholders.
Prompt Template 6: “Define Border Radius Tokens by Usage Context”
Define Border Radius Tokens by Usage Context
Context: You’re updating UI tokens to better reflect platform-specific affordances.
Specific Info: Roundness varies between small buttons, image thumbnails, and modal corners.
Intent: Create a rational set of border radius tokens organised by use-case, not just value.
Response Format: Token catalogue grouped by component usage context, with platform overrides as needed.
Ask if tokens need to map 1:1 to existing dev tokens.
Then suggest one interactive prototype test to validate user perception.
Prompt Template 7: “Generate Multi-Brand Token Themes from a Core Set”
Generate Multi-Brand Token Themes from a Core Set
Context: Your team supports four white-labelled products sharing a single codebase.
Specific Info: Each brand has unique primary colour, font, and logo usage.
Intent: Propose token themes built on one shared base set using overrides per brand.
Response Format: JSON-styled token override sheets per brand with fallback logic highlighted.
Ask if brands will need dark mode support.
Recommend one approach to automate theme switching based on user login.
Prompt Template 8: “Convert Tokens from Flat Naming to Token Studio Format”
Convert Tokens from Flat Naming to Token Studio Format
Context: You’re migrating design tokens into Tokens Studio for Figma.
Specific Info: Your current tokens use flat naming (like 'red-100' or 'font-button-lg').
Intent: Convert tokens to nested categories (e.g. color > brand > primary) for structured use in Tokens Studio.
Response Format: YML/JSON output with category nesting and sample variable declarations.
Ask if source tokens exist in JIRA, Zeplin, or JSON repositories.
Suggest validation steps to confirm correct nesting before import.
Prompt Template 9: “Check Alignment Between Design Tokens and CSS Variables”
Check Alignment Between Design Tokens and CSS Variables
Context: You’re preparing tokens for Handoff and want to ensure fidelity between design and code.
Specific Info: Designers use Figma Tokens; developers use a SCSS/CSS variable theme system.
Intent: Compare and reconcile the naming, value, and scope of design tokens and CSS variables.
Response Format: Table with three columns — Token Name, Figma Reference, CSS Variable, + mismatch notes.
Ask if tokens are expected to support design-to-code automation.
Propose developer sync process if gaps are common.
Prompt Template 10: “Outline a Documentation Template for Design Tokens”
Outline a Documentation Template for Design Tokens
Context: You’re adding documentation for tokens into your design system site.
Specific Info: The audience includes designers, developers, and QA testers with varied familiarity.
Intent: Design a documentation outline that balances structure, guidance, and real examples.
Response Format: Section-by-section page outline with titles, descriptions, and sample content formats.
Ask if docs will be used in Notion, ZeroHeight, or Storybook.
Recommend one interactive way to demo token impact for end-users.
