> ## Documentation Index
> Fetch the complete documentation index at: https://docs.step1.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Prompt 指南

> 学会和 AI 对话，构建你想要的任何网站

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

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

### 指令清晰、详尽、具体

* 使用具体的指令：明确指出页面、位置（如 /dashboard、界面的某个位置）和需要实现的功能。

```
在 Dashboard 页面的第一行，增加一个折线图，展示过去 30 天的销售额。
```

* 使用日常语言描述需求：

```
我希望日历可以通过拖拽的方式来调整日程的时间。
```

* 告诉 AI 不要做什么：

```
不要修改页面整体布局，只修改搜索框组件的样式。
```

### 提供上下文

> AI 不擅长"猜"，所以需要提供上下文描述，尽量描述清楚你的需求。

* **提供截图：**

  * 界面设计截图：提供参考网站或组件设计的截图，AI 一键复刻、模仿、还原。

  ```
  帮我实现一个 Landing page，风格参考这个图片中的网站设计
  帮我实现一个表单组件，整体设计参考这个图片
  ```

  * 设计稿截图：提供 Figma/白板设计稿截图，准确还原设计稿。

  ```
  帮我实现一个 Dashboard 页面，页面布局参考图片中的设计稿
  ```

  * 错误信息截图：提供错误信息截图或者错误的 UI 截图，让 AI 了解问题所在。

  ```
  我点击了提交按钮，界面变成了图片中的样子，请修复这个问题。
  ```
* 提供核心信息：你需要告诉 AI 具体的产品需求。

```
请你帮我实现一个合成大西瓜的游戏，游戏的核心玩法：<核心玩法描述>
```

* 在不同的提示中重复关键信息，AI 的短期记忆有限。

### 拆分任务

如果你希望大幅改动现有功能或设计，不要一次性提交所有任务。更佳策略是像开发流程一样逐步推进：

<Warning>
  不推荐：

  "重构整个页面设计，并且增加数据分析组件"
</Warning>

<Check>
  推荐：

  1. "重构整个页面布局，参考图片中的设计稿"
  2. "调整页面的风格配色，参考 Apple 的设计风格"
  3. "增加数据分析页面，路由为 /dashboard"
  4. "在 /dashboard 页面中增加一个图片展示用户注册数据"
  5. "在 /dashboard 页面中增加一个折线图，展示过去 30 天的销售额"
</Check>

***

## 克隆最佳实践

### 克隆后替换品牌内容

克隆完成后，第一步通常是将参考网站的品牌内容替换为自己的。建议一次性在一条指令中完成：

```
请将以下内容替换为我们的品牌信息：
1. 导航栏 Logo 替换为上传的图片
2. 所有 "Raycast" 文字改为 "我们的产品名"
3. 主色调从紫色改为 #0066FF
4. Hero 区域的标语改为："更快地构建你的产品"
```

### 避免克隆过多内容

克隆整站后如果页面较复杂，建议先只保留核心区域，再逐步添加其他部分：

<Warning>
  不推荐：克隆完整站后立刻要求修改所有页面

  "克隆完成后，帮我修改所有页面的内容"
</Warning>

<Check>
  推荐：从首页开始，逐页迭代

  1. "先只保留首页，删除其他页面"
  2. "修改首页的 Hero 区域内容"
  3. "完成后，再添加定价页面"
</Check>

### 保留响应式布局

克隆后如果需要调整布局，务必提醒 AI 保持响应式：

```
调整卡片区域的布局，改为三列网格，但保持移动端的单列布局不变。
```

***

## Magic Fusion 使用技巧

### 精准描述融合位置

融合指令中需要明确说明元素要放在哪里：

<Warning>
  模糊：

  "把这个按钮加进去"
</Warning>

<Check>
  精准：

  "把这个下载按钮组添加到首页 Hero 区域的标题下方，与标题左对齐"
</Check>

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

AI 会自动适配你的设计语言，但如果有特定要求，需要明确说明：

```
融合这个渐变背景效果到我们的 CTA 区域，但把颜色从蓝紫渐变改为我们品牌的橙红渐变（#FF6B35 → #F7C59F）
```

### 分步骤融合复杂设计

如果要融合多个元素，建议分步进行：

<Check>
  推荐：

  1. "先融合这个动画卡片组件到功能介绍区"
  2. "效果确认后，再融合这个渐变背景到 Hero 区域"
  3. "最后融合这个导航栏样式"
</Check>

### 一键换肤的指令写法

使用一键换肤时，描述越具体越好：

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

***

## Debug Tips

### Auto Fix

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

### 提供截图

对于 UI 有关的问题，提供截图是非常有效的，可以快速让 AI 理解问题所在。

```
参考页面截图，现在首页上标题和 Hero 会有重叠，请修复这个问题。
```

### 代码回滚

当 AI 无法修复问题时，可以尝试回滚到一个你认为正确的版本，再重新开始。

适用场景：

* 陷入 Bug 循环
* AI 改崩了整体项目

***

## 最后

**保持耐心，沉着应对**

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