不写一行代码,我用AI做完了一个产品的完整设计:流程+工具+10 个实战技巧

这不是一篇讲 Figma 插件、也不是讲怎么用 Midjourney 出图的文章。

这是一份"我作为产品/设计的人，把AI当协作伙伴，2小时搞定一个内部 AI 产品首页"的完整复盘。流程、工具、踩过的坑、做过的选择，全部摊开。

不管你是 PM、设计师，还是只是好奇"AI 到底能不能帮我做产品"，看完这篇你应该能直接上手。先收藏，需要的时候随时找到，后转发给周边的小伙伴，大家一起用AI做好产品。

对AI感兴趣的记得关注鱼叔

一、先看结论：AI 能帮你做到什么程度？

我做的是一个面向公司内部的AI助手产品——你可以理解成"内部版的 ChatGPT，它可以用来查数据、做分析、写报告、沉淀skill、做任务等"。

最终产出包括：

一份可直接在浏览器跑起来的HTML设计稿（不是图片，是真能点能交互的原型）
一份完整的产品设计方案文档（16 节、含版本演进、设计原则、参考产品对照表）
期间做的所有取舍记录与替代方案

整个过程我没有打开 Figma，没有写一行 CSS、HTML。我只做了两件事：提需求 + 当裁判。

二、整体流程：四步法

很多人误解，以为 AI 协作就是"我说一句它做一句"。其实真正高效的协作是有节奏的:

① 定调子（产品定位 + 目标用户）

② 搭骨架（信息架构 + 主要页面）

③ 抠细节（一个组件一个组件磨）

④ 出文档（沉淀方案、记录决策）

每一步对 AI 的"使用方式"都不一样。这是我这次最大的体感。

三、工具清单：极简，但够用

我这次只用到三样东西：

一个能写代码并直接预览的 AI 编程助手（任意一款主流 AI 编程助手都行，关键是它要能直接读写本地文件、能跑命令）
浏览器（看效果）
参考产品的截图（用于沟通"我要这种感觉"）

就这些，不需要 Figma，不需要 Sketch，没有任何专业设计工具。

四、10 个让 AI 设计产出可用的关键技巧

下面这些是真实复盘出来的、最值钱的部分。每一条都来自一次具体的反复。

技巧 1：第一句话不要说"帮我设计一个 XXX"

❌ 反例："帮我设计一个 AI 产品的首页"

✅ 正例："这是一个公司内部的 AI 数据助手，目标用户是不会 SQL 的业务方。他们最高频的诉求是：临时查个数、看一个指标的异动原因、把分析结果导出给老板。请帮我先列出首页应该承载的 5 个核心入口，并说明你的取舍。"

差别在哪里：第二种问法逼着 AI 进入"产品经理模式"而不是"美工模式"。它会主动追问、列出方案，而不是直接给你一张漂亮的废图。

技巧 2：永远先列参考产品，再谈风格

凡是涉及风格、布局、交互，直接报产品名比形容词管用 10 倍。

❌ "做一个简洁的、现代的、有科技感的下拉菜单"

✅ "下拉菜单的视觉风格参考 Linear 的命令面板，交互参考 Notion 的 / slash 命令"

我这次首页的不同模块分别参考了：

整体布局：ChatGPT + Claude
侧边栏收起态：Cursor、Claude Code
技能列表卡片：Claude 的 Skill 卡片
搜索/命令入口：Linear、Slack
历史会话区：Perplexity

AI 对这些产品都有记忆，你不用解释它们长什么样。

技巧 3：给"具体可执行"的反馈，而不是"感觉不对"

这是绝大多数人和 AI 协作低效的根因。

❌ "这个图标感觉太小了"

✅ "这个图标和上面一行的导航图标尺寸明显不一致，请按上面那一行的视觉权重来——既要图标大小一致，也要字号、字重、颜色都对齐"

具体到什么程度？看下面这个真实的对话回合就懂了：

我：「历史」文字稍微大一点，也加个 icon
AI：（加了icon，改成 12px）
我：明显和其他的不一样，再调大一点
AI：（最后改成 15px + 字重 600 + 加深颜色，终于对齐了）

核心经验：视觉权重 ≠ 字号。字号、字重、颜色三者一起调才有用。把这条规则告诉 AI，它下次就不会再只调字号了。

技巧 4：每个组件单独开一轮迭代，不要一次改一片

新手最容易犯的错：一次性提 5 个修改意见，结果 AI 改完之后 5 个地方都只对了一半。

正确节奏：

一次只聚焦一个组件（比如：现在只搞侧边栏的收起态，现在有需要加什么交互，可以参考哪些产品，有哪些选择……）
改完看效果
满意了再做下一个

慢吗？不慢，返工才是最慢的，聚焦能做的更好。

技巧 5：让 AI 解释"为什么这么做"

这条非常被低估。

每次大改动后，可以加一句："简单说一下你做这个选择的理由，以及有哪些你考虑过但放弃的替代方案。"

收获是双倍的：

你能学到设计逻辑
AI 给的解释会暴露它的思考漏洞，你能及时纠偏

我这次最后那份设计文档，大部分内容其实就是把这些"为什么"沉淀下来。

技巧 6：多方案要让 AI 摆出来，而不是替你选

很多决策没有标准答案。比如：

侧边栏是常驻还是默认收起？
模型选择放在头部还是放在输入框旁边？
历史会话用列表还是用时间线？

