Here’s a quick overview of the prompt categories available. Click on any link to jump directly to that section.


Research Prompts

This section covers prompts for understanding users and the competitive landscape.

  • User Flow Creation
  • User Analysis
  • Design Trend Research
  • Competitive Analysis
  • Creative Problem-Solving

User Flow Creation

Create a user flow for a [fitness app] that helps users set goals, track workouts, and view progress over time.

User Analysis

Analyze [target audience/user group] and their pain points when [specific task]. What are their motivations, frustrations, and current workarounds? Include behavioral patterns and emotional triggers.

Design Trend Research

Research current design trends in [industry/category] and identify what's working well and what's becoming outdated. Provide specific examples and explain why these trends are effective.

Competitive Analysis

Conduct a competitive analysis of [competitor names] focusing on their UX/UI approach to [specific feature]. What are their strengths and weaknesses?

Creative Problem-Solving

I need to solve [specific problem] for [user type]. Brainstorm unconventional approaches that challenge typical design assumptions. Think beyond standard solutions.

Design Tokens Prompts

This section provides prompts for creating and managing a robust design token system.

  • Generate a Design Token System
  • Create Tokens with a Naming Convention
  • Create Typography Tokens
  • Build Accessibility Tokens
  • Audit Design Tokens
  • Create a Token Implementation Status Table
  • Generate a JSON Array of Token Objects
  • Compare Figma Variables with Design Tokens

Generate a Design Token System

Generate a complete design token system for [brand/product] using [token format: CSS custom properties/JSON/YAML]. Include color, typography, spacing, and component tokens with semantic naming.

Create Tokens with a Naming Convention

Create design tokens following the [naming convention: BEM/atomic/tier-based] pattern. Structure them for [use case: design system/component library/multi-brand] with proper hierarchy and inheritance.

Create Typography Tokens

Create typography tokens following this pattern: [font-family/size/weight/line-height]-[scale/variant]. Include responsive scaling and semantic hierarchy (heading, body, caption, etc.).

Build Accessibility Tokens

Build accessibility tokens for: focus indicators, high contrast modes, reduced motion, and screen reader states. Include WCAG compliance markers.

Audit Design Tokens

Audit these design tokens for: naming consistency, proper hierarchy, accessibility compliance, and missing variants. Suggest improvements.

Create a Token Implementation Status Table

Create a token implementation status table with: Token Name | Design Status | Development Status | Testing Status | Documentation Status | Release Version | Known Issues.

Generate a JSON Array of Token Objects

Generate a JSON array of token objects that can be imported into spreadsheet tools: [ { "tokenName": "color-primary-500", "value": "#3B82F6", "category": "Color", "usage": "Primary buttons" } ]

Compare Figma Variables with Design Tokens

Compare Figma variables with design tokens in code and identify: missing variables, unused tokens, and synchronization issues.

Clickable Prototypes Prompts

This section includes prompts for designing and building interactive prototypes.

  • Design a Mobile-First Interface
  • Extract Design Tokens from Figma
  • Create a Framework Component
  • Create a Healthcare Prototype
  • Create a README.md
  • Create a Prototype with Comprehensive Documentation
  • Create a Prototype with A/B Testing

Design a Mobile-First Interface

Design a mobile-first interface for [specific function] that prioritizes [key user action]. Consider thumb-friendly navigation and progressive disclosure.

Extract Design Tokens from Figma

Extract all design tokens from the current Figma file and generate a complete token system. Create CSS custom properties, TypeScript definitions, and Tailwind config. Sync any changes back to Figma as styles.

Create a Framework Component

Create a [framework] component for [specific functionality] following [design system/style guide]. Include proper TypeScript types, error handling, and accessibility attributes.

Create a Healthcare Prototype

Create a healthcare prototype for [specific workflow] with: patient data management, appointment scheduling, telemedicine interface, and HIPAA compliance considerations.

Create a README.md

Create a README.md for this project that includes setup instructions, API documentation, and contribution guidelines. Project details: [project description]

Create a Prototype with Comprehensive Documentation

Create a prototype with comprehensive documentation: component specifications, interaction details, API requirements, and implementation notes for development handoff.

Create a Prototype with A/B Testing

Create a prototype with built-in A/B testing: variant switching, metrics collection, statistical significance tracking, and results visualization.

Cursor Specific Instructions

This section offers prompts tailored for use with Cursor to streamline your design and development workflow.

  • Query Figma Variables
  • Use @web for Current Standards
  • Include File Generation
  • Request Multiple Formats
  • Ask for Tooling Integration
  • Specify Inheritance Patterns

Query Figma Variables

Query all Figma variables and generate a TypeScript definition file.

Use @web for Current Standards