PRD to Prototype — 从想法到可交互原型#

Overview#

本技能将用户的模糊产品想法，通过两步强制流程，转化为完整的PRD文档和高保真可交互HTML原型。全程零提问、直接执行，最终交付可在浏览器中预览的原型页面。

---

⚠️ 核心铁律（违反必究）#

1. 禁止提问：无论用户输入的需求多么简短或模糊， 绝对禁止 在生成PRD之前询问任何问题。
2. 直接脑补：必须立即基于行业标准和合理假设，自动补全所有细节，直接产出包含完整交互流程的PRD。
3. 强制两步流程：必须先生成PRD，再生成原型。绝不跳过PRD直接做原型。

---

Workflow（强制流程）#

🟢 第一阶段：直出PRD与交互流程#

触发条件： 用户表达任何产品想法、需求、痛点或创意（例如："我想做一个商城"）。

执行步骤：

1. 零延迟响应：不进行任何澄清对话，直接开始生成PRD。

2. 生成完整PRD文档，写入 /workspace/docs/prd.md，内容必须包含：

   • 产品概述与目标用户
   • 核心功能列表与优先级
   • 完整的用户交互路径（User Flows）
   • 页面清单与页面间跳转关系
   • 非功能性需求（性能、安全等合理假设）

3. PRD生成后，立即在同一条消息中展示 GenUI 确认表单（模板见下方）。

GenUI 确认表单模板（必须严格一致）：

markdown

✅ **PRD与交互流程已生成**：`/workspace/docs/prd.md`

-----------------------------------------------------------------------
📋 **GenUI Project Confirmation**
-----------------------------------------------------------------------
请审核方案，并选择下一步操作：

[ 🚀 确认并生成移动端 App 原型 ]   (回复: "确认移动端")
[ 💻 确认并生成 PC 端 Web 原型 ]   (回复: "确认PC端")
[ 🛠️ 修改需求文档 ]               (回复: "修改: <您的意见>")
[ ❌ 拒绝并重写 ]                 (回复: "重写")
-----------------------------------------------------------------------

🔵 第二阶段：原型设计与生成#

触发条件： 用户在确认表单中做出选择（回复 "确认移动端" 或 "确认PC端"）。

执行步骤：

1. 读取 /workspace/docs/prd.md 中的PRD内容。
2. 根据用户选择的目标平台（Mobile / PC），按照下方【设计系统】和【构建策略】生成原型。
3. 创建原型文件到 /workspace/prototype/ 目录。
4. 部署原型（如有 deploy 工具可用）。
5. 双重交付：返回可访问的原型预览链接 + PRD文档路径。

用户反馈处理#

• 用户点确认（选平台）→ 立即进入第二阶段。
• 用户改需求（回复 "修改: ..."）→ 根据意见快速修改PRD → 再次展示 GenUI 确认表单。
• 用户重写（回复 "重写"）→ 重新生成PRD → 再次展示 GenUI 确认表单。

---

设计系统（Design System）#

色彩 (Color Palette)#

• 避免使用高饱和度的纯色（如 #0000FF）。
• PC端：偏向 B端 SaaS 风格（清爽、大留白）或极客暗黑模式。
• 移动端：偏向 iOS 18 风格（大圆角、毛玻璃、沉浸式）。
• 配色建议：使用 Zinc/Slate 中性色系作为骨架，品牌色仅用于 CTA（行动号召）按钮。

排版 (Typography)#

• 字体栈： -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
• 字号：建立清晰的层次（H1 vs Body），使用 rem 单位。
• 行高：正文行高至少 1.6。

质感 (Texture & Depth)#

• 投影：使用多层柔和阴影（ box-shadow），避免生硬的黑边。
• 圆角：现代 UI 标配大圆角（ rounded-xl, rounded-2xl）。
• 模糊：背景模糊（ backdrop-filter: blur(20px)）用于侧边栏或弹窗。

审美标准#

• 拒绝：默认蓝色/系统蓝、粗糙的阴影、拥挤的布局、低像素图片、Arial/宋体默认字体。
• 必须：使用高级灰/黑白/品牌色、大留白、毛玻璃效果、流畅动效、高清真实图片、系统级字体栈。
• 标准：设计必须对标 Awwwards、Dribbble 热门作品和 Apple 设计规范。看起来像 2025 年的产品，而非 2010 年的 Bootstrap 模板。

---

平台构建策略#

📱 移动端 (Mobile) — "沉浸式体验"#

• 容器模拟：在 index.html 中必须使用 CSS 绘制一个逼真的 iPhone 16 外框（带灵动岛/刘海）。

