AI 辅助 UX·交付阶段(用 AI 做排版设计·板式转代码Figma·方案评审·展示AI价值 + will 自制 UX 指标拆解 skill)

Will 的 UX 工作流分 6 段(Discover / Define / Ideate / Experience Design / Deliver …),本篇是最后一段 Deliver(交付)。

先理解这一阶段的"交付"指什么:它不是"把 Figma spec 交给开发"那种交付(那个在 Google UX 证书 / 测试·迭代·设计评审·交付 §四 handoff)。Will 这里的 Deliver 是把一个做完的项目蒸馏成「作品集页面 + 面试话术」交付出去——给招聘方/评审看。所以这一段所有 AI 技法的共同母题是两件事:(a) 把信息重新排成"会讲故事、一眼能看懂"的版面/视觉,(b) 把"我和 AI 怎么分工干的"讲清楚。理解这个母题,下面每个技法才不会显得零散。

对 PM 的意义:这套技法 90% 可以直接搬到你的日常——把一页烂 PPT 喂给 AI 重排成几个版本、把竞品截图转成可编辑 Figma、用一个 skill 对自己产品界面做"指标驱动评审"、把项目复盘写成"问题→判断→方案→结果"的汇报话术。它本质是"用 AI 做信息可视化 + 价值表达"的提示词库,跟你做不做 UX 无关。

一、排版生成:从一张旧版式到多个新方案

任务:手里有一页做得一般的 PPT / 杂志排版 / 信息图,想用 AI 重排成几个差异很大的新版本,再选一个出图。Will 把它拆成 4 步,关键是"先动内容、再动版式、最后才动视觉"——三件事严格分开,不要一句话让 AI 同时干。

Step 1 · 1:1 提取旧版式的文字与结构(不丢字、不加字)

先让 AI 把旧图里的所有文字原样抠出来并理清层级,这一步只搬运、不创作。

可复用提示词骨架: 任务:提取并重构这张图里的所有文本内容。严格规则:不得添加任何新词 / 不得删除任何已有词 / 不得改写或重述含义 / 只允许重组和翻译 / 必须完整保留所有原始信息。流程:① 提取所有可见文本 → ② 识别层级(标题 / 分区标题 / 支持性要点 / 标签注释)→ ③ 推断关系(相关内容分组、父子结构、检测步骤序列)。输出:清晰的层级缩进结构,保持原始信息密度,不加解释、不加评论、不加超出原文隐含结构之外的结构。

Why "只搬不创":这一步的产物是后面所有步骤的"内容地基"。如果地基里 AI 已经偷偷改了措辞/删了要点,后面排得再漂亮都是错的。先锁死内容,再谈形式。
Will 的实测:最终出 HTML 的效果,Claude 写出来的比 ChatGPT 的 image2 更好(指还原版式时)。

Step 2 · 内容方向探索(只动叙事,禁止碰版式/视觉)

把 Step 1 的纯文字喂回去,让 AI 想 3-4 个差异足够大的重构方向——差异要体现在"叙事框架根本不同",不是详略或措辞的区别。

可复用提示词骨架: 内容方向探索(本轮只做这一步,不许碰版式/视觉)。 ① 先用一句话点破:原文真正想传达的"那一件事"是什么。 ② 判断这段内容的要害在哪(数据太多?结论太弱?逻辑断层?图形没讲清层级?),据此设计 3-4 个差异足够大的方向——方向必须从内容本身长出来,不套固定模板。 ③ 可用编辑手段(按需取用,不必都用):增补缺失的上下文/因果、砍重复与次要、重写标题与叙事框架、把核心数据提炼到极致、换更易懂的图形语言、用层级/放大缩小制造视觉焦点。 ④ 每个方向输出:一句话策略名 + 150-200 字说明(为什么适合这段内容、留什么砍什么补什么、为什么观者会更容易秒懂)+ 重构后的实际文案预览(新标题/核心数字/说明/洞察)。 ⑤ 结束时问我选哪个(可组合),不要做任何版式描述。

