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 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