• 布局：

  • 顶部：状态栏（时间/电量）+ 导航栏（大标题/透明背景）。
  • 底部：悬浮或磨砂质感的 TabBar。
  • 内容：卡片式布局，左右留边，内容不贴边。

• 交互：按钮点击要有缩放反馈（ active:scale-95）。

💻 PC端 (Desktop) — "生产力美学"#

• 布局：

  • 经典的 Sidebar + Header + Content 布局，或顶部大导航布局。
  • 最大宽度限制（ max-w-7xl），居中显示，避免在大屏上内容过于拉伸。

• 交互：

  • Hover 效果必不可少（颜色加深、轻微上浮）。
  • Tooltip 提示。
  • 表格行 Hover 高亮。

---

资源生成规范#

图片 (Unsplash)#

• 严禁 使用占位符（如 via.placeholder.com）。
• 必须使用 Unsplash Source 或类似服务获取 高质量、无水印 图片。
• 根据产品类型选择关键词（e.g., "minimalist office", "abstract technology", "modern portrait"）。
• URL 示例： https://images.unsplash.com/photo-1497366216548-37526070297c?auto=format&fit=crop&w=800&q=80（确保图片链接稳定有效）。

图标 (Icons)#

• 使用 FontAwesome 6 (CDN) 或 Heroicons (SVG)。
• 图标要与文字垂直居中对齐，大小适中。

---

技术栈与代码规范#

技术栈（强制）#

• 输出纯 HTML5 + Tailwind CSS (CDN) + Vanilla JS。
• 严禁 依赖需要编译的框架（如 React/Vue）。

HTML 模板结构#

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>产品名称</title>
    <!-- 引入 Tailwind -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入 FontAwesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 配置 Tailwind 主题 (可选) -->
    <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              brand: '#0f172a', // 自定义品牌色
            }
          }
        }
      }
    </script>
    <style>
        /* 自定义微调样式，如滚动条隐藏、毛玻璃兼容性 */
        body { font-family: -apple-system, system-ui, sans-serif; }
    </style>
</head>
<body class="bg-gray-50 text-gray-900 antialiased">
    <!-- 内容区域 -->
</body>
</html>

语言统一#

• 界面所有文案、数据、按钮必须为 简体中文（除非用户指定外语）。
• 严禁残留 Lorem Ipsum 或英文标题。

---

文件与输出规范#

目录结构#

text

/workspace/
├── docs/
│   └── prd.md              # PRD文档
└── prototype/
    ├── index.html           # 入口页面
    └── pages/
        ├── page1.html       # 子页面
        ├── page2.html       # 子页面
        └── ...

关键要求#

• index.html 必须能够预览所有页面：

  • 移动端：用 iframe 手机壳展示。
  • PC端：直接作为首页。

• 所有图片必须真实加载（Unsplash），所有链接必须可点击（跳转或空锚点）。

---

原型生成执行步骤#

1. 分析 PRD：确定核心页面（首页、列表、详情）。

2. 定义视觉风格：根据平台和产品类型确定配色、排版、质感。

3. 生成资源：选择合适的 Unsplash 图片关键词。

4. 编写代码：

   • 创建 /workspace/prototype/index.html（入口）。
   • 创建 /workspace/prototype/pages/*.html（子页面）。

5. 检查细节：

   • 检查所有文案是否为中文。
   • 检查图片是否加载成功。
   • 检查布局是否错位。

6. 部署：如有 deploy 工具可用，调用部署。

---

质量自检 (Pre-flight Check)#

• 审美：这看起来像是一个 2025 年的产品吗？还是像 2010 年的 Bootstrap 模板？（必须是前者）
• 中文：是否有残留的 Lorem Ipsum 或英文标题？
• 图片：是否有裂图？图片风格是否统一？
• 完整性：所有链接可点击？所有页面可访问？
• 响应速度：CDN 链接是否可访问？（Tailwind CDN 通常没问题）
• 交互：按钮、hover、动效是否正常工作？

---

Common Mistakes to Avoid#

1. 在生成PRD前询问用户问题 — 绝对禁止，必须零提问直接生成。
2. 跳过PRD直接生成原型 — 必须严格遵守两步流程。
3. 使用占位符图片 — 必须使用 Unsplash 真实图片。
4. 使用需要编译的框架 — 只允许纯 HTML + Tailwind CDN + Vanilla JS。
5. 残留英文文案 — 所有界面内容必须为简体中文。
6. 使用默认系统蓝或高饱和纯色 — 必须使用高级配色方案。
7. 忘记展示 GenUI 确认表单 — PRD生成后必须立即展示。
8. PRD中缺少交互流程 — 必须包含完整的 User Flows。