- 如何利用 AI 编码工具快速构建数据驱动的可交互原型
- 在 Figma 画布上使用 AI 代理进行深度方案探索与细节打磨
- 为 AI 协作伙伴（如 Claude）构建清晰的设计上下文文档系统
- 理解未来软件交互的趋势：从命令到意图、从静态到情境感知
背景：为什么设计师需要掌握新的 AI 工作流
传统的产品设计流程通常是线性的：从需求文档（PRD）到设计稿，再到开发实现。然而，AI 工具的兴起正在打破这种序列。如今，原型（Prototype）正在取代 PRD，成为沟通想法、验证假设的核心载体。
这种变化源于两个关键趋势。首先，AI 编码工具（如 Codex）让设计师和产品经理能够快速构建出包含真实数据和逻辑的、可交互的原型，从而在早期就压力测试复杂的多步骤流程。其次，设计工具本身（如 Figma）也集成了 AI 代理，能够在画布上直接生成变体、检查设计系统一致性，甚至编写占位文案。
更重要的是，软件交互的范式正在发生根本性转变。过去，我们学习软件的语言（菜单、参数）；未来，软件将学习理解我们的意图、手势、甚至情绪状态。这意味着设计师不仅要产出界面，更要思考如何构建能理解上下文、自适应并提供人性化协作体验的系统。
准备：开始前你需要什么
要实践本教程中的工作流，你需要准备相应的软件、账号和对设计上下文的梳理。
软件与工具
核心工具是 Figma 及其相关功能。根据资料，你需要能够访问：
- Figma 设计文件：用于探索和细化设计。
- Figma Make：用于构建高保真、可交互的原型。资料中 Accor 和 Merkle 的案例都使用了此功能。
- Figma 的 AI 代理：集成在画布上的 AI 助手，用于生成变体、检查设计系统等。
- Codex 到 Figma 的桥接：用于将 AI 编码工具（如 Codex）中生成的前端 UI 代码导入 Figma 画布进行协作和决策。
此外，你可能还需要一个 AI 编码工具（如 Codex）来构建功能性原型，以及一个类似 Claude 的 AI 协作平台来管理设计上下文。
设计上下文素材
与 AI 高效协作的关键在于提供清晰、结构化的上下文。你需要提前梳理以下信息，并准备以文档形式（如 .md 文件）组织：
- 产品定义：要解决的问题、目标用户、核心流程、当前状态与项目范围。
- 设计指导：品牌原则、设计系统规范（如设计令牌）、视觉语言。
- 协作规范：你希望 AI 如何与你合作，例如如何给出建议、使用何种语言风格。
1用 AI 编码工具构建可交互原型
当你的设计涉及复杂的逻辑、数据依赖或多步骤交互时，静态设计稿的局限性会立刻显现。这时，最好的方法是直接构建一个可工作的原型。
AI 编码工具（如 Codex）降低了快速构建功能性原型的门槛。你可以模拟后端数据和业务逻辑，创建一个能真实响应用户操作的环境。FloQast 的 UX 经理 Benjamin Ellis 正是用此方法测试了一个复杂的会计对账流程。
他的目标是：将原本需要跨多个页面完成的任务，整合到一个页面上。他使用 AI 编码工具，基于真实客户的工作流模拟了数据和后端逻辑，构建了一个可点击的原型。这个原型允许团队测试“完成一步触发下一步”的真实场景，并立即发现了那些在表面流程图上看起来合理、但在真实数据逻辑下会崩溃的交互问题。
操作要点与提示词
在 AI 编码工具中，你需要清晰地描述你想要构建的界面功能、交互逻辑以及所需的数据结构。
- 目标：快速验证复杂流程的可行性，提前暴露仅靠设计稿无法发现的交互漏洞。
- 输入：清晰的功能描述、关键的用户流程、必要的数据字段和状态。
- 输出：一个包含模拟数据和基本交互逻辑的前端代码原型。
- 后续：使用 Codex to Figma 功能将生成的 UI 导入 Figma 画布，供设计和产品团队进一步评审与细化。
// 示例：向 AI 编码工具描述一个任务管理界面的逻辑
Build a single-page task management interface for accountants. It should:
- Display a list of tasks, each with a status (Pending, In Progress, Blocked, Resolved).
- Show which tasks are blocked because they depend on other tasks being completed first.
- Allow users to click a task to see details and take action (e.g., approve, request info) without leaving the page.
- Simulate a backend where completing task A automatically updates the status of task B that depends on it.
- Use realistic placeholder data for account names, amounts, and dates.2在画布上使用 AI 代理进行深度探索
在确定了基本方向或从代码导入了初始界面后，下一步是在设计画布上进行深度探索和细化。Figma 的 AI 代理可以成为你的强力探索伙伴。
Merkle 的助理创意总监 Easton Thomas 在为一个电信客户重新设计网站信息架构时，就充分利用了这一能力。面对需要探索大量布局方案的挑战，他先手动绘制了 7 个粗略方向，然后让 AI 代理对其中的一个布局生成了多达 50 个变体，从而彻底穷尽了该方向下的组合可能性。
这不仅大幅提升了探索的广度，还让他能以更高的信心做出决策。在选定方向后，他继续利用 AI 代理完成了一系列耗时但重要的细化工作。
- 生成布局变体：针对一个基础布局，快速生成大量不同排列组合的方案。
- 编写真实占位内容：用符合语境的文案替换“Lorem Ipsum”，让设计稿对利益相关者更具可读性。
- 检查设计系统一致性：让 AI 代理检查画布上的元素是否符合已定义的设计令牌和规范。
- 查漏补缺：请求 AI 代理评审设计，标记可能被忽略的细节，如屏幕阅读器可访问性考虑。
- 编写开发标注：自动生成描述交互逻辑和设计规范的标注，附在画布上。
// 对 Figma AI 代理的提示词示例
"Generate 10 variations of this product grid layout, experimenting with different card sizes, image ratios, and information hierarchy.""Write realistic placeholder product names and descriptions for these hotel room cards, targeting a luxury audience.""Review this form design and flag any potential accessibility issues for screen reader users.""Apply our design system tokens (primary color, spacing units, typography scale) to all frames in this file."3为 AI 构建清晰的设计上下文系统
要让 AI 真正成为得力的设计协作者，而不是一个需要反复纠正的新手，关键在于提供持续、清晰且结构化的上下文。这要求设计师将产品思维显性化地文档化。
多位实践者（如 Carmen Rincon, Ron Yang）都发展出了自己的“上下文系统”。其核心思想是：为不同类型的信息分配明确的存储位置，避免将所有内容混在一个冗长的指令中。
例如，Ron Yang 的框架使用一个简短的 CLAUDE.md 文件作为索引，指向五个独立的上下文文件：公司、产品、用户画像、竞品和当前目标。Carmen Rincon 则建议将“项目指令”（Project Instructions）控制在 200-400 词，只包含 AI 在每次对话中都必须记住的顶级规则，而将产品详情、设计令牌和可复用流程分别放在“项目知识”（Project Knowledge）和“技能”（Skills）中。
- 分离关注点：将永恒规则、项目知识、可复用流程和临时对话指令分开管理。
CLAUDE.md作为索引：保持简短，列出所有相关的上下文文件及其作用。product.md定义核心：详细描述问题、用户、流程、原则和范围。- 设计指导单独存放：将设计系统、品牌指南等视觉规范放在独立文件或“项目知识”中。
- 固化流程为“技能”：将常用的设计评审、组件生成等流程打包成可调用的“技能”。
| 文件/模块 | 内容 | 目的 | 实践者建议 |
|---|---|---|---|
| CLAUDE.md / Project Instructions | 核心规则、协作方式 | 为每次对话设定基调和边界 | 保持简短（200-400词），作为索引 |
| product.md / Project Knowledge | 产品定义、用户、流程、原则 | 提供决策所需的业务和用户上下文 | 详细但结构化，便于更新 |
| design_system.md | 设计令牌、组件库、品牌指南 | 确保输出符合视觉规范 | 与产品文档分离，独立维护 |
| Skills | 可复用的设计或工作流程 | 提高重复性任务的效率 | 将成功的工作流打包固化 |
// 示例：CLAUDE.md 文件内容结构
# Project Context Index
Please read these files to understand our project:
- `context/company.md`: Our mission and values.
- `context/product.md`: The problem we're solving, our users, and core flows.
- `context/personas.md`: Details about our primary user segments.
- `context/design_system.md`: Our color, typography, and spacing tokens.
# How to Work With Me
- Structure your recommendations with a brief rationale first.
- Use language that our customers would use, avoid jargon.
- When making assumptions, state them clearly so I can confirm or correct.案例分析：Accor 如何用 Figma Make 构建品牌化的 AI 体验
全球酒店集团 Accor 的设计团队曾面临一个典型挑战：如何为其奢华品牌打造一个与众不同的、AI 驱动的网页体验？他们不希望只是简单地添加一个通用聊天机器人，因为这无法体现品牌个性。
品牌主设计师 Justine Grave 使用 Figma Make 在几小时内构建了一个高保真、可交互的原型。她创建了一个能根据用户输入动态重组内容的网页：当用户搜索“高尔夫”时，页面会围绕拥有高尔夫球场的酒店、策划的高尔夫活动和相关体验重新组织布局。
这个原型包含了微交互和过渡动画，并通过 Figma MCP 服务器与品牌设计系统保持连接，确保了视觉上的一致性。通过这个可交互的、情感化的原型，团队能够向利益相关者生动地展示 AI 如何提升而非削弱品牌体验，从而围绕这一新愿景快速建立共识和信心。
这个案例的核心启示在于：在 AI 时代，表达一个体验创意的最有力方式，往往不是文档或静态稿，而是一个能让人直接感受其动态和情境的原型。
- 挑战：为奢华品牌设计非通用的、体现品牌个性的 AI 体验。
- 工具：Figma Make（用于构建高保真可交互原型）。
- 关键动作：构建了能根据用户输入（如“高尔夫”）动态重组页面内容和布局的原型。
- 成果：通过可感受的原型，快速与团队和利益相关者对齐愿景，建立决策信心。
展望：未来交互设计的前沿趋势
除了具体的工作流工具，资料[1]和[3]还描绘了软件交互更宏大的演进方向。作为设计师，理解这些趋势有助于我们设计面向未来的产品。
从命令到意图，从静态到情境感知
未来的界面将更懂得“察言观色”。控件只在需要时出现：选中一个元素并说出意图，相关操作选项才会浮现，完成后自动消失。这减少了菜单寻找的认知负荷。
系统会解读复合输入：结合你的语音、光标轨迹和手势（如在屏幕上画圈并说“把这个移到这里”）来理解意图，就像人类同事一样。
界面能感知并适应情绪状态：通过打字速度、触笔压力、面部表情等信号，判断用户是否处于决策疲劳或心流状态，并相应简化选项或保持安静。
从 2D 屏幕到空间与触觉交互
硬件也在推动交互变革。如资料[4]所示，Maxon 为新的 MacBook Pro PROLED XDR 为 Cinema 4D 和 ZBrush 添加了触控支持，让 3D 创作有了更直接的“手感”。同时，通过 Apple Vision Pro 的 Spatial Preview，设计师可以在沉浸式空间中以真实比例预览 3D 设计，这对于建筑可视化、展览设计等领域意义重大。
这些趋势的共同点是让软件交互变得更自然、更人性化，减少人与机器之间的“翻译”成本。设计师的角色正在从“界面布局者”转向“人机对话”和“情境体验”的塑造者。
总结与要点
AI 并未取代设计师，而是重塑了设计工作的流程、工具和产出形态。要在这个新时代保持竞争力，你需要掌握一套新的组合技能：既要有构建可交互原型的技术理解力，也要有利用 AI 进行创意探索的操作能力，更要有将产品思维结构化以赋能 AI 的系统思维。
核心转变在于，设计正从一个以交付静态成果为终点的阶段，转变为一个以持续探索、验证和塑造动态体验为中心的过程。 拥抱这些新工作流，你不仅能提升个人效率，更能带领团队更早、更准地抵达出色的产品解决方案。
要点速览
- 原型即沟通：用 AI 编码工具快速构建包含真实逻辑的原型，取代静态文档作为决策依据。
- 画布即实验室：利用 Figma AI 代理进行穷举式布局探索和自动化细节打磨，大幅扩展创意选项。
- 上下文即燃料：为 AI 协作者建立清晰、分层的设计上下文文档系统，是高效协作的前提。
- 意图即界面：未来交互设计将更关注理解用户意图、情境和情绪，而非呈现固定控件。
- 空间即画布：关注触控、空间计算等新硬件带来的直接、沉浸式创作和预览体验。
- 设计师的新角色：从界面美工转变为产品思维的阐释者、人机对话的构建者和动态体验的塑造者。
