以前咱们想把一张参考图转换成带有标准图层、组件和自动布局的 Figma 界面。
熟练设计师手动临摹通常需要 3 到 4 个小时。
现在通过 Codex 和 Figma 的协同处理，整套流程可以在 20 分钟内完成！
并且生成的每一个基础组件都能直接匹配团队的设计文档。
最近参与制定过 Element Plus 设计规范的 CE 青年，与全网开源组件下载量超 10 万次的范米花儿，公开了这套方法。
不需要懂代码，就能把静态设计稿直接变成线上运行的真实产品！
用 13 个模块、45 节实操内容，从 Codex 与 Figma 的基础配置开始。
逐步完成设计规范整理、Token 与组件沉淀、参考图还原、页面生成、交互补齐、前端落地，再到个人网站上线。
带大家把日常那些重复、零碎、容易卡住的操作，整理成一套能持续复用的流程。
真正专业的 AI 设计，应该经得起修改、经得起扩展，也经得起交付。
举个最常见的场景：你正在做一套 B 端后台。
AI 很快给出一个数据概览页，结构完整、视觉也不错。
可产品经理第二天说，筛选项要增加；开发同学问，表格加载态、空状态、异常状态在哪里；老板又补了一句，要做深色模式。
如果前面没有颜色、字号、间距、组件、状态这些基础规则，后面每加一个需求，都会像重新开一个项目。
所以这门课会从最容易被忽略、也最关键的部分开始：
把设计规则整理好，让 AI 能读懂，也能稳定调用。
你会亲手梳理，通过 Token、组件映射和 Skills，让 AI 在生成页面时有依据、有边界。
以后再做同一类型页面，你不需要反复告诉 AI“主色用哪个”“按钮圆角多少”“表格该长什么样”。
这一套能让好结果反复出现的规则，已经留在你的系统里了。
我们还会带你认识 Vibe Coding 的基本思路。
设计师不需要突然变成全栈工程师，但需要知道 AI 在项目中的角色，知道什么任务适合交给它，什么环节必须由设计师来判断。
但面对复杂业务和真实用户路径，设计师依然要站在体验的角度做取舍。
这门课由两位在设计与技术圈子里深耕多年的老师联合打造：
他们对设计规范的底层逻辑、组件封装和交付标准的把控极其严谨，让课程里的每一个知识点都经得起实际业务的检验。
这两位老师搭档，相当于同时补齐了技术落地与专业审美的两块拼图。
整门课围绕 Codex × Figma 展开，包含 13 个正式模块、45 个细分内容。
按真实工作节奏，一步一步往前推进。
你会从工具安装、Codex 基础设置和 MCP 配置开始，把环境搭起来。
接着，你会把 AI 用到 PPT、竞品截图、问卷调研、设计走查这些日常任务中，先感受到它到底能帮你省下多少时间。
从零搭建颜色、字体、间距、效果、图标和基础组件，也会学习如何从已有 Figma 设计稿里提取那些原本隐藏的规则。
还会带你把这些经验整理成可调用的资产：规范文档、Token、组件、复合组件、页面模式与 Skills。
之后，你会进入更有成就感的实战环节：
给静态页面补上交互连线、页面状态和交付文档，把 Figma 中的规范、Token 和组件进一步转成代码资产。
最后完成个人网站的设计、部署和优化，做出可公开展示的线上作品集。
课程用 Codex 加 Figma，Windows 和 Mac 都能学。
课程重点展示的是 AI 在设计里能做到什么、边界在哪里，你完全可以用熟悉的同类工具跟着练。
没有代码基础也能学，这门课的定位就是零基础，所有跟代码相关的部分都会从设计师的视角讲清楚。
配套演示文件和课程文档可供你反复练习，还有专属学习群随时交流，后续更新的内容已购用户都能直接拿。
另外还附赠 Design X Code 实验室权限和设计走查Skills，把课程里学到的检查方法直接带回日常项目里用。
工具会继续变，模型也会继续升级。
但一套清晰的流程，会一直留在你手上。
希望陪你从第一步配置开始，亲手搭起自己的设计系统，完成可交互页面，做出能上线的作品。
欢迎来给自己的AI设计工作流做一次彻底的升级~
复制本文链接 文章为作者独立观点不代表优设网立场，未经允许不得转载。
发评论！每天赢奖品
点击 登录 后，在评论区留言，系统会随机派送奖品
2012年成立至今，是国内备受欢迎的设计师平台，提供奖品赞助 联系我们
用户体验增长
已累计诞生 795 位幸运星
发表评论 为下方 2 条评论点赞，解锁好运彩蛋
↓ 下方为您推荐了一些精彩有趣的文章热评 ↓