Vibe Vibe

主题

4.2.1 用第三章框架写第一个 Prompt ​

本步目标：把 4.1 节的"项目启动卡"转化为 AI 能理解的 Prompt

从项目启动卡到 Prompt ​

在 4.1 节，我们整理了小李项目的「项目启动卡」。现在要把它转化为 Prompt，让 AI 帮我们生成代码。

项目启动卡                         Prompt
┌──────────────┐                ┌──────────────┐
│ 项目名称      │                │ Situation    │
│ 目标用户      │  ──转化──→     │ Challenge    │
│ 核心功能      │                │ Audience     │
│ 明确不做      │                │ Format       │
│ 技术约束      │                │ Foundations  │
└──────────────┘                └──────────────┘

转化的逻辑：

项目启动卡内容对应 Prompt 位置作用
项目名称 + 目标用户Situation（情境）告诉 AI 你在做什么
核心功能列表Challenge（挑战）告诉 AI 当前要做什么
你是谁Audience（受众）让 AI 调整代码复杂度
期望输出格式Format（格式）让 AI 知道给你什么
明确不做 + 技术约束Foundations（基础）告诉 AI 边界在哪

三种 Prompt 版本 ​

根据你的时间和需求，可以选择不同详细程度的 Prompt。

版本一：最简版（赶时间用） ​

如果你已经熟悉了这个流程，或者只是想快速看到效果：

帮我做一个待办清单网页的静态页面。
包含：标题、输入框、添加按钮、任务列表（带完成和删除按钮）。
风格简约现代，要能在手机上正常显示。
先不需要功能，只要页面样式。用 HTML + CSS，不用任何框架。

这个版本大约 70 字，能覆盖最核心的信息。

版本二：标准版（推荐日常使用） ​

使用第三章的 S.C.F. 精简框架：

【背景】
我正在做一个个人待办清单网页，帮助管理日常任务。
我是编程零基础的初学者。

【任务】
请生成待办清单的静态页面，包含以下元素：
- 页面标题："我的待办清单"
- 一个输入框，用于输入新任务
- 一个"添加"按钮
- 任务列表区域，先用 3 条假数据展示样式
- 每个任务有"完成"按钮和"删除"按钮

【约束】
- 只需要静态页面，暂时不需要任何功能
- 使用纯 HTML + CSS，不使用任何框架
- 现代简约风格，清新配色
- 响应式设计，手机上也能正常显示
- 代码加上必要的中文注释

版本三：完整版（第一次使用建议） ​

使用 S.C.A.F.F. 全要素框架，给 AI 最充分的上下文：

【Situation - 情境】
我是一个编程零基础的初学者，正在学习用 AI 做一个个人待办清单网页。
这是我的第一个 AI 编程项目。
目标用户是像我一样容易忘事的职场新人，需要一个简单的任务管理工具。

【Challenge - 挑战】
请帮我生成待办清单的静态页面，包含以下元素：
1. 页面标题："我的待办清单"
2. 输入区域：
   - 一个输入框（用于输入新任务）
   - 一个"添加"按钮
3. 任务列表区域：
   - 先用 3 条假数据展示样式（如："完成项目报告"、"买牛奶"、"给妈妈打电话"）
   - 每个任务显示任务内容
   - 每个任务右侧有"完成"按钮和"删除"按钮

【Audience - 受众】
- 代码将由我这个初学者阅读和修改
- 请保持代码简单易懂
- 在关键位置添加中文注释，帮助我理解代码结构

【Format - 格式】
请生成一个完整的 HTML 文件，包含：
- HTML 结构
- 内嵌的 CSS 样式（写在 <style> 标签里）
- 文件可以直接在浏览器中打开查看效果

【Foundations - 基础约束】
- 只做静态页面，暂时不需要 JavaScript 功能
- 不使用任何外部框架或库（如 Bootstrap、Tailwind）
- 设计风格：现代简约，参考苹果或 Notion 的设计语言
- 配色清新，主色调可以用蓝色或绿色系
- 响应式设计：在手机（宽度 375px）和电脑上都能正常显示
- 页面整体居中显示，最大宽度 500px

为什么要告诉 AI 你是初学者？ ​

你可能注意到，每个版本都提到了"我是初学者"。这不是谦虚，而是一个重要的策略：

不说"初学者"说了"初学者"
AI 可能使用高级语法和技巧AI 会使用基础、直观的写法
代码可能没有注释AI 会主动添加解释性注释
变量名可能很简短AI 会使用更具描述性的命名
遇到问题你可能看不懂代码更容易阅读和调试

这个小技巧能让 AI 生成的代码更适合你当前的水平。

描述方式对比：模糊 vs 具体 ​

写 Prompt 时，越具体越好。看看这些对比：

方面模糊描述（避免）具体描述（推荐）
颜色好看的颜色主色调用蓝色系，如 #4F46E5
布局居中显示页面最大宽度 500px，水平居中
风格现代风格参考苹果官网的极简风格，圆角卡片
按钮添加一些按钮每个任务右侧有"完成"和"删除"两个按钮
数据展示一些任务用 3 条假数据，如"完成项目报告"等

为什么具体描述更好？因为 AI 面对模糊描述时只能"猜"，而具体描述让 AI 知道你到底想要什么。

检查你的 Prompt ​

在发送之前，用这个清单检查一下：

  • [ ] 说明了项目背景（做什么、给谁用）？
  • [ ] 列出了要包含的页面元素？
  • [ ] 指定了技术约束（HTML + CSS，不用框架）？
  • [ ] 说明了设计风格和配色偏好？
  • [ ] 提到了响应式需求？
  • [ ] 告诉 AI 你是初学者，需要注释？

选择哪个版本？ ​

你的情况建议使用
第一次跟着教程做完整版，获得最好的结果
已经做过一次，想快速复习标准版
已经很熟练，想快速验证想法最简版

建议

如果这是你第一次做 AI 编程项目，建议使用完整版。多花 2 分钟写 Prompt，能省下后面很多调整时间。

本步检查点 ​

  • [ ] 选择了适合自己的 Prompt 版本
  • [ ] 复制好了 Prompt，准备发送给 AI

→ 4.2.2 生成静态页面