跳转到主要内容
使用 Step1.dev 的过程十分简单。您只需与 Step1.dev 对话——描述您的需求,分享参考样式,或征询建议。

1. 创建一个项目

无论您是已有设计方案,还是只有一个初步构想,甚至是仍在探索阶段, Step1.dev 都能帮助您轻松启动项目。您可以选择以下任一方式开始:
Step1.dev 可以通过自然语言,轻松搭建应用:
  • 您只需在提示词输入框中描述您的构想即可。
  • 我们建议您从清晰、详尽的提示词入手,提示词越具体,生成的结果便越理想,在项目初步生成后,您随时可以对其进行优化和调整。
案例: “创建一个仪表盘,其中包含用户登录功能,并用折线图呈现月度销售额、用饼状图展示客户的人口统计数据。”
如果您已有想要复刻的现有网站/设计:
  • 将一个 URL 粘贴至输入框, Step1.dev 便会自动访问网站并生成一份克隆版。
  • 您也可以上传截图或设计模型图, Step1.dev 会对其进行分析,并以此为基础构建项目。

2. 优化您的项目

Step1.dev 提供了高度的灵活性,您既可以编辑特定元素,也可以根据需要添加新功能。一切只需要通过自然语言交互即可完成。
只需描述您想新增的功能,比如“帮我美化UI”、“在右上角增加一个搜索框”,Step1.dev 便会自动帮你实现。
你的指令越清晰具体,Step1.dev 生成的结果越理想。案例:“帮我美化UI,要求整体风格简洁、现代、交互合理,风格接近Notion”
直接在对话框中上传你的素材,并描述你想如何使用它。Step1.dev 会自动将图片添加到项目中。
案例: “帮我添加这个图片,作为首页的背景图”
如果对当前版本的实现不满意,您可以点击对话框右上角的 按钮或对应对话下方的 Restore code 按钮,选择一个历史版本进行回滚,重新开始生成代码。
当你不知道该如何实现你的需求时,您可以选择使用 Ask mode 来获取优化建议。
  • 点击对话框右下角的Ask按钮打开Ask mode。
  • 在Ask mode中,不会对当前项目进行任何修改。
案例: “如何实现日历拖拽的功能?“

3. 部署和发布

在每次代码更新后,我们都会自动部署您的项目,并生成一个外部可访问的 URL。 您可以通过点击右上角的 按钮,将 URL 分享给其他人。

4. 进阶阅读