给设计师的零基础 AI 课

👋 嗨，我是范米花儿。

这门「给设计师的零基础 AI 课」由我整理并持续更新。它不是只教你用 AI 生成一张看起来像设计稿的页面，而是从工具、规范、组件、交互到前端交付，带你建立一套设计师可以持续复用的 AI 工作流。

你会从 Codex、MCP 和 Figma 的基础协作开始，逐步走到设计规范、组件体系、页面还原、需求生成、交互补充、代码资产和线上作品集。没有代码基础也可以跟着学，重点是理解 AI 能参与哪些环节，以及设计师需要做哪些判断。

为什么做这门课

这些内容基本都来自大家平时反复问我的问题。

• AI 为什么不按规范生成？规范有了，却不知道怎么让 AI 真正用起来。
• 生成了页面，为什么还是不能用？页面能生成，但组件、状态、交互和交付还不完整。
• 参考图、设计稿怎么真正落地？会参考、能生成，却很难变成可编辑、可继续维护的结果。
• 为什么每次修改都要重新沟通？规则和上下文没有沉淀，每次都要从头解释。
• Image2 生成的效果图，怎么变成代码？又怎么回到 Figma 里继续修改？

所以这套课不会只讲某一个工具怎么用。我更希望大家看到，AI 可以在哪些环节帮助设计师，以及怎样把零散尝试串成一条真正能落地的工作流。

这门课适合谁

• 没有代码基础，但希望把 AI 真正用进设计工作的设计师。
• 已经在用 AI 生成页面，却经常遇到规范不一致、组件不可用、还原度不稳定的人。
• 希望让 AI 读取 Figma、理解设计规范，并辅助搭建组件和页面的人。
• 希望从设计稿或 PRD 继续走到可访问前端页面、原型和线上作品集的人。
• 希望把自己的流程沉淀成规范、组件、Skills 和代码资产的人。

课程按零基础设计师的上手路径组织，不要求你先成为程序员。你需要准备的是一台可以正常使用 Figma 和 AI 工具的电脑，以及愿意跟着案例动手实践。

课程怎么学

课程内容在飞书里查看，课内包含视频、文字介绍、课内文件、Figma 设计稿、前端代码、规范文档，以及实操过程中沉淀出来的一些 Skills。

• 飞书录播课：按模块学习，可以反复回看。
• 配套资料：课程文档、演示文件、设计稿、代码和规范示例。
• 专属微信学习群：学习或实操过程中遇到问题，可以在群里交流。
• 后续持续更新：已购用户可以继续获取新增内容。

课程不是一次性录完就结束。后续更新会来自课内同学的真实问题，也会跟着 AI 工具的新能力继续补充。

你会走过一条怎样的学习路径

新版内容一共包含 14 个模块、65 节录播课。下面先用 5 个阶段说明这条路径，再给出完整课程大纲。

01｜先认识 AI 产品，搭好协作环境

前面会先帮大家建立 AI 产品的基础认知：设计师为什么需要了解 Vibe Coding，常用工具怎么选，常见概念是什么意思，以及怎么和 AI 进行更高效的沟通。

同时会完成 Codex、MCP 等基础配置。后面的很多实操，都需要 AI 读取文件、操作浏览器、连接 Figma 或进入代码环境，所以前面会先把工具环境搭起来。

这一阶段也包含 PPT、竞品截图、问卷调研、设计走查等日常场景，让大家先从具体任务开始用起来。

02｜把设计规范变成 AI 能理解的规则

这一阶段会从颜色、字体、圆角、间距、效果等基础内容开始，逐步走到规范文档、图标、基础组件、复合组件和组件 Skills。

很多 AI 生成问题，根源都在设计规范这层地基上。如果希望 AI 稳定生成规范、一致、可继续扩展的页面，它必须知道颜色从哪里来、字体怎么用、间距怎么取、组件结构是什么，以及设计稿和代码之间怎么对应。

你既会学习从零搭建，也会学习从现有设计稿提取、校准并补齐规范。重点不是做几个变量和按钮，而是理解 AI 时代里的设计规范，怎样影响后续页面生成、组件拼接和前端交付。

03｜让参考图和 Figma 设计稿真正落地

很多同学会遇到类似问题：把参考图或设计稿给 AI 后，生成出来的页面不像；视觉层次不对；背景、图标、装饰元素和切图资源被忽略；图表和动效也不知道怎么处理。

课程会讲参考素材怎么用、网页怎样转成可编辑 Figma，以及已有 Figma 设计稿怎么整理和拆解。你会判断哪些内容适合切图，哪些应该交给代码和数据实现，复杂背景、地图、图表、装饰元素又该怎么处理。

我会用移动端页面和数据大屏作为案例：移动端适合讲尺寸、状态、跳转和交互关系；数据大屏适合讲复杂视觉、图层、图表、动画和切图判断。

设计稿到代码之间，需要设计师做判断、拆解和校准。AI 可以加速，但这些关键判断不能省略。

04｜从需求生成页面，并继续迭代现有项目

真实项目里不一定先有完整设计稿。我们手里可能只有需求、PRD、参考图和组件规范，接下来需要让 AI 帮忙拆解需求、搭建页面并持续修改。

