Visual design AI prompts
Curated visual design prompts for ChatGPT, Claude, and Cursor. Copy, adapt, and run in your workflow.
25 prompts
- Visual designMake my design system LLM-readableSix-step coding-agent prompt: audit hardcoded CSS values, build a three-layer token file, write component specs, add a CI token audit, and point your AI rules at it.
By Hardik Pandya - Visual designPolish frontend UICoding-agent prompt for Cursor, Claude Code, or Codex: fix AI-slop UI with a bold direction, type, color, layout, motion, and a concrete polish plan.
- Visual designDesign Apple-style UICoding-agent prompt for Cursor, Claude Code, or Codex: fluid gesture UI, springs, interruptible motion, materials, depth, and web implementation notes.
- Visual designUnslop my UICoding-agent prompt for Cursor, Claude Code, or Codex: strip AI-slop tells from a UI and ship a concrete anti-slop rewrite plan.
- Visual designPolish UI motionCoding-agent prompt for Cursor, Claude Code, or Codex: purposeful enter/exit, springs, hover/focus craft, and an anti-slop motion audit.
- Visual designAdd taste to my designCoding-agent prompt for Cursor, Claude Code, or Codex: infer the brief, set variance/motion/density dials, and lock one non-generic direction.
- Visual designUI Component SpecificationGenerate a detailed UI component specification with states, variants, and interaction patterns.
- Visual designVisual Hierarchy DesignDesign effective visual hierarchy for layouts to guide user attention and improve readability.
- Visual designDesign System Component Visual Spec WriterDeveloper-friendly visual specs: anatomy, tokenized properties per variant/state, spacing, responsive behavior, and accessibility for one component cluster.
- Visual designColor Palette & Typography System BuilderProduction-oriented foundations: primitive scales, semantic tokens, contrast tables, dark mode mapping, modular type scale, and token naming for tools like Style Dictionary.
- Visual designUI Layout & Composition ExplorerThree layout concepts (hierarchy-first, density, progressive disclosure), a recommended direction, grid spec, visual hierarchy ranking, and edge cases before detailed design.
- Visual designVisual Hierarchy AuditStructured critique of an existing screen from a detailed description: attention flow, hierarchy scores, P1/P2 issues, contrast flags, spacing, prioritized fixes, before/after for the top fix.
- Visual designDesign Completeness ChecklistEnsure designs are complete and ready for handoff with comprehensive state coverage.
- Visual designComponent Prioritization MatrixIdentify, inventory, and prioritize which design system components to build first based on usage, impact, and dependencies.
- Visual designDesign System DocumentationCreate comprehensive documentation for design system components including usage guidelines, code examples, and best practices.
- Visual designDesign System Rollout StrategyPlan how to roll out a design system to teams including migration, training, adoption, and support strategies.
- Visual designDesign Tokens DefinitionCreate a comprehensive design tokens system for design systems.
- Visual designDesign Handoff DocumentationCreate comprehensive design handoff documents with specs, assets, and implementation details for developers.
- Visual designDesign System Component CreationCreate new design system components with variants, states, documentation, and usage guidelines.
- Visual designDesign Token AuditAudit design tokens for consistency, identify duplicates, and recommend consolidation strategies.
- Visual designDesign System to AI Prompt ConverterConvert design system documentation into AI-friendly prompts for generating prototypes that match your design system exactly.
- Visual designAI Prototype Design System ValidationValidate AI-generated prototypes against design system requirements and identify inconsistencies to fix.
- Visual designDesign System AuditConduct a comprehensive audit of a design system for consistency and improvements.
- Visual designExtract Design System from ScreenshotAnalyze a screenshot and extract a comprehensive design system including colors, typography, spacing, and components.
- Visual designExtract Design System Using Figma MCPUse Figma MCP (Model Context Protocol) to extract a complete design system from Figma files, including components, styles, and tokens.
Beyond prompts
Standing instructions and skills beat re-pasting the same workflow every session.
- Frontend design skillTaste and layout standards agents apply when generating UI.
- Top AI prompts for visual designersMood boards, polish passes, and stakeholder feedback workflows.
- AI-native design systemsTokens and components agents can actually reuse.
- Build a design system workflowMulti-step audit-to-rollout, not a single paste.