AI 沟通手册
理解产品的底层逻辑
认识界面、数据与业务规则如何一起工作。
01 / 07理解产品的
底层实现逻辑。
每个业务都有底层结构。沟通前先看清。
这一节走 3 步：贴标签 → 切粒度 → 喂 token。
大屏 = 切图 + 组件 + 数据
D · 探索贴标签不要让 AI 一次性写整页
A · 颗粒度对照<div class="product-1"> <img src="a.jpg" /> <h3>风衣</h3> <span>¥899</span> </div> <div class="product-2"> <img src="b.jpg" /> <h3>毛衣</h3> <span>¥299</span> </div> <div class="product-3"> ... </div> .product-1 { width: 280; ... } .product-2 { width: 280; ... } .product-3 { width: 280; ... } /* 改个间距 = 改 3 处 */
Design Token：必须按顺序投喂
C · 顺序装备直接让 AI "生成一套设计规范"是空话。先喂颜色，再反复确认字号、圆角、间距、投影。 下面这 5 件事，必须按顺序点 —— 这就是你跟 AI 反复对齐的过程。
销售运营卡片
用 ASCII 草图
跟 AI 对齐结构。
长 prompt 永远翻车。
左边挑模块 → 中间排版 → 右边喂给 AI。
ASCII 是设计师跟 AI 对齐最快的语言。
完成后点底部"喂给 AI 渲染" →
左边的草图越清楚，
右边的页面越对得上。
你以为 AI
能不能做这些事？
Codex + Figma MCP 能干到什么程度，你以为的和实际差多远？
给下面 12 题各选一个。
从一个 idea 到
可落地页面。
AI 不是单点能力 —— 把它们串起来才有效。
按正确顺序，把 5 个能力填进 5 个槽位。
别让 AI
重新造轮子。
网上能找到的，就别让 AI 自己想。
给下面 4 个需求各选一条路 —— 看代价。
好 Prompt 不是
写，是拼。
结构化指令 = 身份 + 背景 + 任务 + 约束。
从 4 个抽屉里各挑一个，看一个完整 prompt 是怎么拼出来的。
六句话收尾。
这本沟通手册的全部内容 —— 浓缩成 6 句话带走。
底层结构
一个页面 = 静态切图 + 动态组件 + API 数据。沟通前先看清三层。
颗粒度
开口要小：先 Card 组件，再凑成页。AI 不会主动抽组件，但它会抄你的颗粒度。
Token 顺序投喂
颜色第一，其它一档档加。一次别灌满 —— 反复确认才稳定。
ASCII 画给 AI 看
长 prompt 翻车。先用 ASCII 把脑里那张图画出来，再让 AI 翻译。
工作流编排
素材先行 → 实现紧跟 → 细节补完。会用 AI 是会编排，不是会发指令。
结构化 Prompt
身份 + 背景 + 任务 + 约束，四件套缺一不可。好 prompt 是拼出来的。
下次跟 AI 沟通前，
问自己这六件事。
这本手册没有"读完就掌握"的捷径 —— 把这六个动作做成你的肌肉记忆，AI 的产出才会稳。