课程会讲怎样从需求出发组织 AI 工作，怎样对齐已有组件库和设计规范，怎样先完成核心页面，再继续推进剩余模块、状态和交互。

你也会看到如何基于开源 UI 库、现有组件、Image2 效果图或真实客户需求，快速生成原型、迭代页面并部署预览。

当最终交付内容从设计稿扩展到可访问的前端页面，设计师的交付范围、协作方式和价值也会随之变化。

05｜把设计规范继续沉淀成代码资产

如果规范只停留在 Figma 里，AI 在生成页面时依然容易发挥不稳定。课程会继续往代码侧走，把 Token、主题映射、基础组件、组件规则、页面壳层和页面模式整理到工程里。

这样 AI 后续生成页面时，就可以优先复用已有规则和组件体系，减少每次从空白页面重新发挥的不确定性。

课程里也会出现组件搭建、数据大屏切图、读取 Figma 组件、网页捕获到 Figma 等 Skills。它们不只是几个现成文件，更像是把一段真实工作流沉淀下来。

我会讲清楚为什么要沉淀 Skills、哪些判断标准值得写进去，以及怎样根据自己的项目、组件库和交付要求继续修改。

新版课程大纲｜14 个模块 · 65 节

课程会持续更新，下面是当前版本的核心章节。部分模块还包含配套案例、演示文件和补充讲解。

01｜认识 AI 产品与协作方式

• 1.1 Vibe Coding 工具选择
• 1.2 AI 常见词汇
• 1.3 AI 高效沟通

02｜AI 设计工具与环境配置

• 2.1 Codex 安装与订阅
• 2.2 Codex 基础设置
• 2.3 MCP 配置

03｜AI 辅助设计的常见应用

• 3.1 AI 制作 PPT
• 3.2 竞品截图
• 3.3 问卷调研
• 3.4 设计走查

04｜从零搭建 AI 设计系统

• 4.1 颜色 / 字体 / 间距 / 效果等
• 4.2 设计规范 MD 文档
• 4.3 图标 / 基础组件
• 4.4 组件搭建 Skills

05｜从现有设计稿整理规范

• 5.1 从设计稿提取规范
• 5.2 绑定并校准设计规范
• 5.3 沉淀完整规范
• 5.4 基于参考补齐组件

06｜用规范和组件生成页面

• 6.1 复合组件搭建
• 6.2 组件映射与 Skills
• 6.3 典型页面生成
• 6.4 页面规则迭代
• 6.5 页面沉淀组件
• 6.6 现有复合组件库落地

07｜用参考图和网页辅助设计

• 7.1 参考素材怎么用
• 7.2 Web 效果图落地
• 7.3 网页转可编辑 Figma
• 7.4 Image2 页面生成

08｜AI 辅助页面交互

• 8.1 交互连线与标注
• 8.2 交互状态补充
• 8.3 生成交付文档

09｜从 Figma 设计稿还原前端页面

• 9.1 移动端页面还原
• 9.2 数据大屏整理篇
• 9.3 数据大屏还原篇
• 9.4 数据大屏动画交互篇

10｜从需求生成页面与迭代现有项目

• 10.1 开源 UI 库生成页面
• 10.2 快速原型与页面迭代

11｜将设计规范转成代码资产

• 11.1 Figma 规范转 Token 与组件
• 11.2 页面模式与项目生成

12｜个人网站与线上作品集

• 12.1 个人网站的设计、部署、优化
• 12.2 线上作品集的四种方式

13｜模型测评与综合案例

• 13.1 上下文与多任务协作
• 13.2 图标资产生成
• 13.3 B 端交互梳理与状态补充
• 13.4 Three.js 数据大屏

14｜课内同学福利

• 14.1 Design × Code 实验室权限
• 14.2 设计走查 Skills

课程会怎么更新

第一类更新来自课内同学的真实反馈。大家在学习和实操过程中遇到哪些问题，或者希望补充哪些场景，我会继续整理进课程。

第二类更新来自 AI 工具本身。AI 产品迭代很快，有新能力时我会先测试；如果确实能改善设计工作流，就会重新整理成视频、文档或案例放进课程。

我希望它不只是一次性的工具教程，而是一个长期可查、可学、可复用的设计师 AI 工作流课程库。

购买前请确认

• 课程为一次付费，已购用户可持续获取后续更新；实际价格以页面购买卡片显示为准。
• 课程交付包括飞书录播课、课程文档、演示文件与专属微信学习群。
• 付款后请保存支付成功截图，添加范米花儿微信并发送截图，由我手动拉入课程群。
• 如遇重复扣款、付款后无法获得课程或内容无法访问，请直接联系我处理。

常见问题

• 课程内主要用到哪些工具？课程演示以 Codex + Figma 为主。
• 对电脑配置有要求吗？Windows 和 macOS 都可以学习；课程也兼顾 Mac Intel 机型。
• 必须用 Codex 才能学吗？课程展示的是 AI 应用能力与边界，也可以用其他适合的工具跟着练习。
• 没有代码基础能学吗？可以，课程就是按零基础设计师的上手路径组织的。

学习与版权说明

课程内容仅供购买者本人学习，禁止录屏、转售、转载或公开传播。