将参考图转化为具备标准图层、组件及自动布局的 Figma 界面，传统人工临摹需耗时 3 至 4 小时。如今，借助 Codex 与 Figma 的协同处理，全流程可压缩至 20 分钟内，且生成的基础组件能直接匹配团队设计规范。
Element Plus 设计规范制定者 CE 青年，联合同开源组件下载量超 10 万次的范米花儿，公开了这套无需代码基础即可将静态设计稿转化为线上真实产品的方法论。
课程包含 13 个核心模块、45 节实操内容。从 Codex 与 Figma 的基础配置入手，逐步覆盖设计规范整理、Token 与组件沉淀、参考图还原、页面生成、交互补齐、前端落地及个人网站上线全链路。旨在将日常重复、零碎且易卡顿的操作，梳理为一套可持续复用的标准化流程。
专业的 AI 设计必须具备可修改性、可扩展性与可交付性。以 B 端后台设计为例，若初期缺乏颜色、字号、间距、组件及状态等基础规则，后续面对产品经理新增筛选项、开发询问表格多状态或老板要求深色模式等需求时，每增加一个变动都如同重启项目。
课程将从最关键却易被忽视的环节切入：整理设计规则，确保 AI 能够精准理解并稳定调用。
学员将亲手梳理 Token、组件映射和 Skills，为 AI 生成页面确立依据与边界。此后处理同类页面时，无需反复指令主色、圆角或表格样式，一套能让优质结果稳定复现的规则将留存于系统中。
课程还将阐释 Vibe Coding 的核心思路。设计师无需转型全栈工程师，但需明确 AI 在项目中的角色定位，知晓任务分配边界；在面对复杂业务与真实用户路径时，依然由设计师从体验角度进行关键取舍。
资深导师联合打造
本课程由设计与技术领域深耕多年的两位专家联合研发：
导师团队对设计规范底层逻辑、组件封装及交付标准把控严谨，确保每个知识点均经得起实际业务检验。两者的结合，完美补齐了技术落地与专业审美两大关键环节。
课程体系与实战路径
课程围绕 Codex × Figma 展开，包含 13 个正式模块、45 个细分内容，严格遵循真实工作节奏推进。
基础环境与效率提升
从工具安装、Codex 基础设置及 MCP 配置起步，搭建完整开发环境。随后将 AI 应用于 PPT 制作、竞品分析、问卷调研及设计走查等日常任务，直观感受效率提升。
规范构建与资产沉淀
从零搭建颜色、字体、间距、效果、图标及基础组件体系，学习从既有 Figma 稿件中提取隐藏规则。进而将这些经验转化为可调用的核心资产：规范文档、Token、组件、复合组件、页面模式与 Skills。
高阶实战与作品上线
进入高成就感实战环节：为静态页面补充交互连线、页面状态及交付文档，将 Figma 中的规范、Token 和组件转化为代码资产。最终完成个人网站的设计、部署与优化，产出可公开展示的线上作品集。
零基础落地 AI 设计工作流
课程基于 Codex 加 Figma 组合，支持 Windows 和 Mac 系统。重点展示 AI 在设计领域的 capability 与边界，学员可使用熟悉的同类工具跟随练习。
课程定位为零基础入门，所有代码相关内容均从设计师视角深度解析。配套演示文件与课程文档支持反复演练，并提供专属学习社群交流，已购用户可免费获取后续更新内容。
此外，附赠 Design X Code 实验室权限及设计走查 Skills，助力学员将所学检查方法直接应用于日常项目。
工具会迭代，模型会升级，但一套清晰的设计流程将长久赋能于你。
期待陪你从第一步配置开始，亲手搭建专属设计系统，完成可交互页面，打造可上线的优质作品，彻底升级你的 AI 设计工作流。