1. Create a Project
Whether you already have a design plan, a rough idea, or are still in the exploratory phase, Step1.dev helps you launch a project effortlessly. You can start in any of the following ways:Start from Scratch
Start from Scratch
Step1.dev allows you to build apps easily using natural language:
- Simply describe your idea in the input box.
- We recommend starting with a clear and detailed prompt—the more specific, the better the results. You can always optimize and adjust your project later.
Example:
“Create a dashboard with user login functionality, a line chart for monthly sales, and a pie chart showing customer demographics.”
Clone an Existing Site or Design
Clone an Existing Site or Design
If you already have a website or design you’d like to replicate:
- Paste the URL into the input box, and Step1.dev will automatically generate a cloned version.
- You can also upload a screenshot or design mockup—Step1.dev will analyze it and build your project based on it.
2. Optimize Your Project
Step1.dev is highly flexible. You can edit specific elements or add new features—all through simple natural language interaction.Add or Update Features
Add or Update Features
Just describe what you’d like to add. For example, “Polish the UI” or “Add a search bar in the top-right corner,” and Step1.dev will take care of it.
The clearer and more specific your prompt, the better the output.Example: “Polish the UI with a clean, modern, and intuitive look—similar to Notion.”
Add Image Assets
Add Image Assets
Upload your assets directly in the chat and describe how you want to use them. Step1.dev will automatically integrate them into your project.
Example:
“Add this image as the homepage background.”
Version Rollback
Version Rollback
If you’re not satisfied with the current implementation, click the button at the top-right of the chat or the
Restore code button below the relevant message to roll back to a previous version and regenerate code.Ask Mode
Ask Mode
Not sure how to implement a feature? Use Ask Mode to get suggestions and insights.
- Click the
Askbutton in the bottom-right corner of the chat to enter Ask Mode. - In Ask Mode, no changes will be made to your current project.
Example:
“How can I enable drag-and-drop in a calendar?“
3. Deploy and Publish
Deployment
Deployment
After each code update, Step1.dev automatically deploys your project and generates a public URL.You can share this link with others by clicking the button in the top-right corner.