​
Prompt Best Practices

Clear, detailed prompts make the best results.

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

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