Skip to main content
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. Instead of: “Make a button.” 
Create a primary CTA button with rounded corners, blue background (#2563eb), white text, hover state that darkens to #1d4ed8, and includes a subtle shadow. It should be 44px tall for good touch targets.
Instead of: “Fix the layout.” 
The product cards are breaking on mobile screens below 640px. I need them to stack vertically with 16px spacing between cards, and each card should maintain its 4px border radius.
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. 
I'm building a product showcase for an e-commerce site. Users should be able to quickly scan products, see key details (price, rating, availability), and easily add items to cart. The design needs to work on both desktop grid layouts and mobile single-column views.
Specify what your goal is.
There are differences between these prompts: Direct request, AI decides the approach 👇 
Write a post ...
More collaborative tone, AI might ask clarifying questions 👇 
Help me write a ...
Acts as a reviewer, suggests improvements to existing work 👇 
Challenge my thinking and ...
But more importantly, be explicit about the format you want: 
"Give me just the code with minimal comments."
"Walk me through each step with explanations." 
"Show me three different approaches and their trade-offs."
"Generate the component plus usage examples and documentation."
Give context.
Share your brand colors, spacing rules, or design system basics, but don’t micromanage every detail. 
This is for a SaaS dashboard. Users are power users who value information density over visual flair. Prioritize clarity and quick scanning over decorative elements.
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. 
Suggest 5 different names for a component that displays user avatars in a group, with overflow indicators when there are too many.

Write documentation for this button component. Include usage examples, prop descriptions, and when to use each variant.
Automate the boring stuff.
Notice what design tasks you do over and over—like converting Figma designs to CSS, creating responsive breakpoints, or updating design tokens. These are perfect candidates for AI automation. Create template prompts for repetitive tasks: 
Convert this Figma design to Tailwind CSS. Use responsive breakpoints at 640px, 768px, and 1024px. Extract any repeated patterns into utility classes.
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, it will use the same design principles, rules, etc. You also need to write what you don’t want your tool to do. Example: 
## Colors
- Primary: #2563eb (use for main actions)
- Never use pure black (#000) - use #1f2937 instead
- All interactive elements need hover states

## Components  
- Always use CardLink component for any clickable cards
- Buttons should be minimum 44px tall for accessibility
- Form inputs need focus rings and error states

## Don'ts
- Never use Comic Sans or decorative fonts 🤣
- Don't use red for anything except errors
- Avoid animations longer than 300ms

## Preferences
- Use Tailwind CSS, avoid custom CSS when possible
- Prefer functional components over class components
- Always include TypeScript types
It is also very helpful if you write a doc with steps. Example structure: 
ROLE

You are (define role)

OBJECTIVE

Help me with ...

CONTEXT

Audience: (define your audience)

Voice and tone: (be very specific)

Key facts, excerpts, data, or links the answer must use:

Known constraints or boundaries:

WORKFLOW

Define your workflow. For example:

1. List any information still missing; ask me concise questions until gaps are filled.
2. Outline a logical structure or bullet agenda for the piece. Wait for my approval.
3. Write the first version following the approved plan.
4. Review and ask me for feedback on clarity, tone, and completeness.
5. Revise and improve the draft with my notes.
6. Repeat steps 3‑5 until I confirm the plan.

CONTEXT‑HANDLING RULES

• If I do this X, then first do Y.

• If you need more input, list the questions in the Gap check.

OUTPUT FORMAT

Return all content in _specify the format_

When referencing someone, add the number to the Context Package.

FIRST ACTION

Start with Workflow “step  1: Gap check.”
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. For example:
  1. Single components: Button, Input, Card
  2. Composite components: SearchBar (Input + Button), ProductCard (Image + Text + Button)
  3. Layout sections: Header with navigation, Product grid with filters
  4. Full pages: Homepage combining Header + Hero + ProductGrid + Footer
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. When things don’t work out.
AI tools sometimes get stuck in a loop or misinterpret requirements. Here’s how to get back on track: 
Stop. Let's go back to the original requirement. I need [specific thing]. What information do you need from me to build this correctly?

This isn't working. Can you analyze what went wrong, review and suggest a different approach?

Forget the previous approach. Here's a working example of something similar [paste example]. Adapt this pattern to solve my original problem.
If you are working with **Cursor **or any other IDE, it also helps to start a new chat, define the context (choose a directory/file), and then ask again. Another “trick” is to change the model that you are working with. Some models are excellent for writing documentation, while others are best for coding. Also, ask yourself if you provided enough context. 😊 Build a library of helpful prompts.
When you find prompts that work well, save them. You’ll use them again, and they’ll save you time. That’s it, let’s go to work. 🥰