Skip to main content

​
How to Chat with AI to Build Your Site

The clearer your description, the better the result.

​
Be Clear, Detailed, and Specific

  • Use concrete instructions: Specify the exact page, location (like /dashboard or a particular UI section), and functionality you want.
  • Describe your needs in natural, conversational language:
  • Tell the AI what not to do:

​
Provide Context

AI isn’t great at guessing, so it helps to describe your needs with as much context as possible.
  • Share Screenshots:
    • UI design references: Screenshots of reference websites or component designs help the AI replicate or adapt them.
    • Design mockups: Screenshots of Figma/whiteboard mockups help the AI accurately reconstruct your intended design.
    • Error messages: Share screenshots of error messages or broken UI so the AI can pinpoint issues.
  • Share key product info: Clearly explain your product’s core requirement.
  • Repeat key info across prompts. AI has limited short-term memory.

​
Break Tasks Down

If you’re making major changes to an existing feature or layout, don’t submit everything at once. Think like a developer—break it into manageable steps.
Not Recommended:“Redesign the entire page and add a data analytics component.”
Recommended:
  1. “Redesign the entire page layout based on the mockup in the image.”
  2. “Adjust the page color scheme to match Apple’s design style.”
  3. “Add a new data analytics page under the /dashboard route.”
  4. “On the /dashboard page, add an image showing user registration data.”
  5. “On the /dashboard page, add a line chart showing sales from the past 30 days.”

​
Clone Best Practices

​
Replace Brand Content After Cloning

After cloning, the first step is usually replacing the reference site’s brand content with your own. Do it all in one clear instruction:

​
Avoid Trying to Change Everything at Once

After cloning a complex site, start with the core sections and add more incrementally:
Not Recommended: Asking to modify all pages immediately after cloning“Once cloned, update all pages with our content.”
Recommended: Start with the homepage and iterate page by page
  1. “Keep only the homepage for now, remove all other pages.”
  2. “Update the Hero section content on the homepage.”
  3. “Once that’s done, add the pricing page.”

​
Preserve Responsive Layout

When adjusting layouts after a clone, always remind the AI to maintain responsiveness:

​
Magic Fusion Tips

​
Be Specific About Where to Place the Fused Element

Your fusion instruction should clearly state where the extracted element should go:
Vague:“Add this button somewhere.”
Precise:“Add this download button group below the headline in the Hero section of the homepage, left-aligned with the headline.”

​
Specify Color and Style Adaptation Requirements

The AI auto-adapts to your design language, but call out specific requirements explicitly:

​
Fuse Complex Designs in Steps

When fusing multiple elements, do it incrementally:
Recommended:
  1. “First, fuse the animated card component into the features section.”
  2. “Once confirmed, fuse the gradient background into the Hero area.”
  3. “Finally, fuse the navbar style.”

​
Writing One-Click Style Switch Instructions

The more specific, the better for style switches:

​
Debug Tips

​
Auto Fix

For compile-time and runtime errors, Step1.dev automatically captures and attempts to fix them.

​
Use Screenshots

When debugging UI-related issues, screenshots help the AI quickly understand what’s wrong.

​
Roll Back Code

If the AI can’t resolve an issue, roll back to a known working version and restart from there. Best for:
  • Getting stuck in a bug loop
  • AI severely breaking the project

​
Final Note

Stay patient and composed You’re not alone in hitting roadblocks. AI can be brilliant or frustrating—sometimes both. The last 5% of any project is often the hardest, but also the most critical.