分为 4 个领域
全局上下文
- 产品定位
- 用户画像
特性计划 - PRD
设计指南 - 3 种不同的 UI 风格
原型图 - 展示出来的初版效果
Product Charter — ProtoGen 原型生成器
1) Product Positioning
ProtoGen 是一款面向产品经理、设计师和创业者的 AI 驱动原型生成工具。通过自然语言描述，用户可以在几秒钟内将产品想法转化为可视化 HTML 原型并实时预览，大幅缩短从概念到可视化的时间，让团队更快速地验证想法、对齐认知、推进决策。
2) Brand Keywords
- 即时响应 — 用户输入后立即生成预览，无需等待，让创意流动不被打断
- 智能理解 — AI 深度解析用户描述，自动推断布局、组件和交互逻辑
- 简洁直观 — 极简的输入界面和清晰的预览布局，降低学习成本，让用户专注创作
- 专业可靠 — 生成符合 Web 标准的 HTML 代码，可直接用于演示和进一步开发
- 快速迭代 — 支持反复修改和优化，快速探索多种设计方向
3) Core Problem / JTBD
当产品团队需要快速将抽象的产品想法具象化时，传统的原型工具需要学习复杂的操作界面，手动拖拽组件、调整样式、配置交互，整个过程耗时且打断思路。设计师忙于技术操作而非创意思考，非设计背景的产品经理难以独立完成原型，团队沟通效率低下。ProtoGen 让用户用自然语言描述想法，AI 自动生成专业的可视化原型，让概念验证从数小时缩短到数分钟。
4) Goals & Mission
- Mission: 消除产品创意与可视化之间的技术壁垒，让每个人都能快速表达和验证产品想法，加速创新从概念到实现的过程。
- Desired Outcomes (descriptive):
- 用户能够在不具备设计技能的情况下，仅通过文字描述就能获得专业水准的原型
- 团队能够在更早期阶段看到具象化的界面，减少认知偏差，提升决策质量
- 设计迭代速度显著提升，用户可以快速尝试多种方案并比较效果
- 生成的原型代码质量可靠，符合 Web 标准，可直接用于后续开发或演示
- 保持界面简洁和操作流畅，确保用户专注于创意本身而非工具使用
5) Solutions We Own
自然语言输入与解析
- What it solves: 消除用户学习复杂设计工具的门槛，让任何人都能表达产品想法
- Typical path: 用户在输入框中用自然语言描述界面需求（如”创建一个登录页面，包含用户名、密码输入框和登录按钮”），系统通过 AI 模型解析语义，提取界面元素、布局结构和交互逻辑
- Outcome for the user: 用户无需学习专业术语或工具操作，即可准确传达设计意图
- Boundaries: 当前专注于 Web 界面原型，暂不支持移动原生应用或复杂动画效果
智能 HTML 生成引擎
- What it solves: 自动将用户描述转化为符合 Web 标准的高质量 HTML 代码
- Typical path: AI 解析用户输入后，生成包含 HTML 结构、CSS 样式和必要 JavaScript 的完整代码，确保语义化标签使用、响应式布局和浏览器兼容性
- Outcome for the user: 用户获得可直接在浏览器中运行的专业原型，可用于演示、测试或作为开发参考
- Guiding principles: 代码质量优先 / 语义化结构 / 可维护性
实时预览与迭代
- What it solves: 让用户即时看到生成效果，快速验证想法并进行调整
- Typical path: 生成完成后，预览区域立即渲染 HTML 页面，用户可以查看效果、发现问题、修改描述后重新生成，形成快速迭代循环
- Outcome for the user: 用户可以在几分钟内探索多个设计方向，选出最优方案
- Guiding principles: 即时反馈 / 无缝切换 / 流畅体验
历史记录与管理
- What it solves: 保存用户的创作历史，方便回溯和比较不同版本
- Typical path: 每次生成的原型自动保存，用户可以查看历史记录，重新加载之前的版本，或导出 HTML 文件到本地
- Outcome for the user: 用户不会丢失任何创意尝试，可以安心探索各种可能性
- Boundaries: 初期版本可能限制历史记录数量，未来将支持云端同步和团队协作
主要用户 “创意驱动者”
李明
产品经理，互联网科技公司
Age: 28-35
Location: 上海，中国
“我需要快速把脑海中的想法变成可视化的原型，让团队看到我在说什么，而不是花大量时间学习复杂的设计工具。“
About 李明
李明是一位充满创意的产品经理，每天都有大量的产品想法需要验证和沟通。他有一定的技术背景，能看懂 HTML 代码，但没有系统学过 UI 设计工具。他的工作节奏很快，需要在有限时间内完成多个项目的原型设计，经常需要在会议中快速展示想法以获得团队反馈。
Behavioral Considerations
- 习惯用文字描述界面需求，更倾向自然语言表达而非拖拽操作
- 期望工具响应迅速，不愿意为简单的原型花费超过 10 分钟的时间
- 会多次迭代同一个想法，需要能快速修改和重新生成
- 重视生成结果的专业性，希望能直接用于团队演示和客户沟通
Frustrations
- 传统设计工具（如 Figma、Sketch）学习曲线陡峭，操作复杂，打断思路
- 手动绘制原型耗时长，从想法到可视化需要几个小时甚至几天
- 非设计专业背景导致做出的原型不够美观和专业，影响说服力
- 需要依赖设计师才能完成原型，沟通成本高且响应速度慢
Goals
- 在 5 分钟内将想法转化为可视化原型，快速验证产品概念
- 生成的原型足够专业，可以直接用于团队讨论和决策
- 能够独立完成原型设计，减少对设计团队的依赖
- 保留历史版本，方便回溯和比较不同设计方案
Tasks
- 在输入框中用自然语言描述新产品的界面需求
- 查看生成的 HTML 原型，检查是否符合预期
- 修改描述后重新生成，快速迭代优化设计
- 导出 HTML 文件用于团队分享和演示
- 查看历史记录，对比不同版本的原型效果
PRD — ProtoGen MVP 核心功能
1) Background
产品经理和设计师在日常工作中经常需要快速将抽象的产品想法转化为可视化原型，用于团队沟通、需求验证和决策支持。传统设计工具（如 Figma、Sketch）虽然功能强大，但学习成本高、操作复杂，对于非设计专业人员来说门槛较高。这导致大量产品创意因为缺乏快速可视化能力而无法被及时验证和推进。本次迭代聚焦于 Product Charter 中”消除产品创意与可视化之间的技术壁垒”的核心目标，针对李明这类”创意驱动者”用户的痛点，构建一个基于自然语言输入的原型生成工具，让用户能够在几分钟内完成从想法到可视化原型的转化。
2) Objectives & Desired Outcomes
- 即时可视化体验： 用户输入产品描述后，在 30 秒内看到生成的 HTML 原型并实时预览，无需学习任何设计工具操作，让创意验证从”数小时”缩短到”数分钟”
- 专业质量输出： 生成的原型符合 Web 标准，具备清晰的布局、合理的配色和可读的代码结构，可以直接用于团队演示和决策讨论，减少因原型质量问题导致的沟通障碍
- 快速迭代能力： 用户可以轻松修改描述并重新生成，支持在 5 分钟内探索多个设计方向，提升决策效率和创意探索空间
- Non-goals / Boundaries： 本次迭代不包括移动端原生应用原型、复杂动画效果、多人协作编辑功能，也不提供代码级编辑能力，专注于 Web 界面的快速原型生成
3) Users & Stories
- Primary Persona: 李明（产品经理）
- Story A: 作为产品经理，我希望用自然语言描述界面需求，这样我就不需要学习复杂的设计工具，可以专注于产品逻辑本身
- Story B: 作为产品经理，我希望在几分钟内看到可视化的原型，这样我就能快速验证想法的可行性，并及时调整方向
- Story C: 作为产品经理，我希望生成的原型足够专业，这样我就能直接用于团队会议和客户演示，提升沟通效率和说服力
- Story D: 作为产品经理，我希望能保存历史版本，这样我就能回顾不同阶段的设计思路，并选择最优方案
4) Key Feature
- 自然语言输入界面： 提供清晰直观的输入区域，用户可以用文字描述界面需求（如”创建一个用户注册页面，包含用户名、邮箱、密码输入框和提交按钮”），系统智能解析语义并提取关键信息
- AI 驱动的 HTML 生成： 根据用户描述，自动生成包含 HTML 结构、CSS 样式和必要交互的完整代码，确保生成结果符合 Web 标准、语义化且可维护
- 实时预览展示： 在界面右侧提供预览区域，生成完成后立即渲染 HTML 页面，用户可以直观看到最终效果，无需切换工具或导出文件
- 快速迭代支持： 用户可以修改描述后点击重新生成，系统立即更新预览，支持快速试错和多方案对比
5) Key Flow
- Example: 快速生成登录页面原型
- Trigger: 用户在会议前需要展示登录功能的初步设计
- Path: 用户在输入框中输入”创建一个登录页面，包含用户名、密码输入框和登录按钮”，点击”生成原型”按钮；系统解析描述，调用 AI 模型生成 HTML 代码，并在右侧预览区域实时渲染页面
- Result: 用户在 30 秒内看到完整的登录页面原型，可以直接展示给团队成员或保存下来
- Example: 迭代优化原型设计
- Trigger: 用户对首次生成的原型不满意，希望调整布局或样式
- Path: 用户修改输入内容为”创建一个现代风格的登录页面，使用蓝色主题，输入框居中排列”，再次点击生成；系统更新预览区域内容
- Result: 用户看到调整后的新版本原型，可以继续修改或确认方案
- Example: 查看生成的 HTML 代码
- Trigger: 用户满意当前原型，希望获取代码用于开发或分享
- Path: 用户点击”查看代码”或”下载 HTML”按钮；系统展示或导出完整的 HTML 文件
- Result: 用户获得可直接运行的 HTML 代码，可以发送给开发团队或保存备用
6) Competitive Analysis
竞品分析提示词 竞品分析提示词
-
Landscape (who is solving this problem):
- Figma、Sketch 等传统设计工具（设计师和有经验的产品团队）
- Builder.io、Webflow 等低代码平台（希望快速搭建网站的小团队和个人）
- ChatGPT、Claude 等通用 AI 助手（需要代码生成能力的技术人员）
- 手动编写 HTML/原型图片（技术背景用户或时间充裕的团队）
-
Value Thesis (each player’s proposition):
- Figma/Sketch 承诺”像素级设计控制和团队协作能力”，但需要学习复杂的界面和操作逻辑
- Builder.io/Webflow 承诺”可视化拖拽和直接部署”，但功能繁多，上手仍需时间，且偏向完整网站而非快速原型
- ChatGPT/Claude 承诺”对话式代码生成”，但输出格式不统一，缺乏专门的预览和迭代体验
- 手动编写承诺”完全控制和灵活性”，但耗时长且对技术能力要求高
-
Strengths / Weaknesses (experience pros/cons):
- Figma/Sketch 功能全面且输出专业，但学习曲线陡峭，简单原型也需要较长时间完成
- Builder.io/Webflow 提供可视化编辑和即时预览，但工具复杂度高，不适合快速验证阶段
- ChatGPT/Claude 响应快且灵活，但需要用户自己复制粘贴代码并手动打开浏览器预览，缺乏一体化体验
- 手动编写最灵活但效率最低，非技术人员无法使用
-
Our Differentiators (our unique points):
ProtoGen 结合了”即时响应”和”智能理解”的品牌特质，通过自然语言输入+实时预览的一体化设计，让非设计专业人员也能在几分钟内获得专业水准的原型。我们不追求像 Figma 那样的完整设计控制能力，而是专注于”快速验证”场景，让用户用最自然的方式表达想法，并立即看到可视化结果。核心取舍在于：牺牲像素级设计控制，换取极简的学习成本和极快的生成速度。 -
Switching Costs & Risks (migration costs and risks):
用户从传统工具迁移时，可能会担心生成结果不够精细或缺乏自定义能力；从通用 AI 助手迁移时，可能会质疑是否真的比直接对话更高效。为降低切换成本，我们需要在首次使用时展示清晰的示例，并确保生成质量达到”可直接演示”的标准，避免用户因结果不满意而放弃使用。 -
Notes (reference links):
- Figma 官网: https://www.figma.com
- Builder.io 官网: https://www.builder.io
- Webflow 官网: https://webflow.com
Style Guide
Prototype
