一、 需求描述词加上“复述我的需求，提出你的问题”
建议在描述需求时，能够遵循好的提示词框架，把目标、AI 的角色、我的角色、关键信息、行为规则和交付成果都说清楚。最好建议补一句”复述我的需求，提出你的问题“，来评估 AI 是否已经完全理解需求，是否还存在需要澄清的问题。
提示词（供参考）
你是一个有着丰富经验的前端网站设计师，我是一个产品经理，我希望创建一个简单的个人介绍页面，用户填写个人信息后能生成一张好看的卡片，并可以下载导出。用户输入的内容包括姓名、职位/头衔、公司、个人简介、邮箱、电话等内容。生成的卡片要足够美观，绿色清新风格的 UI。你直接生成网站代码，并让我能够在网站上测试。 复述我的需求，提出你的问题
Claude Code 理解了我们的需求，并提出了它需要我们澄清的问题，一一对这些问题做回复。
这里可以根据你自己的需求来回复 Claude code 的内容，这里提供的回复仅供参考，因为 Claude Code 给出的回复不一定和截图的一样，但原理是一样的
1、是横向的，标准名片尺寸。2、导出为 PNG 图片。 3、浅绿色清新风格 4、姓名职位在顶部，联系方式在底部。5、暂时不需要额外功能。6、面向普通用户，可以快速生成简介卡片，与人社交。
过程中如果弹出需要授权的菜单，建议都选择 2 Yes， and don’t ask again
Claude Code 很快完成任务，我们去检验一下效果。
二、基于素材和 AI 聊天助手讨论，让 AI 给出完整需求方案
1 可以把产品原型图直接给AI，让AI写提示词
可以借助 chatgpt、claude code、DeepSeek、gemini、豆包等聊天助手，来生成提示词
这张图里面是什么内容，我想使用 html 复刻的话怎么弄了？先不写代码，我去 claude code 里面实现，请给我具体的提示词就行.
然后 AI 给到的提示词如下：
请用 HTML + CSS + JavaScript 创建一个"早读动物园"应用，具体需求：
1. **主界面布局**：
- 顶部：标题"早读动物园"和副标题
- 中间：大的天蓝色动物展示区（带浅绿色地面），动物图标随机散落分布
- 底部三栏：左边显示当前分贝和阈值调节，中间显示计时，右边是设置和暂停按钮
2. **核心功能**：
- 使用 Web Audio API 获取麦克风音量分贝值
- 当音量超过设定阈值时，每隔一定时间生成一个随机动物emoji
- 动物以随机位置、随机大小出现在展示区，带淡入动画
- 计时器记录累计朗读时间
3. **设置面板**（点击设置按钮弹出）：
- 动物生成速度滑块（1-60秒）
- 动物种类选择（多选，用emoji表示）：🐶🐱🐰🐻🐨🦊🦁🐐🐷🐸🐔🐧🦆等
- 全选/全不选按钮
- 保存和重置按钮
4. **视觉效果**：
- 使用渐变色背景
- 动物emoji大小在30-60px间随机
- 卡片式设计，圆角阴影
- 按钮用蓝色和红色区分功能
5. **技术要点**：
- 请求麦克风权限
- 实时计算音量分贝
- 动态生成和移除DOM元素
- localStorage保存用户设置我们把这个提示词放到一个文件中 prd.md 中，然后让 Claude Code 开工，
@prd.md 实现这个功能