正确做法：让 AI 列出 2-3 个方案，每个写清楚 trade-off，然后你来选。

我这次输入框按钮布局就是这么定的——AI 列了 ChatGPT、Claude、Perplexity、Kimi、豆包五家的做法对比，每一家的优劣都列清楚，我看完之后才拍板。

这个过程别嫌麻烦。让 AI 替你做选择，最后产品的灵魂就不是你的。

技巧 7：用"真实内容"填占位文本

不要让 AI 写"标题 1、标题 2、列表项 A"这种假内容，直接给它真实业务场景：

历史会话条目：「Q1异常订单根因分析」
推荐 Agent：「数据探查助手」「归因分析师」
技能卡片：metric-define.md、data-insight.md

真实内容有两个隐藏好处：

暴露空间问题——假内容都很短，真业务文案常常超长，假内容测不出截断/换行问题
暴露语义问题——你会发现某些设计在真实场景下根本讲不通

技巧 8：异常态、空态、加载态、长文案——主动提

AI 默认只画"理想态"。你必须主动追问：

这条内容为空时显示什么？
任务还在跑的时候是什么样？
用户标题特别长（30 字）会截断成什么样？

异步任务完成了但用户还没看，要怎么提醒？

最后一个问题让我加了一个非常有用的设计——未读 + 已完成的小红点 + 绿色"已完成"标签的双重提醒。这是 AI 主动想不到的，必须人提出来。

技巧 9：每隔几轮做一次"全局体检"

迭代久了，会出现"局部好看、整体割裂"的情况。每隔 5-10 轮迭代，做一次：

"请把整个页面从头到尾审视一遍，找出视觉/交互上不一致的地方。"

我这次靠这个发现多个问题：

两个地方都叫「历史对话」（重复了）
不同下拉菜单的圆角不一致
一个 icon 用了线性风格、隔壁却是填充风格

技巧 10：最后一步——把所有决策沉淀成方案文档

这一步 90% 的人会跳过，但其实是整个流程里 ROI 最高的一步。

让 AI 做这件事：

"请把我们这次所有的产品定位、信息架构、设计原则、参考产品、关键决策、未解决问题整理成一份完整的 HTML 设计方案文档。要求：分章节、有版本演进时间线、每个设计决策都说明参考来源和取舍理由。"

为什么必须做？

沉淀方法论：下次做类似产品直接复用
方便协作：发给开发/老板看，比甩一个 HTML 链接专业 10 倍
暴露漏洞：写文档的过程中你会发现"咦这个地方好像还没想清楚"

我的方案文档有 16 节，包含 15 款参考产品的对照表，AI 写，我负责判断。

五、多方案探讨的真实例子

举一个最有代表性的：「侧边栏到底要不要默认收起？」

方案	优点	缺点	参考产品
A. 默认展开	信息全、操作明确	占空间、首屏拥挤	ChatGPT、Notion
B. 默认收起	给主区域更多空间、视觉干净	新用户找不到入口	Cursor、Claude Code
C. 智能判断	老用户收起、新用户展开	实现复杂、状态难调试	（目前没有产品这么做）

最终选 B。理由：

用户高频操作是和 AI 对话，主区域宽度越大越好
不是新用户产品（公司内，培训成本低）
收起态保留图标 + tooltip，找东西不会迷路

这个决定能不能反悔？能。所以记到设计文档的"遗留与待办"里：3 个月后看数据，如果新用户首次进入找不到历史会话的比例 > 20%，改回 A 方案。

AI 协作做产品的最大好处：决策成本极低，你可以随时改回去。

六、给不同角色的建议

给产品经理：

把 AI 当最廉价的专业高级原型工具用，省掉跟设计师反复对齐的成本
你的核心价值不是"做设计"，而是"判断设计好不好"——这件事 AI 替不了你
把每次决策的理由都说出来，AI 会用同样的逻辑推下去

给设计师：

AI 让你摆脱了画图的体力活，可以把精力放在系统性思考上
把你脑子里的设计 token（间距、字号、配色、动效）讲清楚，AI 会严格遵守
多让 AI 出方案、做对比，你来当评委——这正好是设计师最擅长的事

给只是好奇的普通人：

真的不需要会写代码。你需要的是清楚自己想要什么
第一次试，挑一个你天天用的小工具（比如个人记账页面）开始
关键不是 AI，是你能不能把需求说清楚

七、最后想说

这一次的经验，让我意识到一件事：

AI 时代的产品设计，门槛不在"会不会用工具"，而在"能不能把'好'说清楚"。

以前我们对"好"的判断藏在设计师手里、藏在 Figma 的细节里。现在它必须以文字、参考、规则的方式被显式表达出来——因为只有这样 AI 才能执行。

这其实是一件让产品设计更回归本质的事：

你到底为谁做的？
你为什么这么排版？
你考虑过哪些替代方案？
你最不能让步的是什么？

回答得越清楚，AI 给你的产出就越好。

如果你看到这里还在犹豫要不要试，我的建议是：今晚就开一个 AI 编程助手，挑一个你自己用的小工具，按这篇文章的四步法走一遍。

几个小时后你看到的东西，会让你重新理解自己的职业。

如果这篇对你有帮助，欢迎转给身边正在转型的 PM 和设计师朋友。大家对什么感兴趣，可以留个言，下一期分享给大家。

欢迎关注，为大家分享AI新动态、新机会、AI新认知，一起在AI时代快速成长。