从一个[DESIGN.md]插件说起普通人做产品之后真正难的是什么那个关于“AI蓝紫风”的提问事情的起因来自朋友一次很实在的提问。前阵子为了给自己写的一个小工具做介绍页让界面看起来克制、体面一些从网上找了一份带有手稿风的Claude风格DESIGN.md这是一种描述设计系统色彩、字形、圆角、间距等的Markdown规范。把这份文件直接粘贴给大模型要求“照着这个规范生成一个网页”大模型几秒钟内就产出了一个质感不错的静态页面。把网页截图分享出去后一位做设计的朋友发微信询问“这种审美是怎么来的为什么自己用大模型写网页出来的永远是高饱和度、带霓虹渐变和浮夸阴影的‘AI蓝紫风’”这个提问让人意识到很多人并不是不会让AI写页面而是不知道怎么把自己“喜欢的风格”稳定地转化为能交给大模型的输入。日常浏览网页时常觉得某个网站设计极其优雅。若有一个工具能把这个网站的设计系统一键提取成结构化的DESIGN.md作为大模型能听懂的“上下文”很多vibe网页的审美门槛就消失了。跟大模型讨论后做一个浏览器插件的想法自然落地产品名字叫[Design.md] Token Exporter目前已发布到chrome应用商店在chrome商店搜索“[design.md] token exporter”或者直接用chrome打开这个链接[https://chromewebstore.google.com/detail/designmd-token-exporter/jkeicmodgpdpakcoafcppfhdbeppgnaj](https://chromewebstore.google.com/detail/designmd-token-exporter/jkeicmodgpdpakcoafcppfhdbeppgnaj)即可下载体验。技术平权之后门槛转移了这确实是技术门槛被击碎的时代。以前普通人有产品想法第一反应往往是“我不会写代码我做不出来”试错的代价和搭建环境的物理障碍足以在初期劝退大部分灵光闪现。但现在有了大模型的辅助很多想法至少可以先低成本地试出一版。在开发插件的过程中拥有了一个分工明确的“临时产品小队”ChatGPT帮讨论产品方向将模糊的审美概念梳理成具体的功能逻辑Codex扮演主力程序员帮高效率地实现代码、补齐类型定义跑通测试和打包Gemini则是体验顾问站在用户的角度挑战交互细节。这种高效率带来了极强的爽感但很快也发现技术平权降低了普通人做产品的门槛却并没有自动赠送产品判断。AI抹平了一部分实现能力的差距但没有抹平产品判断的差距。当写代码变成一件几乎不需要体力成本的事情时试得越快另一个问题就暴露得越早面对大模型源源不断吐出的方案到底要做什么不做什么欲望膨胀与克制的收缩只要经历过一次用AI从零做产品的全过程就能体会到“被执行力诱惑”的感觉。因为AI写代码太快不需要付出多少精力和心智成本就会本能地想要往产品里塞功能。在最开始的脑暴中想象中的插件极其庞大它应该支持自动分析所有网页、在侧边栏显示实时预览、支持跨页面合并设计、支持云端同步甚至要内置一个完整的Mock交互组件工作台。在这个过程中AI不仅是一个执行者更像一个“推波助澜”的编码器只要下达指令它就会源源不断地吐出成百上千行的代码来实现各种想象。但很快开始在这个无节制扩张的路线图前面退缩自动分析所有页面看似很酷但会在后台无节制地消耗浏览器算力更会让用户产生严重的隐私疑虑没有用户会喜欢一个悄悄扫描自己所有浏览记录和页面数据的扩展预览面板看起来有用但真实网页的CSS极度不可预测如果不准反而会损害用户对核心提取结果的信任更复杂的功能意味着要在manifest.json中申请等高危权限这不仅会增加用户安装时的信任门槛还会大幅延长Chrome商店的审核时间。版本做得越大越容易忘记最初那个最真实的场景。AI很擅长帮把功能加上去但必须学会把产品收回来。预览被砍掉一次关于“信任债务”的取舍在所有收缩的决定中彻底砍掉“预览面板Preview Tab”是最典型的一个案例。为了让用户直观地看到提取出来的设计系统曾在侧边栏开发了一个预览面板其逻辑是根据当前网页提取到的颜色、圆角、间距实时渲染出几个模拟组件按钮、卡片、输入框供用户观察。然而当尝试去分析Claude这种设计极度内敛的页面时预览跑偏了。Claude的页面有着暖白背景、橙色小品牌符号和偏安静的控件但因为大模型提取到的主色调权重问题预览界面直接渲染成了一个粗暴的、高饱和度的蓝色SaaS营销卡片。大模型并没有觉得这是个问题它站在技术的角度极其兴奋地提出了一套复杂的“修补方案”“我们可以把颜色拆成brandAccent和actionColor无可信primary时按钮自动走中性色通过判断页面语义把模板从Landing营销页面切换为App聊天界面……”从技术实现上看这个补救方案条理清晰完全行得通但从产品的角度看这个功能开始变得异常复杂甚至偏离了它原本的初衷。大模型给了很多可行路径但意识到这条路径不值得继续往下走了于是决定直接删掉Preview这一整套逻辑。大模型在短暂的“明白”后迅速转入执行花了几分钟帮彻底从Side Panel中删除了Preview所有的入口、import语句、关联组件以及测试断言侧边栏的最终打包体积从之前的80KB降到了50KB。这个决策背后是对“信任债务Trust Debt”的权衡。在做设计系统工具时如果生成的预览是不准确的用户就会直觉地认为底层的tokens提取也是不准确的这会让一个本来应该帮助用户建立信任的功能反过来制造怀疑。删除Preview不是偷懒而是为了让MVP最小可行产品更诚实让产品重新回到Tokens提取和交付的核心价值上。权限与报错在规则的边界内解释清楚另一个体现产品判断的地方是对Chrome严苛的activeTab权限机制的妥协。在activeTab机制下出于安全保护侧边栏内部按钮的点击不被视为合法的显式授权手势这意味着如果用户在新打开的页面上直接点击侧边栏的“Analyze”插件会因为拿不到临时授权而频繁报错。对于工程师和大模型来说这只是Chrome MV3的正常安全逻辑但对于用户来说这就是“按钮坏了程序有Bug”。为了让体验更顺畅大模型在搜集资料后提出过很多方案比如在Manifest中加入右键菜单权限contextMenus或者引入全局快捷键commands。这些方案在技术上确实能避开限制但在产品上会增加权限申请成本和Chrome商店的审核难度同时也会增加用户安装时的安全疑虑。最终决定不新增任何Manifest权限而是去优化错误提示和状态保持。产品体验不总是靠增加能力解决的有时候是靠在既定边界内把事情解释清楚。与大模型一起完成了这套纯前端的容错和状态流转逻辑保持稳定状态顶部状态栏永远只显示Last analyzed: example.com等稳定状态如果分析出错状态栏会自动回滚到上一次的稳定文案绝不用晦涩的Chrome技术堆栈报错去打扰用户多态错误卡片如果用户直接点击且缺少授权在内容区展示简洁的Authorization required英文警告卡片如果是在系统保护页面如chrome://则展示专用的Page cannot be analyzed卡片保护历史结果如果已经有了分析结果刷新时即使报错也决不用报错卡片覆盖已有的数据而是只在按钮下方展示一小行紧凑的inline notice动作反馈去除Emoji规范视觉将原本跳脱的和符号全部换成lucide-react中标准的Lock和AlertCircle矢量图标保持高质感与界面一致性固定按钮宽度将Analyze按钮用Tailwind固定为w-40 min-w-[160px]宽度避免在“Analyze current page”、“Analyzing...”和“Refresh analysis”文案流转时产生尴尬的UI跳动。没有去挑战浏览器的规则但在规则的边界内给了用户最诚实、最透明的解释。临时小队不会自动给出正确产品回顾整个过程多模型协作的真实价值是让普通人第一次拥有了一个随叫随到、不知疲倦的“临时产品小队”ChatGPT提供方向碰撞Codex跑通实现、测试、打包与发布前审计Gemini捕捉交互和体验上的细节。但这个小队并不会自动给一个正确的产品。AI就像一个拥有无限精力的匠人它会源源不断地提供可能性。如果不加控制它会很乐意用代码帮盖出一座由伪需求堆积而成的庞大废墟。在这个过程中最核心的依然是人类的判断力。要决定哪些可能性可以进入产品哪些方案虽然技术上优雅但产品上多余以及何时在既定的规则边界前体面地妥协。大模型抹平了普通人与工程师之间关于代码实现的鸿沟却也因此把另一个问题推到了台前技术平权让普通人拿到了做产品的入场券但它没有自动赠送产品判断。降噪后的体会这次经历让人意识到技术平权并不是让每个人都自动做出好产品它只是把人们从枯燥的底层语法和语法纠错中解放出来让人们得以用极低的成本去验证自己的观察。以前想法可能止步于“我不会写代码”现在真正的问题变成了能不能定义一个足够小、足够真实的场景并在AI极其热情的建议里冷静地守住产品的边界。正如在这款插件中最终决定砍掉预览坚守最简权限用极其克制的tokens提取和干净的交付去解决最纯粹的问题。当代码越来越便宜取舍就越来越贵。Vibe Coding的终点不是“让AI写代码”而是把人类的审美、经验沉淀和产品边界变成可以交给大模型的可执行上下文。而在这个过程中那个决定“不做些什么”的判断本身才是人类留给产品最独特的锚点。