# AI 设计方法 > 从用户研究、创意探索到原型与交付，找到适合当前任务的方法。 Canonical page: https://aixdesign.kens-toolbox.com/zh/learn/design-with-ai ## 版权和第三方内容 用 Figma Make 这类工具生成原型时，可能会带进第三方字体、图片或代码包。对外发布前先查一下授权和商用许可，该署名的署名。 ## 数据敏感度 问题发现阶段查公开资料没问题。一旦涉及用户访谈、工单、行为日志或内部文件，就用公司认可的合规环境，或者先把数据匿名化。 ## 1) 问题发现 把用户反馈和研究资料摊开看，找出反复出现的问题。支持它的证据和反驳它的证据都留着。 - 访谈、工单和研究笔记，先把用不上的个人信息去掉。 - 每个关键结论都能找回原文。事实、猜测和还没验证的问题，分开写。 ## Perplexity 查市场背景和公开资料用它。它给的引用要点开原页面看一眼，别直接信。 [Perplexity](https://aixdesign.kens-toolbox.com/zh/tools/perplexity) ## Gemini 带 Google 搜索的通用助手。查公开资料时让它列出来源链接，再逐条点开核对。 [Gemini](https://aixdesign.kens-toolbox.com/zh/tools/google-gemini) ## Claude 把去掉个人信息的研究笔记丢给它归类。让它带上来源编号和反例，优先级你自己定。 [Claude](https://aixdesign.kens-toolbox.com/zh/tools/claude) ## ChatGPT 先让它把用户反馈粗分一遍，你再抽几条看分得对不对。 [ChatGPT](https://aixdesign.kens-toolbox.com/zh/tools/chatgpt) ## Gemini Notebook 手上已经有访谈记录或报告的话，用它归纳主题，还能跳回原文核对。导入网页主要读文字，导入视频得靠字幕。 [Gemini Notebook](https://aixdesign.kens-toolbox.com/zh/tools/notebookllm) ## 2) 问题定义 说清楚是谁、在什么情况下、卡在了哪里。然后定一个标准：做到什么程度算解决了。 - 问题陈述只写用户的困难，别一开始就假定要用 AI。 - 排在前面的假设，想好怎么验证，也想好看到什么结果你会改主意。 ## Claude 把你收集的证据和限制条件给它，让它起草一份问题陈述，你再改。 [Claude](https://aixdesign.kens-toolbox.com/zh/tools/claude) ## NN/g Problem Statement NN/g 教你怎么写问题陈述：盯住用户的困难，别提前塞进解决方案。 [NN/g Problem Statement](https://www.nngroup.com/articles/problem-statements/) ## Atlassian Design Lab 一套团队工作坊的流程。大家一起把问题摆出来，看看不同角色理解得一不一样。 [Atlassian Design Lab](https://www.atlassian.com/team-playbook/plays/design-lab) ## Iceberg Model 问题老是重复出现？用它往下追，看表面现象底下是什么在起作用。 [Iceberg Model](https://untools.co/iceberg-model/) ## Issue trees 把一个大问题一层层拆成能单独研究的小问题。 [Issue trees](https://untools.co/issue-trees/) ## Notion 假设、证据和验证结果记在同一个地方，团队谁都能接着更新。 [Notion](https://aixdesign.kens-toolbox.com/zh/tools/notion) ## Google PAIR Guidebook 帮你判断一个问题适不适合用 AI 解决。从用户需要什么、信不信任、想不想自己掌控这三个角度看。 [Google PAIR Guidebook](https://pair.withgoogle.com/guidebook-v2/patterns) ## Microsoft HAX Toolkit 微软的一套指南，讲 AI 在第一次用、平时用、出错时和用久了之后，分别该做什么、不该做什么。 [Microsoft HAX Toolkit](https://www.microsoft.com/en-us/haxtoolkit/) ## 问题陈述 Prompt 把证据填入 Prompt，让 AI 起草问题陈述，并按给定表头整理。 根据这些证据：【证据】，写一份问题陈述，包括：场景、触发条件、用户目标、怎样算成功、失败了会怎样、AI 在其中是什么角色、风险边界。 表头：场景 \| 触发条件 \| 用户目标 \| 成功信号 \| 失败后果 \| AI 角色 \| 风险边界 \| 出错后怎么恢复 [问题陈述 Prompt](#) ## 3) 方案构思 多想几种解法，放在一起比：对用户价值多大、做起来多难、用户还剩多少控制权。 - 不用 AI、AI 辅助、AI 自动执行，三种方案都想一想。 - 挑出值得验证的方向，写清楚为什么选它、放弃了什么。 ## ChatGPT 让它按「AI 管多少、用户管多少」出几个不同方案，从全手动到全自动都来一版。 [ChatGPT](https://aixdesign.kens-toolbox.com/zh/tools/chatgpt) ## FigJam 想法先全贴在一块画布上分组讨论，再用贴点投票收到一两个方向。 [FigJam](https://aixdesign.kens-toolbox.com/zh/tools/figjam) ## Zwicky box 把方案拆成几个维度，每个维度列几个选项，交叉组合出你没想到的解法。 [Zwicky box](https://untools.co/zwicky-box/) ## AIUXPatterns 一个 AI 交互模式库。拿你的方案对着看，哪些地方用户可能看不懂或不会操作。 [AIUXPatterns](https://aiuxpatterns.com/) ## Shape of AI 把常见的 AI 交互形态都列出来了。看完你能说清自己的方案和别人到底差在哪。 [Shape of AI](https://shapeof.ai/) ## Impact-Effort Matrix 横轴收益、纵轴成本，一眼看出先验证哪个。 [Impact-Effort Matrix](https://untools.co/impact-effort-matrix/) ## IDEO Design Kit IDEO 的方法卡，一张卡一个活动。带团队发散和收敛想法时照着用。 [IDEO Design Kit](https://www.designkit.org/) ## 方案对比 Prompt 给 Claude 用，或者做成 Notion 表格。把几个方向的价值、风险、可控性和退路并排比。 从用户价值、实现成本、风险、可解释性、用户控制权、失败后的退路这几方面比较这些方向。输出一张表，每个方向标上建议：保留、观察，还是砍掉。 [方案对比 Prompt](#) ## 4) 设计实现 用现有组件和视觉规范把关键页面做出来。重复劳动、写文案、改方案，这些让 AI 搭把手。 - 加载中、空白、出错、没权限，这四种状态别漏。 - 批量出素材之前，先生成几个看看版式、字体和品牌对不对。 ## Figma 用组件和变量把主流程做出来，加载中、出错、没权限这几种状态也一起做。 [Figma](https://aixdesign.kens-toolbox.com/zh/tools/figma) ## Figma Agent 直接在画布里帮你改设计。用现有组件迭代的时候最省事。 [Figma Agent](https://www.figma.com/blog/the-figma-agent-is-here/) ## Stitch Google Labs 的 UI 设计画布，可以和 Stitch Agent 实时迭代。生成的预览仍要单独检查响应式、无障碍和数据状态。 [Stitch](https://aixdesign.kens-toolbox.com/zh/tools/stitch) ## IBM Carbon for AI IBM 的设计系统里专门讲 AI 的部分。怎么标出哪些是 AI 生成的、怎么解释它做了什么，可以照着抄。 [IBM Carbon for AI](https://carbondesignsystem.com/guidelines/carbon-for-ai) ## Material Design 3 Google 的设计规范，布局、组件、交互怎么定都有，拿来保证页面之间一致。 [Material Design 3](https://m3.material.io/) ## ChatGPT 让它先写一版报错提示、「信息不够」的说明和恢复操作的文案，你再润。 [ChatGPT](https://aixdesign.kens-toolbox.com/zh/tools/chatgpt) ## WCAG Overview 无障碍的底线标准。标签、说明文字、状态提示怎么写，先对一下它。 [WCAG Overview](https://www.w3.org/WAI/standards-guidelines/wcag/) ## Figma Weave 已经有品牌模板、要批量出素材的时候用。连上 Figma 的 Frame，换文字换图片就行。在 Design 里用能直接出图片和矢量。 [Figma Weave](https://aixdesign.kens-toolbox.com/zh/tools/figma-weave) ## Midjourney 探索视觉方向和情绪板，可以用参考图锁定风格。默认生成结果公开，涉及未发布项目先确认隐私设置。 [Midjourney](https://aixdesign.kens-toolbox.com/zh/tools/midjourney) ## Google Flow 用参考图或首尾两帧先试一个镜头。角色、动作、镜头衔接都对了，再往长了做。 [Google Flow](https://aixdesign.kens-toolbox.com/zh/tools/google-flow) ## 关键状态检查 Prompt 补充项目背景和材料后，将这段 Prompt 复制到 AI 工具中使用。 检查这个页面的默认、加载中、空白、出错和没权限这几种状态。每种状态说清楚三件事：用户看到什么、能做什么、下一步去哪。用现有的组件和文案风格。 [关键状态检查 Prompt](#) ## 5) 方案验证 找几个目标用户做真实任务。看他们在哪犹豫、在哪出错、在哪要人帮忙，回头改方案。 - 任务只说目标，别提示点哪里。 - 常规任务和出错后的恢复都要测。只记看到的，别替用户解释为什么。 ## Figma Make 做一个能点能用的原型，让用户把关键流程走一遍。 [Figma Make](https://aixdesign.kens-toolbox.com/zh/tools/figma-make) ## Figma Prototyping Figma 原型功能的官方指南。把页面连起来，串成一条能测的任务流程。 [Figma Prototyping](https://help.figma.com/hc/en-us/articles/360040315773-Guide-to-prototyping-in-Figma) ## Maze 远程可用性测试。用户在家就能做，你看得到完成率和点击路径。 [Maze](https://maze.co/) ## Lyssna 做首次点击这类小测试。看用户第一下点哪，就知道导航和信息组织清不清楚。 [Lyssna](https://www.lyssna.com/) ## Axe DevTools 在跑着的页面上扫无障碍问题，能自动查的它都查。键盘操作和读屏软件的表现还是得人试。 [Axe DevTools](https://www.deque.com/axe/devtools/) ## WCAG Overview 对着无障碍标准过一遍界面。再补上键盘和读屏软件的测试。 [WCAG Overview](https://www.w3.org/WAI/standards-guidelines/wcag/) ## 可用性测试脚本 Prompt 让 Claude 出一份测试脚本：任务怎么说、怎样算完成、观察什么。 为【功能】写一份可用性测试脚本。包括：任务怎么描述、怎样算成功、怎样算失败，再给 3 个观察提示，专门看用户犹豫和出错后恢复的时刻。 [可用性测试脚本 Prompt](#) ## 6) 设计交接 把页面、组件状态和交互规则讲清楚。开发看完知道你想要什么，做完也能自己对一遍。 - 写明组件从哪来、响应式怎么变、哪些边界状态容易漏。 - 要求写成「做什么、出现什么」。设计改了，第一时间告诉开发。 ## Figma Dev Mode 开发在这里看尺寸、样式和组件信息。你在上面加标注，讲清设计意图和特殊状态。 [Figma Dev Mode](https://help.figma.com/hc/en-us/articles/15023124644247-Guide-to-Dev-Mode) ## Figma MCP Figma 官方的 MCP 文档。让 AI 编码工具读设计稿、往画布写东西、用 Code Connect 对应组件，都从这里开始。 [Figma MCP](https://developers.figma.com/docs/figma-mcp-server/) ## Claude 让它把设计要求改写成「什么情况下、做什么、应该发生什么」的验收条目。 [Claude](https://aixdesign.kens-toolbox.com/zh/tools/claude) ## Notion 组件状态、交互规则、还没确认的问题，列在一页里。 [Notion](https://aixdesign.kens-toolbox.com/zh/tools/notion) ## 验收标准 Prompt 丢给 Claude，出来的结果贴进给开发和测试的规范文档。 根据这份组件规范，用 Given/When/Then（在什么情况下 / 做什么 / 应该发生什么）的格式，给默认、加载中、出错、空、超长文本、空值和没权限这几种状态各写一条验收标准。 [验收标准 Prompt](#) ## 7) 设计走查 在真实页面上查布局、操作和无障碍。挡着用户完成任务的问题先修。 - 只用键盘、只用手机，各把关键任务走一遍。看焦点、缩放和状态提示。 - 自动扫描之外，再人工操作一遍。 ## Nielsen 10 Heuristics 尼尔森十条启发式原则。状态可见、前后一致、防止出错这些，一条条对着界面过。 [Nielsen 10 Heuristics](https://www.nngroup.com/articles/ten-usability-heuristics/) ## WCAG 2.2 无障碍标准的正文。自动扫描过了不等于达标，还得人工查。 [WCAG 2.2](https://www.w3.org/TR/WCAG22/) ## FigJam 走查发现的问题全贴上来，按对用户影响多大排优先级。 [FigJam](https://aixdesign.kens-toolbox.com/zh/tools/figjam) ## Notion 每个问题记四样：截图、复现步骤、谁负责、修到哪了。 [Notion](https://aixdesign.kens-toolbox.com/zh/tools/notion) ## 8) 设计系统 反复用、验证过的组件、样式和交互，收进设计系统。下次不用重画。 - 每个组件写清什么时候用、有哪些状态、什么时候别用。 - 变量或组件改了之后，回头看看已有页面有没有被影响。 ## Figma 组件库、变量和文档放在共享文件里，整个团队都能用。 [Figma](https://aixdesign.kens-toolbox.com/zh/tools/figma) ## Figma Variables 颜色、间距、主题用变量管。改一处，全局生效。 [Figma Variables](https://help.figma.com/hc/en-us/articles/15343816063383-Create-and-manage-variables-collections-and-modes) ## Tokens Studio 管设计 token 的插件。设计和代码之间怎么同步，能定出一套固定流程。 [Tokens Studio](https://tokens.studio/) ## Style Dictionary 同一份 token，转成 Web、iOS、Android 各自要的格式。 [Style Dictionary](https://styledictionary.com/) ## 组件贡献规则 Prompt 让 Claude 起草一份贡献规则，放进团队的设计系统文档。 给设计系统的新组件写一份贡献清单。包括：命名规则、必须有哪些状态、怎么用设计 token、无障碍底线、谁审核签字、什么情况下下线。 [组件贡献规则 Prompt](#) ## 9) 效果追踪 回到最初那个用户问题，看它有没有变好。行为数据和用户反馈一起看。 - 先定三件事：指标怎么算、和什么比、看多久。 - 写明样本量和限制。同一时期的变化不一定是设计带来的。 ## HEART Framework Google 的 HEART 框架。从用户目标出发，在满意度、参与度、留存、任务完成率里挑合适的指标。 [HEART Framework](https://research.google/pubs/measuring-the-user-experience-on-a-large-scale-user-centered-metrics-for-web-applications/) ## AARRR Framework 海盗指标。把获客、激活、留存、收入、推荐拆开看，找到该盯哪一环。 [AARRR Framework](https://www.slideshare.net/dmc500hats/startup-metrics-for-pirates-nov-2012) ## Decision matrix 几个成功标准打架的时候，用它把指标或实验方案摆在一起打分。 [Decision matrix](https://untools.co/decision-matrix/) ## Notion 指标怎么定义、数据从哪来、看多长时间，写下来。不然过两周大家口径就对不上了。 [Notion](https://aixdesign.kens-toolbox.com/zh/tools/notion) ## Amplitude 看用户怎么用、在哪转化。改版前后一对比就知道有没有用。 [Amplitude](https://amplitude.com/) ## Mixpanel 把用户分群，比较各群的漏斗、留存和使用习惯。 [Mixpanel](https://mixpanel.com/) ## Statsig 做 A/B 实验和灰度发布，两个方案谁好用数据说话。 [Statsig](https://www.statsig.com/) ## 效果追踪 Prompt 补充项目背景和材料后，将这段 Prompt 复制到 AI 工具中使用。 这次设计改了：【描述】。用户要完成的任务：【任务】。请建议该看哪些指标、和什么比、数据怎么收。列出可能的干扰因素。没有数据支撑的目标值留空，别编。 [效果追踪 Prompt](#) ## 从这里开始 ## 1. 了解 AI 交互模式 先看 AI 产品里常见的交互模式：怎么建立信任、怎么做到透明、用户怎么控制、出错了怎么办。 [1. 了解 AI 交互模式](https://pair.withgoogle.com/guidebook-v2/patterns) ## 2. 把设计原则用于方案检查 用 HAX 指南把「以人为本」这类抽象原则变成一条条能勾选的检查项。 [2. 把设计原则用于方案检查](https://www.microsoft.com/en-us/haxtoolkit/ai-guidelines/) ## 3. 按当前设计阶段开始实践 找到你现在所处的阶段，按里面推荐的工具、模板和检查项开始做。 [3. 按当前设计阶段开始实践](#) ## 跨阶段方法和资源 ## Google PAIR Guidebook Google 的 AI 设计指南，帮你判断一个 AI 功能对人到底好不好。 [Google PAIR Guidebook](https://pair.withgoogle.com/guidebook-v2) ## Microsoft HAX Toolkit 微软的 AI 交互指南，每条原则都配了能直接用的检查项。 [Microsoft HAX Toolkit](https://www.microsoft.com/en-us/haxtoolkit/) ## Shape of AI AI 交互模式库，好的例子和坏的例子都收。 [Shape of AI](https://shapeof.ai/) ## WCAG Overview 无障碍的底线标准，每个阶段都用得上。 [WCAG Overview](https://www.w3.org/WAI/standards-guidelines/wcag/) ## Related resources - [AI 设计方法](https://aixdesign.kens-toolbox.com/zh/learn/design-with-ai.md): 从用户研究、创意探索到原型与交付，找到适合当前任务的方法。 - [AI 产品体验设计](https://aixdesign.kens-toolbox.com/zh/learn/design-for-ai.md): 探索信任、透明度与用户控制，让 AI 产品更易理解和使用。 - [设计师的 Vibe Coding](https://aixdesign.kens-toolbox.com/zh/learn/vibe-coding.md): 面向设计师的 AI 编程方法、工具与实践参考。 - [作品集打造](https://aixdesign.kens-toolbox.com/zh/learn/build-portfolio-with-ai.md): 用 AI 梳理项目、组织案例叙事，完成作品集并持续打磨。 - [社区经验与复盘](https://aixdesign.kens-toolbox.com/zh/learn/community-field-notes.md): 整理社区分享、设计圆桌与作品集互评中的经验、练习和资源。 - [AI 设计工具目录](https://aixdesign.kens-toolbox.com/zh/tools.md): 探索设计、研究、视觉创作与开发中的 AI 工具。 Part of [Ken's Toolbox](https://kens-toolbox.com/). Account and participant data are not included in this public summary.