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.
Add a line chart to the first row of the Dashboard page to display sales from the past 30 days.
  • Describe your needs in natural, conversational language:
I want to be able to drag and drop events on the calendar to adjust their time.
  • Tell the AI what not to do:
Don't change the overall page layout—just update the style of the search bar component.

​
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.
    Create a landing page based on the website design in this image.
Build a form component with styling similar to the one in this screenshot.
    • Design mockups: Screenshots of Figma/whiteboard mockups help the AI accurately reconstruct your intended design.
    Build a Dashboard page with layout matching the design in this image.
    • Error messages: Share screenshots of error messages or broken UI so the AI can pinpoint issues.
    After clicking the submit button, the page turned into what you see in this screenshot. Please fix the issue.
  • Share key product info: Clearly explain your product’s core requirement. 
Help me build a "Merge the Fruit" game. Core gameplay: <describe gameplay>
  • 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: 
Please replace the following with our brand content:
1. Swap the navbar logo with the uploaded image
2. Change all "Raycast" text to "Our Product Name"
3. Change the primary color from purple to #0066FF
4. Update the Hero headline to: "Build your product faster"

​
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: 
Change the card section to a three-column grid layout, but keep the single-column mobile layout unchanged.

​
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 this gradient background effect into our CTA section, but change the colors from blue-purple gradient to our brand orange-red gradient (#FF6B35 → #F7C59F).

​
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: 
Based on the Linear page style I just selected, switch the entire project as follows:
- Background to dark (#0A0A0A)
- Text to white and light gray
- Cards to semi-transparent frosted glass
- Animations to smooth ease-out transitions

​
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. 
Refer to this screenshot: the homepage title overlaps with the hero section. Please fix this.

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