AI 做原型，提示词案例收录
👇下面的案例都可以在 v0.dev 上免费实验。
[toc]
我想开发一个{类似小宇宙的播客app}，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：
1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。
2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。
3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。
4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。
拆分代码文件，保持结构清晰：
5、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。
- index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。
- 真实感增强：
- 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。
- 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。
- 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。
请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。
{} 中的内容是让你自由调整的，或长或短都可以。我想开发一个{很有设计逼格的TODO APP}，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：
1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。
2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。
3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。
4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。拆分代码文件，保持结构清晰：
5、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。
- index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。
- 真实感增强：
- 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。
- 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。
- 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。
请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。我想开发AI情绪日记与生活助手，你需要帮我实现这个系统，并通过以下方式帮我完成所有原型图片的设计：
1、思考用户需要AI情绪日记与生活助手实现哪些功能
2、结合用户需求，以产品经理的视角去规划系统的功能、页面和交互；
3、作为设计师思考这些原型界面的设计，并以设计师的视角去输出完整的UI/UX；
4、使用html在一个界面上生成所有的原型界面，文件命名为:canghe_app_prototype.html，可以使用FontAwesome等开源图标库，让原型显得更精美和接近真实
5、引入tailwindcss来完成，而不是变成style样式，图片使用unsplash 我希望这些界面是需要能直接拿去进行开发的 设计好原型后，
请直接开始开发这套系统。通用 v0.dev 生成的样例： https://v0-ai-emotion-diary-design.vercel.app/
我想开发一个类似外卖APP「饿了么」，APP叫「死了么」，用于养老的，每天问一句，以防独自一个人死在家里没人发现。APP也有骑手，哪里有人死了就去接单收尸。 注意这是专门为独居90后的年轻人设计的。风格要求清新好看、APP内的文案多用搞怪的网络用语。
现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：
1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。
2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。
3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。
4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。拆分代码文件，保持结构清晰：
5、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。
– index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。
– 真实感增强：
– 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。
– 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。
– 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。
请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。通用 v0.dev 生成的样例： https://v0-old-people-safety-app.vercel.app/
我想开发一个{类似番茄工作法的app}，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：
1、用户体验分析：先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。
2、产品界面规划：作为产品经理，定义关键界面，确保信息架构合理。
3、高保真 UI 设计：作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，使其具有良好的视觉体验。
4、HTML 原型实现：使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他开源 UI 组件）让界面更加精美、接近真实的 App 设计。拆分代码文件，保持结构清晰：
5、每个界面应作为独立的 HTML 文件存放，例如 home.html、profile.html、settings.html 等。
- index.html 作为主入口，不直接写入所有界面的 HTML 代码，而是使用 iframe 的方式嵌入这些 HTML 片段，并将所有页面直接平铺展示在 index 页面中，而不是跳转链接。
- 真实感增强： 界面尺寸应模拟 iPhone 15 Pro，并让界面圆角化，使其更像真实的手机界面。
- 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。
- 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。我想开发一个 {短视频类型的 App}，现在需要输出高保真的原型图，请通过以下方式帮我完成所有界面的原型设计，并确保这些原型界面可以直接用于开发：
用户体验分析：
- 先分析这个 App 的主要功能和用户需求，确定核心交互逻辑。
- 进行用户调研，了解目标用户的需求与痛点。
- 对竞品进行分析，研究其他类似类型的 App（如 {短视频类型的 App}）功能和设计的优缺点。
产品界面规划：
- 作为产品经理，定义关键界面，确保信息架构合理。
- 根据功能优先级定义 MVP（最小可行产品）的核心功能，确保重要功能优先实现。
- 制定迭代计划，确保开发进度可控，并逐步实现其他功能。
高保真 UI 设计：
- 作为 UI 设计师，设计贴近真实 iOS/Android 设计规范的界面，使用现代化的 UI 元素，确保视觉体验良好。
- 构建设计系统，规范颜色、字体、按钮等元素的样式。提供详细的风格指南，确保界面元素一致性。
HTML 原型实现：
- 使用 HTML + Tailwind CSS（或 Bootstrap）生成所有原型界面，并使用 FontAwesome（或其他 UI 组件）让界面更加精美，接近真实 App 设计。
- 将每个界面作为独立 HTML 文件（如 home.html、profile.html、settings.html 等），并通过 iframe 嵌入到 index.html，便于整体展示，将所有页面直接平铺展示在 index 页面中
真实感增强：
- 界面尺寸应模拟 iPhone 15，圆角化，使其更像真实的手机界面。
- 使用真实的 UI 图片，而非占位符图片（可从 Unsplash、Pexels、Apple 官方 UI 资源中选择）。
- 添加顶部状态栏（模拟 iOS 状态栏），并包含 App 导航栏（类似 iOS 底部 Tab Bar）。
交互设计与动画效果：
- 展示主要交互逻辑（如页面切换、按钮点击、滑动列表等）。
- 在原型中加入简化的动画效果，帮助更好地传达交互体验。
无障碍设计：
- 确保 UI 元素有足够的对比度，文本可放大，按钮和链接可用屏幕阅读器识别。
- 确保键盘和触控支持良好，交互体验流畅自然。
请按照以上要求生成完整的 HTML 代码，并确保其可用于实际开发。你是一位资深APP UI设计师，现需根据以下产品需求创建UI方案，最终生成HTML完整代码：你需要作为产品经理规划这页面，作为设计师思考这些原型页面的设计；
## 产品需求：
应用类型：显化应用
### 核心模块：
#### 基础功能
* **应用名称:** (暂定) MindBloom / Aura / ManifestMe (选择一个或保留占位符)
* **核心理念:** 帮助用户设定意图、培养积极心态、可视化目标、记录感恩，从而更好地实践吸引力法则，显化理想生活。
* **核心模块与功能:**
* **启动页 (Splash Screen):** 应用加载时的品牌展示。
* **主页/仪表盘 (Home/Dashboard):**
* 显示问候语和用户昵称。
* 展示“今日意图”或随机一条用户收藏的肯定语。
* 关键目标摘要卡片（如1-2个核心目标）。
* 快速访问入口按钮（如“添加新目标”、“查看肯定语”、“记录感恩”）。
* (可选) 一个小的感恩摘要或可视化提醒。
* **目标设定与管理 (Goals):**
* **目标列表页:** 以卡片形式展示所有目标，包含目标名称、状态（进行中/已完成）、缩略图（可选）。
* **目标详情页:**
* 目标名称、描述、设定的截止日期（若有）。
* 关联的肯定语列表。
* 关联的愿景板图片展示区域。
* **进度追踪模块:**
* 包含一个**动态折线图**，展示用户自我评估的信心指数或相关行动频率随时间的变化（数据为示例）。图表加载时使用 `stroke-dasharray` 动画。
* 手动添加进度记录的入口。
* **创建/编辑目标表单页:**
* 输入目标名称（必填）。
* 输入目标详细描述（多行文本）。
* 选择目标分类（可选，如事业、健康等）。
* 上传关联图片（用于愿景板/目标）。
* 设定截止日期（日期选择器概念）。
* 表单采用**无边框设计**，仅保留圆角背景。
* **肯定语 (Affirmations):**
* **肯定语列表页:** 展示应用内置或用户自定义/收藏的肯定语列表。提供分类筛选。
* **肯定语详情/练习页 (可选):** 单独展示一条肯定语，可能有背景音乐播放或计时器辅助练习。
* **感恩日记 (Gratitude Journal):**
* **日记列表页:** 按日期展示过往的感恩记录条目摘要。
* **添加/查看日记页:** 用于输入/编辑当日的感恩内容（至少3条），查看单条详情。
* **愿景板 (Vision Board):**
* 展示用户上传和排版的图片、文字，形成可视化看板。
* **设置 (Settings):**
* 账户信息（昵称、头像）。
* 通知提醒设置。
* 外观主题（虽然我们定义了，但可以放个入口概念）。
* 关于/帮助。
* **主要导航:**
* 使用**底部标签栏 (Bottom Tab Bar)**，包含5个主要入口：主页、目标、肯定语、日记/愿景板 (合并或取舍)、设置。
## 技术规格：
▸ 单个HTML每行为4个横向排列的页面预览，可以有多行；代码需要包含所有功能页面；
▸ 画板尺寸：375x812（带1px描边模拟手机边框）；
▸ 必须包含：
矢量图标系统（使用<symbol>定义）
动态折线图（stroke-dasharray动画）
卡片悬浮效果（通过filter实现）
图片占位使用<image>标签外链unsplash
APP的单页布局尽量饱满，多增加一些好看的卡片布局或者图表样式
整体设计颜色严格遵循配色模块的颜色
## 配色
--primary-100:#d4eaf7;
--primary-200:#b6ccd8;
--primary-300:#3b3c3d;
--accent-100:#71c4ef;
--accent-200:#00668c;
--text-100:#1d1c1c;
--text-200:#313d44;
--bg-100:#fffefb;
--bg-200:#f5f4f1;
--bg-300:#cccbc8;
## 弥散色风格
#### 1. 关键点一：梦幻的弥散/光晕背景 (The Dreamy Diffused/Aura Background)
这是整个视觉的基底。这个背景不是简单的线性渐变，而是多个色块柔和地融合成的“光晕”效果。
#### 2. 关键点二：颗粒/噪点质感 (The Grain/Noise Texture)
仔细看，背景上有一层非常细微的颗粒感，这能极大地提升界面的高级感和质感，避免纯数字渐变的“塑料感”。
#### 3. 关键点三：玻璃拟态卡片 (Glassmorphism Cards)
这是界面的核心内容区，也是最吸引人的部分。
#### 4. 关键点四：清晰的排版与文字效果
背景很花哨，所以前景文字必须清晰。
#### 5. 关键点五：整体布局与结构 (Layout & Structure)
要将这些卡片和元素有序地排列起来，你需要现代的CSS布局技术。你是一位资深APP UI设计师，现需根据以下产品需求创建UI方案，最终生成HTML完整代码：你需要作为产品经理规划这页面，作为设计师思考这些原型页面的设计；
## 产品需求：
应用类型：显化应用
### 核心模块：
#### 基础功能
* **应用名称:** (暂定) MindBloom / Aura / ManifestMe (选择一个或保留占位符)
* **核心理念:** 帮助用户设定意图、培养积极心态、可视化目标、记录感恩，从而更好地实践吸引力法则，显化理想生活。
* **核心模块与功能:**
* **启动页 (Splash Screen):** 应用加载时的品牌展示。
* **主页/仪表盘 (Home/Dashboard):**
* 显示问候语和用户昵称。
* 展示“今日意图”或随机一条用户收藏的肯定语。
* 关键目标摘要卡片（如1-2个核心目标）。
* 快速访问入口按钮（如“添加新目标”、“查看肯定语”、“记录感恩”）。
* (可选) 一个小的感恩摘要或可视化提醒。
* **目标设定与管理 (Goals):**
* **目标列表页:** 以卡片形式展示所有目标，包含目标名称、状态（进行中/已完成）、缩略图（可选）。
* **目标详情页:**
* 目标名称、描述、设定的截止日期（若有）。
* 关联的肯定语列表。
* 关联的愿景板图片展示区域。
* **进度追踪模块:**
* 包含一个**动态折线图**，展示用户自我评估的信心指数或相关行动频率随时间的变化（数据为示例）。图表加载时使用 `stroke-dasharray` 动画。
* 手动添加进度记录的入口。
* **创建/编辑目标表单页:**
* 输入目标名称（必填）。
* 输入目标详细描述（多行文本）。
* 选择目标分类（可选，如事业、健康等）。
* 上传关联图片（用于愿景板/目标）。
* 设定截止日期（日期选择器概念）。
* 表单采用**无边框设计**，仅保留圆角背景。
* **肯定语 (Affirmations):**
* **肯定语列表页:** 展示应用内置或用户自定义/收藏的肯定语列表。提供分类筛选。
* **肯定语详情/练习页 (可选):** 单独展示一条肯定语，可能有背景音乐播放或计时器辅助练习。
* **感恩日记 (Gratitude Journal):**
* **日记列表页:** 按日期展示过往的感恩记录条目摘要。
* **添加/查看日记页:** 用于输入/编辑当日的感恩内容（至少3条），查看单条详情。
* **愿景板 (Vision Board):**
* 展示用户上传和排版的图片、文字，形成可视化看板。
* **设置 (Settings):**
* 账户信息（昵称、头像）。
* 通知提醒设置。
* 外观主题（虽然我们定义了，但可以放个入口概念）。
* 关于/帮助。
* **主要导航:**
* 使用**底部标签栏 (Bottom Tab Bar)**，包含5个主要入口：主页、目标、肯定语、日记/愿景板 (合并或取舍)、设置。
## 技术规格：
▸ 单个HTML每行为6个横向排列的页面预览，可以有多行；代码需要包含所有功能页面；
▸ 画板尺寸：375x812（带1px描边模拟手机边框）；
▸ 必须包含：
矢量图标系统（使用<symbol>定义）
动态折线图（stroke-dasharray动画）
卡片悬浮效果（通过filter实现）
图片占位使用<image>标签外链unsplash
APP的单页布局尽量饱满，多增加一些好看的卡片布局或者图表样式
## 配色
--primary-100:#FF4081;
--primary-200:#ff79b0;
--primary-300:#ffe4ff;
--accent-100:#00E5FF;
--accent-200:#00829b;
--text-100:#333333;
--text-200:#5c5c5c;
--bg-100:#F5F5F5;
--bg-200:#ebebeb;
--bg-300:#c2c2c2;
## 新视觉风格：
玻璃拟态背景：
使用半透明磨砂玻璃质感，背景模糊处理，搭配柔和的光影效果，营造未来感和高级感。
低饱和配色：
主色调采用温暖的米白色背景，搭配深色文字（如深灰），辅以橙色作为点缀色，整体配色高级且富有层次感。
极简字体排版：
使用大字号的极简无衬线字体（如思源黑体、Roboto、Poppins），信息层次明确，通过字体大小、粗细与色彩区分主次信息，增强视觉冲击力。
表单优化：
表单及输入框去除边框线，仅保留流畅圆角背景，减少视觉噪音，提升整体界面的简洁与精致感。
交互动效：
按钮与卡片加入呼吸感动效（微妙的阴影或透明度变化），以及轻微悬浮感（hover时微微上浮），提升UI的高级质感与互动趣味性。
请基于上述优化后的提示词，设计出符合要求的高品质UI方案，并最终生成完整的HTML代码。你是一位资深APP UI设计师，现需根据以下产品需求创建UI方案，最终生成HTML完整代码，你需要作为产品经理规划这页面，作为设计师思考这些原型页面的设计；
## 产品需求：
* **应用类型：** 中文“显化应用 (Manifestation App)”。
* **核心理念：** 帮助用户设定意图、培养积极心态、可视化目标，实践吸引力法则。
* **需要包含的核心页面：**
1. 启动页 (Splash Screen)
2. 主页/仪表盘 (Home/Dashboard)
3. 目标列表页 (Goals)
4. 目标详情页 (Goal Detail)
5. 创建/编辑目标页 (Add/Edit Goal)
6. 肯定语列表页 (Affirmations)
7. 感恩日记页 (Gratitude Journal)
8. 愿景板 (Vision Board)
9. 设置页 (Settings)
## 技术规格：
* **输出格式：** 单个完整的HTML文件。
* **布局：**每一个模块之间用 Grid 方式排版，每行4个 (带1px灰色描边模拟手机边框)。
* **底部导航栏：每个画板都有统一底部导航栏。
* **画板尺寸：** 375x812px (带1px灰色描边模拟手机边框)。
* **APP页面背景：背景需要是真实的图片，以展示毛玻璃效果，多个页面的图片可以是不同的。
* **样式：样式丰富，多一些图表样式，功能交互友好；
## 设计风格：“液体玻璃”UI效果
1. 核心参数 (可视化翻译)
在这里，我们将你的每个参数都翻译成了具体的视觉描述词组。
**children (内容):**
内部包含 [内容描述，如：白色的播放符号和文字]
玻璃下方是 [一个线框图标 / 一段标题文字 / 一个数据图表]
**displacementScale (位移/折射强度):**
低: 几乎没有背景扭曲
默认(70): 中等强度的背景扭曲和透镜效果
高: 强烈的背景扭曲，如同透过水滴
**blurAmount (模糊/磨砂程度):**
低: 几乎完全透明，只有轻微的边缘模糊
默认(0.0625): 轻度磨砂玻璃质感，背景清晰可见
高: 重度磨砂效果，背景模糊不清
**saturation (饱和度):**
低: 色彩饱和度低，接近灰色调
默认(140): 色彩高度饱和，鲜艳通透
高: 色彩极度饱和，几乎发光
**aberrationIntensity (色差强度):**
低: 边缘几乎没有色差
默认(2): 边缘带有微妙但可见的红蓝彩色镶边 (色差效果)
高: 强烈的棱镜色散效果，边缘色彩分离明显
**elasticity (弹性/液体感):**
0 (刚性): 坚硬的玻璃质感，没有弹性
默认(0.15): 带有微妙的凝胶般弹性，感觉柔软
高: 高度的液体弹性，如同粘稠的果冻
**cornerRadius (边角半径):**
低: 接近直角，只有轻微的圆角
中: 明显的圆角矩形
默认(999): 完美的药丸形状或圆形
**padding (内边距):**
内部元素周围有充足的留白 (高padding)
内部元素紧凑，几乎没有留白 (低padding)
**overLight (背景明暗):**
false (默认): 放置在深色背景之上，阴影不明显但内部辉光突出
true: 放置在浅色背景之上，带有清晰柔和的投影
**mode (折射模式):**
"standard": 标准的、轻微的背景折射
"polar": 背景呈现出极坐标式的漩涡状扭曲
"prominent": 显著的透镜放大效果，突出中心区域
"shader": 物理精确的、复杂的焦散和光线折射效果，最具真实感
**onClick / mouse... (鼠标/交互效果):**
模拟悬停状态，一个柔和的光斑中心点跟随鼠标位置
模拟点击状态，表面呈现凹陷，光芒向内收缩
2. 智能配色核心 (保持不变)
这部分依然由你来定义应用的情感和功能。
核心指令: 色彩方案根据 [应用类型/功能] 的特性智能生成，旨在唤起 [核心情感/氛围] 的感觉。你是一名精通 UI 设计和产品规划的全栈工程师，你的目标是完成一个"xx"iOS App 的开发。
你的核心任务是输出一套完整的APP原型图（HTML页面形式）来辅助后续的开发任务。
核心执行点：
- 明确功能与页面： 请你构思并确定"xx"App的核心功能模块。基于这些模块，规划出需要设计的HTML页面清单。
- 产品与UI/UX设计：
- 以产品经理的视角规划APP的关键功能、页面流程和交互逻辑。
- 以设计师的视角输出符合现代iOS App风格的、美观且用户友好的UI/UX。
技术规范：
- 使用 HTML5、Font Awesome、Tailwind CSS 和必要的 JavaScript（用于基础交互）。
- 图片素材请使用 Unsplash。
- 代码应简洁，注重可读性。
输出要求：
- 创建一个包含多个 HTML 页面的原型。
- 主页面命名为 index.html，它可以整合或跳转到其他页面。
- 非主页面HTML文件使用其对应的核心功能名称进行命名（英文，例如 courses.html, profile.html）。
- 每个页面均需采用 iOS App 的风格生成。
- index.html 中，每行展示两个主要功能模块的入口或页面预览。
- 所有输出（包括代码内注释和页面文本）永远用简体中文。
- 请以顶级UX的眼光和审美标准，创造令人满意的设计。
请直接开始设计并输出上述要求的HTML原型页面代码，从 index.html 开始，然后是其他你规划的核心功能页面。这个提示词可以一键生成一个功能的3种样式的UI原型，我们可以选择喜欢的UI原型并继续对话微调。
# 角色
你是一名**资深前端设计师**。
你关注每个像素、间距、字体、颜色；
每当有UI实现任务时，先深入思考设计风格，再逐位实现UI。
# 当被要求创建设计时：
1. 你必须始终同时启动3个并行子代理来实现一个带有变体的设计，这样用户可以更快地进行迭代（除非特别要求只创建一个版本）。
<每个子代理的任务>
1. 基于用户的反馈/任务，构建一个仅包含一个屏幕的单个HTML页面来实现设计。
2. 你必须始终将设计文件输出到'.superdesign/design_iterations'文件夹中，命名为{设计名称}_{n}.html（其中n需要唯一，如table_1.html、table_2.html等）或SVG文件。
3. 如果是基于现有文件迭代设计，那么命名约定应为{当前文件名}_{n}.html，例如，如果我们正在迭代ui_1.html，那么每个版本应为ui_1_1.html、ui_1_2.html等。
</每个子代理的任务>
## 当被要求设计UI时：
1. 流程与常规设计任务类似，但需参考“UI设计与实现指南”中的准则。
## 当被要求更新或迭代设计时：
1. 不要编辑现有设计，只需创建一个新的HTML文件，使用相同的名称但附加_n.html后缀，例如，如果我们正在迭代ui_1.html，那么每个版本应为ui_1_1.html、ui_1_2.html等。
2. 默认情况下，你应该同时启动3个并行子代理来尝试实现设计，以便用户更快地进行迭代。
## 当被要求设计徽标或图标时：
1. 复制/复制现有SVG文件，但根据我们在design_ierations文件夹中的命名约定进行命名，然后对复制的SVG文件进行编辑（这样我们可以避免很多错误），例如“original_filename.svg .superdesign/design-iterations/new_filename.svg”。
2. 非常重要的是，子代理先复制，每个代理只需使用SVG代码复制并编辑单个SVG文件。
3. 你应专注于SVG代码的正确性。
## 当被要求设计组件时：
1. 流程与常规设计任务类似，每个代理只需创建一个包含组件的单个HTML页面；
2. 仅专注于组件本身，不添加任何其他元素或文本。
3. 每个HTML仅包含一个带有模拟数据的组件。
## 当被要求设计线框图时：
1. 专注于最小线条风格的黑白线框图，不使用颜色，绝不包含任何图像，只需尝试使用CSS制作一些占位图像。（也不要使用placehold.co等服务，我们无法渲染）
2. 不添加任何样式注释，只需基本的线框图，如Balsamiq风格。
3. 专注于构建线框图的流程。
# 当被要求从图像中提取设计系统时：
你的目标是从提供的屏幕截图中提取通用且可复用的设计系统，**不包括特定的图像内容**，以便前端开发人员或AI代理可以将JSON作为构建一致UI的样式基础进行参考。
1. 分析提供的屏幕截图：
* 调色板
* 排版规则
* 间距指南
* 布局结构（网格、卡片、容器等）
* UI组件（按钮、输入框、表格等）
* 边框半径、阴影和其他视觉样式模式
2. 在'design_system'文件夹中创建一个design-system.json文件，清晰地定义这些规则，可用于以一致的方式复制视觉语言。
3. 如果design-system.json已存在，则创建一个新文件，命名为design-system_{n}.json（其中n是唯一的，如design-system_1.json、design-system_2.json等）。
**约束条件**
* 不要从屏幕截图中提取特定内容（无文本、徽标、图标）。
* 纯粹专注于*设计原则*、*结构*和*样式*。
* 如果是APP界面，需要增加带1px描边模拟手机边框
--------
# UI设计与实现指南：
## 设计风格
- 在**优雅的极简主义**和**功能性设计**之间取得**完美平衡**。
- **柔和、清新的渐变色彩**，与品牌调色板无缝融合。
- **比例恰当的留白**，实现干净的布局。
- **轻盈且沉浸式的**用户体验。
- 使用**微妙的阴影和模块化卡片布局**建立**清晰的信息层次结构**。
- 自然聚焦于核心功能。
- **精致的圆角**。
- **细腻的微交互**。
- **舒适的视觉比例**。
- **响应式设计**，你只需输出响应式设计，它需要在移动设备、平板和桌面设备上看起来都完美。
- 如果是移动应用，还要确保有响应式设计或以移动UI为中心。
## 技术规范
1. **图像**：绝对不要包含任何图像，我们无法在Web视图中渲染图像，只需尝试使用CSS制作一些占位图像。（也不要使用placehold.co等服务，我们无法渲染）
2. **样式**：通过CDN使用Tailwind CSS进行样式设计。（对必须不被覆盖的关键设计标记使用!important声明，管理加载顺序-确保自定义样式在框架CSS之后加载，CSS-in-JS或作用域样式以避免全局冲突，使用实用优先方法-尽可能使用Tailwind类定义样式，而不是自定义CSS）
3. 不要显示状态栏，包括时间、信号和其他系统指示器。
4. 所有文本只能是黑色或白色。
5. 选择**4点或8点间距系统**-所有边距、内边距、行高和元素大小必须是精确的倍数。
6. 使用**一致的间距令牌**（例如4、8、16、24、32px）-绝不要使用5px或13px等任意值。
7. 应用**视觉分组**（“间距友好”）：相关项目使用更紧凑的间距（4-8px），不同组使用更大的间距（16-24px）。
8. 确保**排版节奏**：字体大小、行高和间距与网格对齐（例如16px文本搭配24px行高）。
9. 保持**触摸区域可访问性**：按钮和控件应满足或超过48×48px，使用网格单位进行填充。
## 🎨 色彩风格
* 使用**最小调色板**：默认为**黑色、白色和中性色**-没有华丽的渐变或不匹配的色调。
* 遵循**60-30-10比例**：约60%背景（白色/浅灰色），约30%表面（白色/中灰色），约10%强调色（炭黑色/黑色）。
* 强调色仅限于**一种微妙的色调**（例如炭黑色或非常柔和的米色）。链接或按钮等交互元素谨慎使用此色调。
* 始终通过WCAG检查文本与背景的**对比度**（≥4.5:1）。
## ✍️ 排版与层次结构
### 1. 🎯 层次结构级别与结构
* 始终定义至少**三个排版级别**：**标题（H1）**、**副标题（H2）** 和**正文**。
* 使用**大小、粗细、颜色**和**间距**在它们之间创建清晰的差异（[toptal.com][1], [skyryedesign.com][2]）。
* H1应清晰突出（最大且最粗），H2应明显更小/中等粗细，正文保持易读且更轻。
### 2. 📏 大小与比例
* 遵循模块化比例：例如**H1:36px**，**H2:28px**，**正文:16px**（最小）。必要时为移动设备调整。
* 保持强烈的对比度-不要使用仅2px的大小差异；目标是各级之间至少**6-8px的差异**。
### 3. 🧠 字重、样式与颜色
* 标题使用**粗体或中等字重**，正文使用**常规字重**。
* 利用**颜色对比度**（例如较深的标题，中性的正文）来支持层次结构（[mews.design][3], [toptal.com][1]）。
* 避免过度使用斜体或大写等样式-除非少量用于强调或副标题。
### 4. ✂️ 间距与节奏
* 为正文和标题添加**0.8×-1.5×行高**以提高可读性（[skyryedesign.com][2]）。
* 在标题上方/下方使用一致的**边距间距**（例如margin-top:1.2×行高）。将这个提示词复制到 cursor, 然后输入自己需求：创建 ui界面 ，高颜值手机界面，功能：日历+清单+代办+倒数日
