AI Prompting - Working with AI Effectively

Master the art of AI prompting in Onlook. Learn techniques, patterns, and best practices to build production-ready applications faster with AI assistance.

Prompt Engineering Basics

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.

The Core Principle

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:

Bad Prompt

“Add a Form”

Good Prompt

Create a contact form using our form component. Include fields for name (required), email (required, validated), and message (required, min 10 chars). Use shadcn/ui Input and Button components. Add loading state to submit button.

Why it's better:
- Names libraries to use (existing components + shadcn/ui)
- Lists fields with validation rules
- Describes UI behavior (loading state)

Example to edit an existing element:

Bad Prompt

“Make this faster”

Good Prompt (with element selected)

“Optimize this UserList component. Implement a scrolling system that can handle 10,000+ rows.”

Why it's better:
- Element is already selected (AI knows the context)
- Describes the performance problem (large dataset)
- Suggests specific solution (scrolling)

The 4 Elements of Effective Prompts

Every great prompt should include:

1. What - The feature or change you want

2. How - Technologies, libraries, and approaches

3. Details - Specifics about behavior and styling

4. 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."

Being Specific

Specificity is the single most important factor in getting quality AI output. The more precise you are, the better your results.

Onlook's Visual-First Workflow

In Onlook, you select elements on the canvas first, then prompt the AI. This means the AI already knows WHAT and WHERE - you just need to specify HOW and select exactly you want changed.

Traditional AI coding: "Change the button in components/navbar.tsx to blue"

Onlook workflow: [Select button] "Make this use my primary brand color with a hover effect"

Breaking Down Requests

Large requests lead to errors, confusion, and hard-to-debug code. Break complex features into small, manageable steps.

Using Images

Upload screenshots, designs, or mockups to get pixel-perfect implementations.

The most powerful use of images: recreating designs.

How to Use Images in prompting:

1. Select the element or page you want the AI to build in

2. Upload your Figma screenshot, design file, or reference

3. Describe what you want the AI to focus on

4. 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."

Context Management

As your conversation grows, AI performance can degrade. Understanding how to monitor and manage context keeps your outputs high-quality.

How Context Works

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

Monitoring Your Context

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

Staying Specific

Never assume the AI remembers earlier context. Re-state key information in every prompt:

Assumes Memory

- Message 1: "Let's use shadcn/ui for components"
- [Many messages later]
- Message 15: "Add a button"

Re-states Context

- Message 15: "Using shadcn/ui Button component, add a primary action button with hover effects"

Always include:
- Specific libraries/frameworks to use
- Select the element you are wanting to edit/add to whenever possible
- Exact requirements (don't rely on "what we did earlier")

When to Start Fresh

If your token count approaches 150k:

1. Ask the AI for a summary:
   "Summarize what we've built so far and the key technical decisions"

2. 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

Quick Wins

• 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.