Master the art of AI prompting in Onlook. Learn techniques, patterns, and best practices to build production-ready applications faster with AI assistance.
Great prompts lead to great code. The difference between "add a form" and a detailed, specific request can be the difference between working code and hours of debugging.
Be as specific with the AI as you would be with a junior developer on your team.
If you wouldn't say "make it look good" to a teammate, don't say it to the AI. Instead, describe exactly what you want, which tools to use, and what the success criteria are.
Example prompts when creating new elements:
Example to edit an existing element:
Every great prompt should include:
What - The feature or change you want
How - Technologies, libraries, and approaches
Details - Specifics about behavior and styling
Quality - Error handling, edge cases, accessibility
Prompt Template:
"Using [technologies], create/modify [feature] with [specific requirements]. Include [quality requirements]."
Example with an existing, selected element:
"Make this card clickable and add hover effects: scale slightly, add shadow, and transition smoothly"
Example for a new component:
"Create a responsive card grid that shows 3 columns on desktop, 2 on tablet, 1 on mobile. Each card should have an image, title, description, and call-to-action button. Add hover effects."
Specificity is the single most important factor in getting quality AI output. The more precise you are, the better your results.
Large requests lead to errors, confusion, and hard-to-debug code. Break complex features into small, manageable steps.
Problems with large requests:
Harder to review changes
More likely to have errors
Difficult to pinpoint what went wrong
Can't easily iterate on one part
May exceed AI context limits
Benefits of smaller requests:
Each step builds on working code
Easy to catch issues early
Can adjust direction mid-way
Better code output quality
Easier to understand changes
Upload screenshots, designs, or mockups to get pixel-perfect implementations.
The most powerful use of images: recreating designs.
How to Use Images in prompting:
Select the element or page you want the AI to build in
Upload your Figma screenshot, design file, or reference
Describe what you want the AI to focus on
Mention specific libraries or components to use
Example prompts:
Using a Figma screenshot
"Recreate this hero section using shadcn components. Match the gradient background, typography hierarchy, and button styles exactly. Use Geist Sans font family."
Using competitor screenshots
"Build a similar pricing table but adapted for our three-tier model: Free, Pro, Enterprise. Use shadcn/ui Card components and maintain the same visual hierarchy."
Using hand-drawn wireframes
"Convert this wireframe into a working dashboard page. Use the existing project styling with shadcn/ui. Add realistic placeholder data for the charts and tables."
As your conversation grows, AI performance can degrade. Understanding how to monitor and manage context keeps your outputs high-quality.
AI models have token limits. As conversations fill up:
Attention dilution - harder to focus on what matters with more information
Lost in the middle - information in the middle of long contexts gets overlooked
Remembers beginning and end best - recent messages and original instructions are prioritized
Increased errors - more likely to miss details or forget requirements
Onlook shows a token counter that tracks context usage. Watch this as you work.
Safe zones:
Under 150k tokens: AI performs well
150k+ tokens: Quality begins to degrade
Above 250k tokens: Expect confusion and errors
Never assume the AI remembers earlier context. Re-state key information in every prompt:
If your token count approaches 150k:
Ask the AI for a summary:
"Summarize what we've built so far and the key technical decisions"
Start a new chat with the summary:
"Summary from previous session:
- Built authentication using NextAuth.js
- Dashboard with sidebar layout
- User CRUD operations complete
Now I need to add export functionality..."
Other reasons to start fresh:
Switching to completely unrelated feature
AI repeatedly forgets key details
You notice quality degrading
Select elements first - In Onlook, selecting elements before prompting reduces context needs
Use Mini AI Chat - Right-click elements for quick edits without filling up main chat
Be specific every time - Mention libraries and exact requirements in each prompt
Break down large requests - Smaller, focused prompts use less context and get better results
The token counter is your friend. When it climbs toward 150k, wrap up that chat and start fresh.