Claude AI UI/UX：从 Brief 到 Figma 的完整工作流程

资源截图

MP4 |视频：h264，1920×1080 |音频：AAC、44.1 KHz、2 Ch
级别：所有级别 |类型： 电子学习 |语言： 英语 |时长：15 个讲座（1h 20m）

你将学到什么

• 端到端运行完整的 UI/UX 项目：从粗略的客户简介到高保真 Figma 设计，以及可供开发人员移交的可点击原型
• 使用 Claude AI (Cowork) 剖析简介、研究业务和用户，并构建角色、功能列表、站点地图和用户流程
• 使用 Claude Design 从一个主规格文件生成高保真 UI，通过视觉反馈对其进行优化，并将整个应用导出为 HTML
• 将 AI 生成的 UI 转变为真正的设计系统：W3C 3 层令牌、Figma 变量、文本和效果样式以及组件库
• 使用Figma MCP自动化Figma：构建具有完整状态的组件，将实例交换到屏幕中，并连接可点击的原型
• 采用“人工智能是引擎，你是导演”的心态 – 使用门检查点，让人工智能在不降低质量的情况下加快速度

要求

• 对Figma有基本的了解（一个免费帐户就足够了）——您不需要成为专家
• 使用桌面应用的 Claude 帐户 – Cowork 需要付费套餐（至少 Pro 版，建议频繁使用 Max 版）
• 无需编码技能 – 一切都通过提示、插件和引导式分步工作流程完成

描述

本课程涉及人工智能的使用。

如果您可以自己完成一份粗略的客户简介并交付一个完整的高保真 Figma 原型，而所用时间比平常少得多，结果会怎样？

这正是您将在这里执行的操作。没有枯燥的理论，没有玩具练习。您将观看一个真实的项目——Pika，一个匹克球场连锁店的移动预订应用程序——从一封含糊的客户电子邮件到一个精美的、基于令牌的 Figma 文件（带有可点击的工作原型）的整个过程。您将与我一起逐步构建它。

自 2011 年以来，我一直是一名设计师。我目睹了市场从 Photoshop 到 Figma 的转变，现在又转向 AI。事实是这样的：掌握人工智能工作流程的设计师现在只需几天就能发货，而以前需要几周的时间。本课程为您提供准确的工作流程。

方法：20 个步骤·8 个阶段·3 个工作区

第 1 区 — 思考（第 1-3 阶段）。界面质量的80%是在第一个像素之前决定的。在 Claude Cowork 中，您将剖析概要、询问业务模式、分析竞争对手、定义北极星指标、构建四个角色，并将其全部转化为功能列表、站点地图和用户流程。

2 区 — 生产（第 4 阶段）。将每一项决策打包到一个主规范文件中，通过真正可视化的规范提示将其提供给 Claude Design，通过屏幕截图反馈完善结果，并将整个应用程序导出为 HTML。

区域 3 — 完成（阶段 5-8）。大多数课程都会跳过的部分。将您的 UI 提取到真实的设计系统中 – 三个 W3C 令牌文件、Figma 变量、文本和效果样式 – 然后让 Claude 驱动 Figma MCP 构建一个带有状态的组件库，将实例交换到您的屏幕中，连接可点击的原型，并将所有内容打包以供开发人员移交。

在此过程中，您将内化让人工智能为您服务而不是与您作对的心态：人工智能是引擎，您是导演。您在阶段之间设置门，判断什么足够好，并处理人工智能自己看不到的边缘情况。

到最后，你将不会有一个包含零散练习的文件夹。您将拥有一个完整的、可随时投入使用的项目，以及一个可在下一份客户简介中运行的可重复系统。

本课程适合谁

• 希望将人工智能引入真实客户工作流程的 UI/UX 设计师 – 而不仅仅是玩提示
• 想要根据真实的客户简介构建完整的、可立即投入使用的应用项目的初学者
• 产品设计师、自由职业者和设计主管对 Claude + Figma MCP 能够在多大程度上实现设计流程自动化感到好奇