Why 分两步:人很容易一上来就纠结"放左边还是右边、用什么色"。Will 这一步强制把"这页到底想说什么、用什么叙事框架"先吵清楚——叙事定了,版式才有意义。这跟写 PRD 先定"要解决什么问题"再谈功能是同一个道理。
反例:直接说"帮我把这页 PPT 排好看点" → AI 给你一个换了字体的同款,因为你没逼它重想叙事。

Step 3-4 · 选向 → 出图

在对话里选定方向(可叠加额外需求,如"数据可视化试试漏斗形态"),让 AI 产出该方案的出图提示词;再用 Create image + 16:9 出新排版图。

二、优化排版 / 迁移视觉风格(只换皮,不动骨)

任务:已经有一个版式方案,想"换一套视觉风格"——但信息结构、文字、元素位置一个都不能动,只迁移颜色/字体/间距/形状语言。两种用法:

用法 A · 给一张视觉参考图,把风格迁移过来

可复用提示词骨架(风格迁移): 任务:通过应用参考图的视觉风格,对当前布局重设计。输入:图1=当前布局(待重设计)/ 图2=风格参考图。 严格保留(不得更改):布局结构 / 信息层级 / 所有内容与文本 / 元素位置与间距逻辑 / 内容分组与关系。 风格迁移(应用自图2):颜色体系(主/辅/背景)/ 字体系统(风格/字重/层级)/ 间距节奏 / 形状语言(圆角/几何)/ 阴影层级空间感 / 边框分割线样式 / 背景风格(纯色/渐变/纹理)/ 整体构图风格。约束:不新增内容 / 不删内容 / 不改布局结构 / 不加装饰性噪音 / 不出水印 / 不加额外文本。输出:高保真视觉重设计版,完整保留原结构与内容、全面应用新视觉。

适用边界(Will 提醒):这套只适合"排版优化",不适合做 UI(UI 有交互态/组件规则,不是换皮能解决的)。字号若偏小可手动再调。

用法 B · 没参考图,直接调成"资深编辑型设计师精修过"的克制感

当你只是觉得"太满、太吵、不高级"时,可以用一组具体的、可见的精修指令(不要含糊说"高级一点"):

可复用提示词骨架(克制化精修): 请大胆且清晰可见地应用以下调整: 整体字号降低 1-2 级(更小的字 = 更多负空间 = 更自信、更有编辑感)/ 收紧字号层级比例(标题与正文更接近,克制的层级而非张扬对比)/ 大幅增加区块间留白(第一眼甚至略显"过于宽松")/ 加大容器内边距让布局呼吸 / 移除所有非结构性必要的分割线(用留白替代)/ 剩余边框统一减细为 0.5px / 背景简化为低对比微层次 / 标题行高收到 1.1-1.15 / 正文行高 1.6 / >24px 标题加轻微负字距。最终应比原稿更安静、更有空间感、排版更克制——仿佛由一位资深编辑型设计师精修过。

Why 要给"可见的具体指令":AI 对"高级感/精致"这种形容词没有共识,但对"字号降 1-2 级、行高 1.6、边框 0.5px"有精确反应。把审美翻译成可执行参数,是让 AI 稳定产出"看起来贵"的关键。

三、板式转代码 & Figma mockup(把一张图变成可编辑源文件)

任务:看到一张好看的竞品页/杂志页,想把它变成可编辑的 Figma 文件或 HTML(而不是只能截图)。Will 的链路:单页图 → 还原提示词 → HTML → 反推 Figma。

Step 1 · 让 AI 把单页图写成一份"还原模式"提示词

这一步产出的是一段给 Figma Make 用的英文还原指令,核心是"禁止 AI 自由发挥,逐元素精确描述"。

