​
Prompt 最佳实践

清晰、详尽的提示词，能产出更优异的结果。

​
指令清晰、详尽、具体

  • 使用具体的指令: 明确指出页面、位置 (如 /dashboard、界面的某个位置) 和需要实现的功能。
在Dashboard页面的第一行，增加一个折线图，展示过去30天的销售额。
  • 使用日常语言描述需求：
我希望日历可以通过拖拽的方式来调整日程的时间。
  • 告诉 AI 不要做什么：
不要修改页面整体布局，只修改搜索框组件的样式。

​
提供上下文

AI 不擅长“猜”，所以需要提供上下文描述尽量描述清楚你的需求。
  • 提供截图：
    • 界面设计截图：提供参考网站\组件设计的截图，AI 一键复刻、模仿、还原。
    帮我实现一个Landing page，风格参考这个图片中的网站设计
帮我实现一个表单组件，整体设计参考这个图片
    • 设计稿截图：提供Figma/白板设计稿截图，准确还原设计稿。
    帮我实现一个Dashboard页面，页面布局参考图片中的设计稿
    • 错误信息截图：提供错误信息截图或者错误的UI截图，让 AI 了解问题所在。
    我点击了提交按钮，界面变成了图片中的样子，请修复这个问题。
  • 提供核心信息：你需要告诉 AI 具体的产品需求。 
请你帮我实现一个合成大西瓜的游戏，游戏的核心玩法：<核心玩法描述>
  • 在不同的提示中重复关键信息，AI 的短期记忆有限。

​
拆分任务

如果你希望大幅改动现有功能或设计，不要一次性提交所有任务。更佳策略是像开发流程一样，提供
不推荐：“重构整个页面设计，并且增加数据分析组件”
推荐：
  1. “重构整个页面布局，参考图片中的设计稿”
  2. “调整页面的风格配色，参考 Apple 的设计风格”
  3. “增加数据分析页面，路由为 /dashboard”
  4. “在 /dashboard 页面中增加一个图片展示用户注册数据”
  5. “在 /dashboard 页面中增加一个折线图，展示过去30天的销售额”

​
Debug tips

​
Auto fix

对于编译、运行等报错，Step1.dev 会自动抓取错误信息，并进行修复。

​
提供截图

对于 UI 有关的问题，提供截图是非常有效的，可以快速让 AI 理解问题所在。 
参考页面截图，现在首页上标题和hero 会有重叠，请修复这个问题。

​
代码回滚

当 AI 无法修复问题时，可以尝试回滚到一个你认为正确的版本，再重新开始。 适用场景：
  • 陷入 Bug 循环
  • AI 改崩了整体项目

​
最后

保持耐心，沉着应对 您不是唯一遇到困难的人。AI 的表现时而惊艳，时而令人受挫。任何项目构建的最后 5% 往往进展最慢，却也至关重要。