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