于欣烈做产品经理这几年，我前后换了四款原型工具，从Axure到Figma又绕回HTML，身边不少同事觉得我有点折腾。但如果你试过用HTML/CSS/JS直接搭一版高保真原型，再把它推到GitHub上生成一个公网链接发给开发、发给客户、贴在PRD第一行，大概率就回不去了。这篇文章不聊高深前端技术，只讲我如何从IDE环境搭建开始，把一个HTML原型变成一个随手可访问的线上页面，完整覆盖编辑器选型、项目结构、交互写法、Git管理、GitHub Pages公网部署，以及实战中踩过的坑。想用代码做原型的产品经理、独立开发者、小团队技术负责人，都可以直接照着走一遍。
这套流程最大的价值，是让原型不再是一个需要装软件才能打开的专属文件，而是一个谁都能在浏览器里打开的页面。开发想看交互逻辑可以直接F12看代码，客户想看效果只需要一个链接，团队想评审只需要打开同一个地址。它让“产品想法”和“最终实现”之间的距离缩短了一大截。下面我会从最关键的问题开始聊。
1. 为什么产品经理要写HTML原型？这不是返祖，是找对工具
1.1 原型工具的瓶颈
几乎所有产品经理都经历过工具选择的纠结。Axure很强大，可以做出复杂交互和变量判断，但每次评审前都要导出HTML，导出的包体积大、打开慢，而且改一版就要重新导一次。Figma在视觉协作上是目前的天花板，但产品经理在Figma里画原型，总觉得是在“画图”而不是在“做产品”，尤其当你要表达表单校验、列表筛选、状态流转这类真实业务逻辑时，Figma的原型能力反而显得笨重。
HTML原型在解决这些痛点时非常直接：原型本身就是网页，开发打开浏览器就能看到最终效果，还能直接查看DOM结构、CSS样式，很多界面层的沟通成本直接消失。你不需要额外导出，不需要让对方装什么软件，不需要担心版本对不对，一个链接就是最新版。而且HTML是文本格式，天然适合用Git管理，每次改动都有记录，可以随时回溯和对比。
1.2 HTML原型的真实价值
很多人以为HTML原型就是“拿代码画线框图”，这是误解。它真正的价值在交付链路里。交付给开发时，开发可以直接按F12看样式和结构，能更准确地估算工作量，也知道哪些组件可以直接复用；交付给客户时，一个公网链接发过去，不用管对方是Windows还是Mac，也不用管有没有装Axure；交付给团队评审时，把GitHub上的提交记录一拉，能清楚看到原型从V1到V5的每一处变化，再也不用来回比对“哪个版本才是最新”。
还有一个容易忽略的隐藏价值：产品经理开始写HTML后，和前端工程师就有了共同语言。评审会上讨论“这个按钮用主色还是次色”，你可以直接打开CSS变量说“这里改一个变量，全局都会变”；开发说“这个交互成本高”，你可以直接指着一行JS说“其实就是一个显示隐藏的逻辑”。这种沟通效率，是传统原型工具完全给不了的。
1.3 这套流程适合谁
不是所有产品经理都适合这套路线，要分场景。如果做纯C端营销页，或者对视觉创意要求很高的项目，Figma仍然是更好的选择。但如果你经常要交付“能点、能跳转、能看逻辑”的功能原型，而且需要在多人之间流转、需要持续迭代版本，HTML原型就非常值得尝试。尤其是B端产品，页面信息密度高、逻辑复杂，用传统工具搭出来的原型很难还原真实的信息排布，而HTML可以做到和最终界面几乎一样的布局。
这套流程的门槛并不高：会基本的HTML标签、CSS选择器、一点点JavaScript语法就够了，不需要会框架。如果完全零基础，可以先照着一个静态页面模板写，慢慢加交互。团队里有前端工程师更好，他们稍微指导一下，你很快就能上手。我的建议是别把它当成“学习编程”，而是当成“换一种更精确的画原型方式”。一旦换了视角，学习速度会快很多。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 本地IDE选型：把VS Code调教成原型工作台
2.1 IDE怎么选
先解释一下IDE这个词。IDE叫集成开发环境，简单理解就是“写代码的工作台”。写HTML/CSS/JS其实不需要重型IDE，但我依然推荐用VS Code，因为它的插件生态能让写原型这个过程变得非常顺手。免费、跨平台、启动速度快，是目前最主流的选择。你也可以用Sublime Text或者WebStorm，但除非你已经很习惯某一款，否则没必要折腾。
VS Code对产品经理最友好的地方，是它把很多常用功能做成了“开箱即用+插件补全”。比如写HTML标签时，输入一个标签名再按Tab，会自动补全开闭标签；写CSS时，选择器名称会有智能提示；配合Git插件，提交代码、查看修改记录都可以在图形界面里完成。这些能力能大幅减少产品经理学工具的挫败感，让你把精力集中在原型内容上。
2.2 几个必装插件与配置
安装VS Code之后，我建议先装以下几款插件，都是实际体验中很有用的：
- Live Server：本地起一个开发服务器，文件修改后浏览器自动刷新，是原型开发必备。
- Prettier - Code formatter：保存时自动格式化代码，让HTML结构保持一致，不会乱成一团。
- HTML CSS Support：写class属性时自动补全CSS中的类名，能少敲很多字。
- Auto Rename Tag：修改开标签时自动同步修改闭合标签，避免漏改。
- GitLens：在代码行内显示Git提交记录，适合想了解原型版本变化的时候用。
插件装完后，建议打开“文件 -> 自动保存”。产品经理写原型时注意力应该集中在内容