可复用提示词骨架(生成还原提示词): 分析这张版式截图,生成一份可直接粘进 Figma Make 的还原提示词。要求: ① 用英文输出(Figma Make 对英文更准) ② 先识别开本规格:判断长宽比 → 输出为可滚动长页面,每个版面作为独立 Section 垂直堆叠,每个 Section 保持原始比例、宽度 100vw ③ 文字必须完整保留:原文照搬,一字不改不省略不用 placeholder;描述每段文字的字号层级(Display/Heading/Subheading/Body/Caption/Label)、字重、颜色 hex、对齐、位置 ④ 容器形态精确描述:圆角卡片?色块背景?细线边框?无边框留白?并标明背景色/边框色/边框粗细/圆角/阴影 ⑤ Information Graphic 还原:箭头(方向/线型/颜色/样式)、连接线、图标(形状+颜色,SVG 或 Unicode 近似)、图表(结构/标签/配色);底图摄影图留空白占位框标比例 ⑥ 提取色值:页面背景/容器背景/边框/主文字/次文字/品牌强调色 ⑦ 间距系统:Section padding、元素间 gap/margin 关系、文字到容器边的内边距 ⑧ 开头加还原模式声明:禁止自由发挥/重新设计、禁止替换容器形态、禁止改文字——明确这是版式还原不是 UI 设计输出:直接给英文提示词正文,按 Section 分块,每页一段。

Step 2-3 · 先出 HTML,再反推 Figma

Step 2:把上面的提示词给 Claude,先生成 HTML。
Step 3:两条路进 Figma Make——方式1 把 Step1 的提示词喂 Figma Make 出可编辑 Figma;方式2(更准) 把 Step2 的 HTML 喂 Figma Make,反推出可编辑 Figma 源文件。
Why 绕一道 HTML:直接"图 → Figma"AI 容易脑补;先落成 HTML(结构化、可校对),再让 Figma Make 吃 HTML,等于给了它一份精确的结构契约,还原度更高。
边界:只能还原版式部分;有特点的照片/插画是还原不了的(会留占位框)。建议所有步骤在同一个 Claude 对话里做,保持上下文连贯。

四、信息图语义提取 + 视觉重绘(剥逻辑 → 换骨架 → 套风格)

任务:有一张信息图(流程/关系图),想换一种完全不同的视觉风格重画,但保留它的逻辑。难点:如果直接"换风格",AI 会连原图的箭头样式/形状一起复制,换不彻底。Will 的解法是先把"逻辑"和"视觉"彻底剥离。

Step 1 · 只提取语义,不许出现任何视觉词

可复用提示词骨架(语义提取): 分析这张信息图,提炼它的语义结构,用于重画一个视觉完全不同的版本。提炼: ① 核心主体:图中有哪些"角色/节点"?只描述它们代表的含义(如"一个用户""一个平台"),不描述形状/图标风格/大小/颜色。 ② 关系与流向:谁指向谁?单向还是双向?关系性质(传递/阻挡/分流/汇聚)?只描述逻辑,不描述箭头样式。 ③ 整体叙事:这张图想说明的核心结论,一句话。 ④ 布局方位:主体大致位置(左/中/右,上/下),作为构图参考,不涉及尺寸间距。输出:结构化文字,不输出任何视觉描述词(无颜色/形状/线条样式/字体)。

Step 2 · 让 AI 发 5 个差异巨大的造型方向

可复用提示词骨架(造型发散): 基于以下语义结构【粘贴 Step1 结果】,生成 5 个完全不同的造型创意方向。要求: 每个方向 2-4 句连贯描述(像导演给美术指导讲概念),重点讲整体造型语言、版式构图逻辑、主体间空间关系; 优先抽象结构/几何语言/系统图示/力学隐喻/信息建筑/极简版式,可引文化或自然隐喻但停留在造型层(不出现人物或具象叙事); 方向间差异要足够大(不是同款微调),不描述颜色/线宽/字体,每个方向给 2-4 字短名。

Step 3-4 · 出线稿 → 套视觉风格

