Most visual design delays are not about tools. They are about unclear decisions.
You start exploring, move a few components around, try a color tweak, then realize you are solving five problems at once. Good prompt templates help you separate those problems and make better calls faster.
This guide gives you 10 practical prompt templates in language that matches real design work. Each section includes a short prompt snippet plus a link to the full prompt template on AI UX Playground.
For the full library, start here: All Prompts and Visual Design Prompts.
Use these in ChatGPT, Claude, Gemini, Claude Code, Claude Design, Cursor, Codex, or any model that can reason about design constraints.
Prompt snippet: short version for fast use during active design work
Full prompt: complete template with more structure and implementation detail
If you want to improve your own prompt writing style, use: Prompt Engineering Best Practices.
Framer - The best code-free tool for designers to create beautiful websites. Use our special promotion code: partner25proyearly to get 3 months free yearly Pro subscription.
Use when you need 2 to 3 distinct creative directions before high-fidelity comps.
You are a senior visual designer helping me create mood board territories for [product/feature] targeting [audience].
Create 3 clearly different territories.
For each territory include:
- Creative direction name
- Mood in 3 words
- Color story (primary, support, accent with hex suggestions)
- Type mood (what kind of typography and why)
- Image/art direction (photo, illustration, 3D, texture, etc.)
- UI styling cues (density, contrast, corner style, shadows, motion tone)
- Style-reference keywords to search for
- Risks and where this direction could fail
Keep each territory meaningfully different, not minor variants.
How to use: Paste your brief, audience, and brand traits, then ask for 3 territories and pick one direction before opening high-fidelity comps.
Full prompt: Visual Hierarchy Design
Use when brand colors exist but break in real product states.
Act as a visual designer and accessibility reviewer.
Given this palette: [paste colors], create:
- Role map (bg, surface, text, muted text, primary, success, warning, danger)
- Contrast risks likely to appear in forms, tables, and dense screens
- Adjusted palette recommendations that preserve brand feel
- Light mode and dark mode token sets
Return implementation-ready output.
How to use: Paste your current palette and key UI contexts (forms, tables, alerts), then apply the returned role map and adjusted tokens in both light and dark mode.
Full prompt: Accessibility Audit Checklist
Related full prompt: Design Tokens Definition
Use when the hero looks polished but messaging and hierarchy still feel weak.
Review this hero section for [product].
Context:
- Audience: [audience]
- Current headline: [headline]
- Current subhead: [subhead]
- Current CTA: [cta]
- Screenshot notes: [layout notes]
Return:
- Top 5 clarity issues ranked by impact
- 3 revised hero options (conservative, balanced, bold)
- CTA alternatives with intent labels
- Visual hierarchy changes above the fold
Prioritize clarity over cleverness.
How to use: Paste your current headline, subhead, CTA, and screenshot notes, then test the 3 revised versions against clarity and conversion intent.
Full prompt: Landing Page Copy
Use when typography feels inconsistent across screens, pages, or breakpoints.
Build a practical typography system for [brand/product] across [web app/marketing/mobile].
Constraints:
- Primary font: [font]
- Secondary font (optional): [font]
- Audience: [audience]
- Tone: [tone]
Return:
- Type scale (display, h1-h4, body, caption) with size, weight, line-height
- Usage rules by context
- 5 consistency mistakes to avoid
- Accessibility and readability guidance
How to use: Provide platform, brand tone, and font constraints, then implement the returned type scale as reusable text styles/tokens across product and marketing.
Full prompt: Design System Audit
Use when a screen works functionally but still looks unfinished.
You are doing a senior visual polish pass on this interface: [describe or paste screenshot notes].
Identify:
- Spacing inconsistencies
- Alignment issues
- Contrast and legibility weaknesses
- Over-styled or under-styled elements
Then return a prioritized fix list:
- P1 must fix before ship
- P2 should fix soon
- P3 nice to have
Keep recommendations specific and measurable.
How to use: Share one screen at a time, apply all P1 fixes first, then ship a second pass for P2 refinements after layout and hierarchy are stable.
Full prompt: Design Critique Framework
Use when one component is trying to do too many jobs and consistency is slipping.
Design a variant matrix for [component] in [product context].
Cover variants by:
- State: default, hover, active, disabled, loading, error
- Density: compact, default, comfortable
- Importance: secondary, primary, destructive
For each variant include:
- Visual differences
- Usage rules
- Anti-patterns to avoid
How to use: Input one component and its real use cases, then convert the output into a variant table in your design system documentation.
Full prompt: UI Component Specification
Use right before engineering handoff to reduce implementation churn.
Create a visual QA checklist for this feature: [feature details].
Include checks for:
- Spacing and alignment
- Token usage consistency
- Typography consistency
- Color contrast and accessibility
- Empty/loading/error states
- Responsive behavior at [breakpoints]
Return two sections:
1) Designer QA
2) Dev QA
How to use: Run this after final design sign-off, then use the checklist with engineering to catch spacing, states, and responsive issues before build starts.
Full prompt: Test Case Generation
Use when new work starts drifting from your visual identity.
You are a brand design lead.
Given this concept: [page/feature], evaluate fit with brand traits: [traits].
Return:
- Where the concept aligns
- Where it drifts
- Concrete adjustments in color, typography, imagery, and motion
- A short “do not cross” guardrail list
How to use: Paste your brand attributes and a new concept, then use the guardrail list as approval criteria during design reviews.
Full prompt: Brand Identity Design Brief
Use when references are interesting but hard to translate into execution.
Analyze visual patterns from these references: [links].
For each reference:
- What decisions make it feel premium or weak
- Which choices are transferable to [our product]
- Which choices should be avoided for [our audience]
Then propose one hybrid direction with clear visual principles.
How to use: Add 3 to 5 reference links, then extract transferable principles and translate them into your own style rules, not visual copies.
Full prompt: Competitive UX Analysis
Use when stakeholder comments are vague, subjective, or conflicting.
Rewrite this stakeholder feedback into actionable design direction.
Raw feedback: [paste comments]
Return:
- Underlying concern behind each comment
- Clear design requirement
- Decision criteria for evaluating revisions
- Clarifying questions before next design round
Keep tone neutral and practical.
How to use: Paste raw stakeholder comments, then use the translated requirements and decision criteria to structure the next revision round.
Full prompt: Stakeholder Feedback to Design Actions
Prompt templates will not replace your taste, instincts, or craft. They make those strengths easier to apply under deadline pressure.
Save these templates where you already work. Reuse them in live projects. Adapt the language to your team and product context. The payoff is fewer low-quality iterations and stronger design decisions in less time.
If these prompt templates helped, the next step is pairing prompts with visual references and proven interaction patterns.
Use these pages as your follow-up workflow:
Prompt templates by category: Prompts
Visual design prompt set: Visual Design Prompts
Pattern library for interaction decisions: Patterns
Real product reference shots and teardowns: Gallery
Frameworks for structuring design decisions: Frameworks
Step-by-step workflow templates: Playbooks
Reusable skills for AI-assisted workflow: Skills
Tutorials and AI UX insights: Blog
No posts
Comments
Nothing yet. Say the first thing.
Sign in to join the conversation.