包含50个组件的完整设计规范、30页高保真移动端界面、1个动态数据大屏,外加能直接发链接给 HR 预览的线上个人网站。
现在一个零代码基础的设计师独立操作,不到1天就能全部搞定了!
只需要用上最近超火的 Codex × Figma 自动化工作流。
零基础打通 Codex × Figma AI 设计全流程
不用手敲一行代码,通过简单的 MCP 协议连接,AI 就能直接接管你的画布。
很多朋友想尝试这套工作流,却总是在第一步就被终端报错、环境配置和 MCP 协议劝退。
为了帮大家彻底跨过这道门槛,参与制定过 Element Plus 设计规范的 CE 青年,与全网开源组件下载量超 10 万次的范米花儿一起打磨出这门《「零基础」Codex × Figma AI 设计全流程实战课》。
抛开晦涩的编程概念,用设计师最熟悉的语言带你从零搭建环境,跑通这套工作流!
构建标准化 AI 设计系统
两位讲师真正站在日常业务交付的视角,解决落地难题。不需要你有前端开发背景,课程从最基础的软件安装、终端唤醒教起。
手把手带你打通 Codex 与 Figma 的 MCP 连接通道,把复杂的技术配置拆解成傻瓜式的点击操作。
很多 AI 生成的界面没法看,是因为缺乏规范约束。这门课会带你亲手梳理色彩、字体层级、Design Token 与核心组件库,给 AI 装上设计规矩,让它产出的每一张界面都严格对齐你的团队标准。
自动化提效与前端直出
直接切入设计师最头疼的日常琐事:批量截取竞品长图、生成用户调研问卷、一键排版汇报 PPT。甚至是拿着上线页面和设计稿做像素级的 UI 走查比对,直接帮你把加班时间砍半。
你将学会直接调用开源 UI 库、喂入参考图生成完整业务页面,并把 Figma 里的移动端界面和复杂数据大屏,直接转化为带真实交互的网页代码。
最终完成个人独立网站的设计、性能调优与域名上线!
打造可交互的个人作品集
酒香也怕巷子深。在这个时代,一份冷冰冰的 PDF 作品集远不如一个可交互、能直接体验的个人独立网站更有说服力。
课程的最后一个大章节,将把前面学到的所有技能串联起来。你的手里将直接多出一个可以发在朋友圈、写进简历里的线上个人网站链接。
项目驱动的五阶段实战教学
整门课采用边学边练、项目驱动的保姆级教学模式,五大阶段层层递进,每一步都有实操案例带你跑通。
先带你直接用 Codex 调起自动化工作流,输入指令即可批量抓取竞品核心链路截图,将测试环境链接与 Figma 原稿进行交叉比对。
在实战环节,你将体验最爽快的前端直出工作流。选中做好的 Figma 移动端界面或数据大屏图层,通过 Codex 直接编译成结构清晰的前端代码。
丝滑的微交互过渡,还是实时跳动的数据图表,都能在浏览器里真实跑起来。
掌握可持续复用的系统级工作流
追着每天都在冒头的新工具四处试错,不如先把一套可持续复用、能真正落地的系统级工作流跑通。
整门课以 Codex + Figma 为核心载体。掌握这套方法后,你完全可以平滑迁移到 Cursor、Windsurf、Claude Code 等任何同类 AI 工具中跟练和使用。
课程后续新增的前沿玩法与模块,老学员一律免费解锁。
还会给大家赠送独家设计走查 Skills。
把讲师沉淀的自动化检查脚本直接带回你的日常工作项目,一键揪出规范与页面瑕疵。
跟着这套保姆级实战课一步步操作,你也能把天马行空的创意,亲手变成触手可及的线上产品。