Step 3 出线稿:选一个方向,用统一规格出黑白线稿——纯白背景 / 16:9 / 所有线条统一 2px 黑色单线 / 不用填充色块,只靠线条轮廓和空间关系传达信息。
Step 4 套风格:Redraw the shapes from Image 1 using the visual style and feel of Image 2(用图2的视觉风格重绘图1的造型)。附加可选:Do not include any text(不要文字)或 Use small-size text, express everything in English(小字号全英文)。
Why 先剥光成纯逻辑:这是整套技法里最关键的一招。把图退化成"无视觉的纯逻辑骨架",再重新长出新视觉,才能真正换风格而不是换皮;否则 AI 总会被原图的视觉惯性拖着走。同理也可见 AI 辅助 UX·体验/UI 设计阶段(用 AI 生成美观UI·设计系统·配色·交互状态·微文案·UI转代码Figma·响应式的提示词与流程) 里"先结构后视觉"的思路。

五、用 will-ux-metric-teardown skill 做指标驱动的方案评审

这一节单独介绍 Will 自制的一个 Claude Skill(在源料里以 .skill 文件随附)。它把"对着界面挑毛病"这件事,强制绑死在业务指标上。

它干嘛的

输入一张或一组界面截图(多张 = 同一流程的连续步骤),输出一份指标驱动、按优先级分层、对应到具体元素、带改进方案的 UX 评审报告(teardown)。它的核心信念一句话:"体验问题的优先级,由它对业务指标的影响决定,不由设计师的审美洁癖决定。" 一个排版小瑕疵和一个让转化掉 30% 的默认选项错误,不该并列。

它怎么跑(三段式,严格按顺序)

反推产品上下文:在挑任何毛病之前,先从界面可见证据反推出 ① 商业模式(Freemium/交易/订阅/广告/B2B,必须引界面证据)② 业务目标 + 具体 KPI(激活率/首单转化/D7 留存/ARPU,给 3-5 个)③ 体验目标 + UX 指标(任务成功率/Time-to-Value/错误率,给 3-5 个)④ 核心用户群(2-4 个)⑤ 用户首要任务(第一人称 JTBD)。
锁定北极星指标:从业务目标里挑唯一一个当前对生意最关键的指标(结合产品阶段:早期看激活/获客,成熟期看留存/变现),写清楚"为什么是它"。后面 Tier 1 的所有问题都咬住它。
按三层优先级找问题(先穷举完一层再进下一层,不设配额、不凑数):
- 🔴 Tier 1 — 直接拖累北极星:每个问题必须画因果链 具体 UI 元素 → 用户行为 → 北极星如何下降,有依据则估量级。降级铁律:说不出它伤害哪个 KPI,立刻降到 Tier 2/3。Tier 1 几乎从不是颜色字号问题,而是默认值/信息排序/缺失指引/问题 framing/被藏起来的关键信息/决策时刻缺失的信任信号。
- 🟠 Tier 2 — 影响其他指标:点名影响哪个次要指标。
- ⚪ Tier 3 — 纯设计层面:可用性/视觉层级/无障碍/一致性/微文案,无直接指标关联。某层没问题就留空,不硬填。
- 编号跨层连续(01、02、03…),让读者一眼看出谁更重要。报告里这就是源料备注的 "Tier 1-x,数字越小优先级和影响越大"。

它好在哪 / 怎么用(Why)

Why 先反推商业模式再挑毛病:大多数"设计评审"是审美评审,东好西好和稀泥。这个 skill 逼你先把"这门生意/这页到底要什么指标"搭出来,后面每条问题才有优先级锚点——这正是它跟普通"挑挑毛病"的本质区别。
怎么用:把这个 .skill 装进 Claude(或直接把它的工作流当提示词),丢界面截图;如果你知道产品背景(商业模式/在优化什么指标/约束),一并给它——skill 明确"用户比像素更懂自己的产品",有背景就用背景锚定,背景与界面冲突时把冲突本身当成一个问题指出来。
配合:这是"用 AI 当资深评审"的单兵工具;而设计评审会议怎么开(3 角色 / 描述问题不给方案 / 反馈转行动)是人际协作问题,见 Google UX 证书 / 测试·迭代·设计评审·交付 §三。两者互补:skill 帮你会前把界面拆出一份带优先级的问题清单,会上再走人际流程。

