The designer's guide to prompts and models
Best practices and examples
👋 Get weekly insights, tools, and templates to help you build and scale design systems. More: Design Tokens Mastery Course / YouTube / My Linkedin
Most people write terrible prompts. Even designers ask for "a beautiful button" and wonder why AI gives them garbage. Or they describe every pixel instead of explaining what they need. This library will change how you think and work 👇
I created aidesign.guide to have a place for all the tools, helpful prompts and articles.
Buuuut, there is another VERY important thing. Picking the model! Before picking a model/tool ask yourself:
What kind of work am I delegating? Is it text processing, code generation, data extraction, summarizing, or evaluation?
Text processing/strategy: Claude Sonnet/Opus
Code generation: Claude Code, Cursor with Claude, Cline, Replit
Full app building: Lovable (React apps), Replit (any language)
Data extraction/analysis: GPT-4o, Gemini (large context)
Summarizing: Any model works, Gemini for cost
Evaluation/critique: Claude Opus
How independent does it need to be? Do you want it to run autonomously, or in tight feedback loops with you?
Fully autonomous coding: Replit, Lovable
Semi-autonomous with oversight: Cline, Claude Code
Tight feedback loops: ChatGPT with memory, Claude web
Prototype to production: Replit, Lovable
How important is taste, judgment, or quality? If subjective quality matters, you'll want models like Claude Opus 4, which can internally critique and refine work.
High-stakes creative work: Claude Opus 4
Standard quality needs: Claude Sonnet, GPT-4o, Gemini Pro
Quick prototypes: Lovable, Replit, Claude
Code quality matters: Claude Code, Cline
What data or context does the model need to access? Local files? A folder of meeting notes? API docs? This determines whether you need a command-line model like Claude Code, or a cloud-based model with memory.
Local files/folders: Cline, Claude Code, Cursor, WIndsurf, Kiro
Web-based docs: Claude web, ChatGPT, Gemini
Massive context (1M tokens): Gemini Pro
Deploy: Replit, Lovable
API integration: All support this
Do I want a model with memory? For personal productivity or coaching GPT-4 (o3) learns your style and patterns over time.
Personal assistant/coaching: ChatGPT with memory
Project context: Gemini (huge context), Replit (project memory)
Design system work: Cline (remembers codebase)
Complexity?
If cost matters, Gemini is cheaper and has a bigger context window. If you want the latest and most powerful model, then choosing Claude Opus is the best option. So, in short:
Budget-conscious: Gemini Flash, Copilot, Replit (free tier), Kiro (new tool from Amazon)
Balanced cost/performance: Claude Sonnet, Cline
Premium quality: Claude Opus 4
Massive context needs: Gemini Pro
Reality check:
Stop using a Ferrari for grocery runs.
If you are tinkering around and playing with “what works best”, you will enjoy both Lovable and Replit (both have the option to upload Figma files).
However, if you want to connect Figma, your code, deploy to Vercel (or wherever), add animations, and have complete freedom, then use Cursor, Claude Code, Gemini CLI, Cline, or Windsurf.
Best practices for prompting
Be clear about what you want.
No-code AI tools (Cursor, Claude Code, Replit, Lovable, etc.) work best when you tell them exactly what you’re trying to build. Think of your prompt as a brief for a teammate. The clearer you are, the better results you’ll get. And by clear, I mean be very, very specific.
Start with the design problem.
Before asking for code, explain what user experience you’re creating. Are you building a mobile menu? A product card? A signup flow? When the AI understands your design goals, it can write much better code.
Give context.
Share your brand colors, spacing rules, or design system basics, but don’t micromanage every detail.
Use AI for more than just coding.
These tools can help you brainstorm component and design tokens names, suggest better CSS organization, check if your design is accessible, or even help you write documentation for your design system.
Memories, guidance. Whatever you want your AI tool to remember, save it in a folder and put it inside the repository. This way, you will centralize knowledge. So whenever AI tools start building, they will use the same design principles, rules, etc. You also need to write what you don’t want your tool to do.
Start simple.
Start with individual components, then combine them into larger sections, then full pages. This prevents overwhelming the AI and helps you catch issues early.
Make it work for you.
Some designers like detailed comments in their code, others prefer it clean and minimal. Some want step-by-step explanations; others short answers. Train the AI to match your style and preferences.
The key is learning to communicate your design intent clearly to AI models, treating them as highly capable but literal-minded team members who need clear direction.
Discover more, including exact prompts, guides, ideas, and tools, on this website. aidesign.guide
Enjoy exploring. ✌️
— If you enjoyed this post, please tap the Like button below 💛 Thank you.
💎 Community Gems
Summer AI inspiration links for designers
🔗 Link
Create a Supabase backend using Figma Make
🔗 Link
2025 recordings are available online 🔥
🔗 Link