Will（will-ai-note）整理的「用 Codex 这个 Agent 经 Figma MCP 直接往 Figma 画布写真实设计」的完整操作手册。覆盖三件事:① 环境搭建——给 Codex 装 Figma 远程/桌面 MCP server（让 Codex 拿到操作 Figma 的权限）+ 装/管理官方 Figma Skill；② 七个核心 skill 的用途+提示词——figma-use（直接改画布:建 Frame/组件/变量/Auto Layout）、figma-use-slides（生成 PPT 内页）、figma-generate-diagram（文字→可编辑流程图/时序图/ER 图）、figma-generate-design（代码/HTML→Figma UI）、figma-generate-library（代码库→设计系统 Library）、prototype-to-figma（运行中的原型→逐帧 Figma 状态稿）、Community skills；③ 组合工作流——代码原型↔Figma 双向同步、底图截图直出界面、交互框架→新界面、扫本地 SVG 图标自动语义匹配替换。每节给 Why/何时用/可复用提示词/坑（如 figma-use 需付费 Full/Dev seat、Dev seat 只能在 drafts、prototype-to-figma 间距有 bug 但能逐帧拆页）。与 [[newtype-ai-coding]] 的分工:那篇讲 AI Coding 工具栈选型与心法,本篇讲「设计/原型工程化」这一段具体到 skill 和提示词的落地。
Will 的 Figma Make(Figma 内置的「描述需求→AI 生成可运行原型/网页」工具)用法笔记重组,面向做 AI 产品、想快速出原型的 PM。覆盖七大功能模块,每个给「怎么用 + Why + 何时用 + 坑」:①基础(三栏界面=对话/预览/代码;四种喂料=打字/贴 Figma 设计/传图/点击预览定点改)。②写 Prompt 与喂附件的最佳实践(用「用户能力清单」定义产品而非给大类名词;先布局后功能;分步迭代;Auto Layout 让 AI 读懂结构;常见版式更容易一次成功;桌面端更稳;别在 prompt 里写密钥)。③模板 template(把定好规范的文件发布成模板,团队复制 remix;guidelines 锁可改范围;创建/更新/取消发布/使用;约束提示词四例)。④把 Figma 设计库风格带入(导出 Library 为 CSS→在 Make 引用→UI 自动套公司配色字体)。⑤加 Guidelines.md(给 AI 立规矩,通用规则 + 设计系统规则 + 组件级规则;少而精胜过堆上下文)。⑥用代码文件喂料(.tsx/.csv/.json/.html 等四类;真数据生成数据看板;复用 shadcn 等开源组件;真文案排版)+ 一键全站重构成 shadcn/ui 的强约束 prompt。⑦加后端(用一句话接 Supabase,做登录/存数据/密钥安全保存;判定口诀「这东西需要被记住吗」)。⑧发布(一键得 figma.site 网址、绑自定义域名走 TXT+CNAME、传 web 字体、SEO/密码保护等高级项)+ 推 GitHub/下载代码。与 [[ai-ux-experience-design]] 分工:那篇是「用 AI 做体验设计的流程方法论」,本篇是「Figma Make 这一个工具的功能操作手册」;与 [[ai-vibecoding-design-process]] 的 vibecoding 心法互为表里。读者是非技术 PM,术语行内括号解释,每节带 Why 与何时用。
Google UX 证书 Course 2(构思)+ Course 3(Build Wireframes & Low-Fi Prototypes)。设计构思(目标陈述公式 + HMW + Crazy Eights + 竞品调研 5 步)+ 用户流程图(4 形状:圆形动作/矩形页面/菱形决策/箭头)+ 故事板(4 元素 + 6 格 + 全景 vs 特写两类)+ 保真度概念 + 线框图(纸质→数字 + 倒推练习 + 行业标准画法)+ 信息架构 IA(组织/层级/顺序 + Dan Brown 8 原则 + sitemap 父子结构)+ Figma 入门 + 格式塔原则(相似/接近/共同区域/闭合/连续/对称)+ 低保真原型(Figma 连接 + 纸面原型 5 好处 + 移动优先)。面向 PM,讲清"从想法到可点击草稿"这一段
Nielsen Norman Group「组织与设计流程」子集 17 篇精华,讲的是「设计过程里你会做出哪些动作、交出哪些东西」。五大主题:①探索阶段 Discovery——发现模式 Discovery Mindset(围绕问题而非解决方案,破锚定效应 Anchoring+确认偏差 Confirmation Bias,3 招:重新定义目标/突出未知与假设/冻结想法 Icebox)、成功探索 7 技巧(先拿支持 buy-in/明确角色规范/写问题陈述 problem statement 不暗示方案/未知优先级聚类投票/时间盒 timebox 反计划谬误,7 周示例计划 1-2周框定+2-4周研究+3-5周分析+6-7周机会与构思/团队全员做研究/共同分析综合 How-Might-We)、CSD 矩阵(确定性 Certainties「We know」/假设 Suppositions「We believe」可测/疑问 Doubts 待研究,行按用户·商业·技术·人·流程·状态·优先级分组,目标=把疑问假设转成确定性)、启动新 UX 项目 4 步(带问题清单进 kickoff/口头讨论暴露信息差/据差距排时间表/为未来铺路,适配敏捷+瀑布);②线框与协作草图——画线框 4 步(定宽高比 1024x768/1920x1080·导航搜索·最大元素标题粗线正文细线图片打叉·细节下拉框单选框按钮)、让干系人画草图魔法公式(粗记号笔 Sharpie+小空间 8 格纸+时间限制每个 5 分钟+随意丑示例=放松的绘图者)、Promptframes(线框+生成式 AI 提示,替代 lorem ipsum 假文,6 步:定上下文角色组织目标语气+写记录提示+跑+协作测试优化+迭代+人工精修,2-3 个变体,只内部用不给高层);③原型保真度——低保真 vs 高保真、可点击 vs 静态原型 7 问决策(能否预设所有响应/能否多次试运行/能否修完所有问题/设计是否稳定/有无人当电脑/页面流程是否重点/是否要观察动态变化),为什么测原型(省成本/避风险/迭代);④设计规格与交付物——设计规格 spec 双件(Figma 设计文件:交互流程·视觉·布局栅格·组件·真实内容·无障碍 tab序alt文本;开发任务单 Linear:目标·范围含与不含·假设·成功指标·Figma链接·注意事项)+与开发对齐 4 技巧(早邀开发/留评论时间/准备折中/记录同步更新)、交付物术语表 50+(亲和图/反角色 antipersona/原型 archetype/CSD矩阵/共情图/体验地图/Kano模型/MoSCoW/RICE/RACI/服务蓝图/角色 persona 含 proto/qualitative/statistical/原型 prototype/纸质原型/促框 promptframe/草图测试 sketch test...)、最常用交付物(86 位从业者调研:静态线框/交互式原型 67%/流程图/站点地图/可用性报告;按受众选:管理层看交互原型+可用性报告+旅程图·客户看交互原型67%+高保真模型47%+竞品分析34%·开发看交互原型63%+流程图55%+样式指南51%);⑤专家评审/工作坊/故事板/问卷——专家评审 Expert Review(启发式评估/独立设计评议/专家评审三类,外部视角更客观+发现盲点,5 组件:优势清单·问题清单·严重性高中低·改进建议·最佳实践,vs 可用性测试互补,每 2-5 年定期评)、工作坊引导 Facilitation(4 目标:全面平等参与 Diverge-Converge/促进相互理解/包容性协作决策/共享责任,6 原则:倾听·包容空间·欢迎即兴·真实透明·不给建议·拥抱建设性冲突,工具包=材料+活动 post-up/亲和图/强制排序/角色扮演/Playback+技巧 沉默/平衡/关联)、故事板 Storyboard(场景+视觉+图片说明三元素,vs 旅程图区别,6 步,低保真便签可重排)、过程中的问卷 Surveys(设计周期 4 阶段发现/探索/测试/倾听,各阶段对应类型:发现期定性问卷+干系人问卷+日记研究/探索期统计角色问卷+竞品客户问卷/测试期任务后 SEQ 单项易用问题+测试后 SUS 系统可用性量表 10 题/倾听期 NPS 0-10·CSAT 1-5·CES,反例=误以为问卷快又简单)。读者=非技术产品经理,术语行内解释,决策导向(何时用/怎么选/反例),保留全部数字。