六、在项目中展示 AI 能力与价值

任务:做完一个项目,要在作品集/面试里讲清楚"哪些活我交给了 AI、哪些是我判断"——既不能假装全是自己干的,也不能让人觉得"那不就是 AI 干的,你干了啥"。Will 用一个提示词把项目自动拆成每个 UX 阶段的三块产物。

可复用提示词骨架(AI 价值表达教练): 你是一位 UX 职业表达教练,帮设计师在作品集/面试中展示 AI 协作能力。【第一步】我提供项目内容(文字/阶段记录/PDF),完整阅读,不要反问,直接分析。【第二步】自动识别项目涉及哪些 UX 阶段,逐一处理。【第三步】每个阶段输出三块: ① AI 介入了什么:这阶段哪些动作交给 AI?用哪类 AI 工具做了什么事?(工具名融入描述,不单独罗列) ② 面试口述话术:1-2 句自然口语,体现"AI 执行 / 我判断"的分工感,像真人在讲不像写报告。 ③ 书面证据(这一页 PPT 放什么):只输出与 AI 使用直接相关的证据——形态(截图/对比表/标注图/流程图/引用片段)+ 具体内容(截什么/标什么/对比什么,要具体)+ 一句排版提示(怎么放能让人一眼看出"这是人机协作")。 判断标准(关键):这条证据如果去掉 AI 还有没有存在必要?有 → 不符合要求、不要输出;没有 → 保留。某阶段没有 AI 介入就直接写"本阶段无需 AI 相关证据页"。项目未提及 AI 处就按通用做法补充并注明。

Why 那条"去掉 AI 还成立就别放"的判断标准最值钱:它防住了最常见的翻车——把一堆普通设计图硬说成"AI 做的"。只留"没有 AI 就不存在"的证据,才能真正证明你的 AI 协作能力,而不是注水。
配套:Will 还给了一份《AI 时代 UX 需要哪些能力》的能力地图,把 AI 认知/研究/设计/验证/协作 5 大模块拆成几十项二级能力,每项都用同一句式"输入什么 → AI 执行什么动作 → 产出什么物"——可当作上面"AI 介入了什么"的灵感清单(例:UI 视觉优化 = 上传界面截图 → AI 分析层级/留白/对齐 → 输出优化方案;ROI 表达 = 输入体验优化动作 → AI 映射到业务指标 → 输出 ROI 逻辑链)。

关于本阶段其余材料(交付物示例,非 AI 技法)

源料 Deliver 区还含一批作品集/面试的"成品示例",它们是上面技法的产出物而非技法本身,这里只点到、不展开:

面试话术逐字稿范例(如《突破 2.1% 转化天花板》SaaS 官网个性化项目、知乎问答详情页"短容器"重构项目)——都是"问题→调研洞察→技术挑战→方案→数据结果→复盘"的叙事结构,正是 §六提示词想帮你产出的东西。
《UX 在项目中遇到的非专业挑战》——10 类挑战(多方目标不一致/优先级不清/跨文化/预算资源/短长期矛盾/趋势压力/情感疲劳/合规/平台约束/长期维护),每类给"前期问题拆解 + 处理方式 + 面试口述模板"。母题反复是一句:先统一目标、再谈方案;先判断问题类型、再动手——可当面试软技能题库。

范围说明(诚实标注):Deliver 区的 Cognition / Case Study / References 子区(面试常见问题、优秀/资深 UX 设计师参考、纯排版示意图)更偏求职表达与排版样例素材,不是"用 AI 加速设计"的可复用技法,故未逐条蒸馏;本篇聚焦在能直接复用的 6 类 AI 技法 + 1 个自制 skill 上。