跳转到主要内容

​
如何和 AI 对话来构建网站

描述得越清晰，AI 给出的结果越理想。

​
指令清晰、详尽、具体

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

​
提供上下文

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

​
拆分任务

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

​
克隆最佳实践

​
克隆后替换品牌内容

克隆完成后，第一步通常是将参考网站的品牌内容替换为自己的。建议一次性在一条指令中完成： 
请将以下内容替换为我们的品牌信息：
1. 导航栏 Logo 替换为上传的图片
2. 所有 "Raycast" 文字改为 "我们的产品名"
3. 主色调从紫色改为 #0066FF
4. Hero 区域的标语改为："更快地构建你的产品"

​
避免克隆过多内容

克隆整站后如果页面较复杂，建议先只保留核心区域，再逐步添加其他部分：
不推荐：克隆完整站后立刻要求修改所有页面“克隆完成后，帮我修改所有页面的内容”
推荐：从首页开始，逐页迭代
  1. “先只保留首页，删除其他页面”
  2. “修改首页的 Hero 区域内容”
  3. “完成后，再添加定价页面”

​
保留响应式布局

克隆后如果需要调整布局，务必提醒 AI 保持响应式： 
调整卡片区域的布局，改为三列网格，但保持移动端的单列布局不变。

​
Magic Fusion 使用技巧

​
精准描述融合位置

融合指令中需要明确说明元素要放在哪里：
模糊：“把这个按钮加进去”
精准：“把这个下载按钮组添加到首页 Hero 区域的标题下方，与标题左对齐”

​
明确颜色和风格适配要求

AI 会自动适配你的设计语言，但如果有特定要求，需要明确说明： 
融合这个渐变背景效果到我们的 CTA 区域，但把颜色从蓝紫渐变改为我们品牌的橙红渐变（#FF6B35 → #F7C59F）

​
分步骤融合复杂设计

如果要融合多个元素，建议分步进行：
推荐：
  1. “先融合这个动画卡片组件到功能介绍区”
  2. “效果确认后，再融合这个渐变背景到 Hero 区域”
  3. “最后融合这个导航栏样式”

​
一键换肤的指令写法

使用一键换肤时，描述越具体越好： 
参考刚才选中的 Linear 页面风格，将整个项目做如下切换：
- 背景色改为深色（#0A0A0A）
- 文字改为白色和浅灰
- 卡片改为半透明毛玻璃效果
- 动画改为流畅的 ease-out 过渡

​
Debug Tips

​
Auto Fix

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

​
提供截图

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

​
代码回滚

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

​
最后

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