AI DESIGNER / CREATIVE TECHNOLOGIST
方法、实验与可复用工作流
38 篇真实教程，记录宋夏天Dazzle 如何把 AI 放进 UI、可视化、动态网站和创意技术项目。
2026 教程档案
AI 生成包装全案
从包装 3D 效果图、动态展示和 Logo，到品牌周边与广告短片的一套完整 AI 视觉流程。
AI 生成大屏系统选择页
从 AI 概念图和动态背景出发，在 Figma 中完成图标、卡片拖拽与横向滚动交互。
AI 生成多风格大屏 + Figma 动效导出
用同一套大屏结构探索多种视觉方向，并制作可交付的图表和装饰动效。
AI 生成人物模型 + Figma 模型导入
用 AI 生成带贴图的 3D 人物模型，经由 Spline 嵌入 Figma，形成可交互的设计资产。
AI 生成建筑生长全息效果
从工业建筑素材生成，到建筑生长视频和 Figma 全息扫描动画的完整制作过程。
Figma 年度提效插件
整理抠图、换色、动效导出、位图转矢量、图片变形和 3D 模型导入等高频插件。
AI 生成大屏登录页
用 AI 生成智慧城市背景、加载动画和常态扫描效果，再在 Figma 中完成登录交互。
年度 Behance 搜索词
围绕 3D Dashboard、HUD、FUI、Dashboard UI 和 HMI 建立更精准的设计灵感检索方法。
AI 搭建 UI 组件库
使用 AI 编程工具和 Vibma，从零搭建组件库，或基于已有规范生成变量库。
AI 直出 3D 可视化
用 Google AI Studio 生成可交互电机 3D Demo，并持续优化模型质感、分步引导和控制面板。
如何搭建自己的 AI 信息网
通过抓源头、盯头部、挖关注和主动搜索，建立持续更新的 AI 信息获取系统。
AI 直搓 3D 大屏
生成工业机械臂仿真大屏，并通过多轮截图反馈优化抓取逻辑、材质和数据联动。
AI 生成 UI
从文本或参考图生成 B 端和 C 端界面，继续修改风格，并导出设计稿与代码。
AI 生成动态官网
使用 Google Stitch 从设计规范到动态网页，再通过案例拆解建立更稳定的动态官网生成方式。
Figma MCP：AI 根据组件库生成 UI
安装 Figma MCP 与 Skill，让 AI 读取现有组件库并在指定 Figma 文件中生成界面。
Figma + Codex AI 生成组件库
比较 Markdown 和结构化文件两种方式，让 Codex 在 Figma 中建立可持续维护的设计系统。
Figma + Codex：基于页面生成规范
从现有页面提取颜色、字体、表单和组件，再在 Figma 中建立规范并批量绑定旧页面。
Figma + Google AI Studio 工作流
快速生成 AI 对话工具和 B 端后台，进行局部调整后导入 Figma 并保留变量与自动布局。
GPT Image2：从 UI 到作品集与设计延展
先生成一套 C 端 UI，再延展为作品集、宣传图、品牌周边和 IP 视觉。
Kimi 搭建品牌官网
从完整品牌需求或现成模板出发，生成带登录注册和数据库能力的品牌网站。
GPT Image2 图转可编辑可交互 UI
比较 Figma Make、Codex 与 Figma 绑定三条路径，把 AI 图片还原成可编辑、可交互的界面。
AI + UI 全链路工作流合集
用 Codex + Figma 串联组件库、UI 生成、Image-to-UI、网页互转和作品集制作。
AI 还原 3D 大屏
从 Figma 设计稿出发，用 Vue、ECharts 和 Three.js 分模块还原大屏并完成开发交付。
AI 搞定 3D 地图
调用 Three Scope Map Skill 一句话生成真实 GeoJSON 3D 地图，并完成换色、视角和层级控制。
AI 搞定 UI 全流程
从模糊需求、视觉规范和完整 UI，到素材、样机与作品集展示的一站式流程。
AI 搞定 PRD + UI + 代码
从园区管理需求生成 PRD，再产出 B 端高保真 UI、品牌官网与可交付代码。
AI 搞定可视化大屏
从大屏概念图和素材拆分，到主视觉视频、Codex 前端还原与 Figma 回流的完整落地流程。
AI 搞定 3D 大屏
从双主题概念稿和视觉素材拆分，到调用 3D 地图 Skill 完成可运行大屏与样机。
AI 搞定 C 端 APP
从潮酷 APP 概念稿、视觉素材拆分，到 Codex 还原、Figma 调整和高清样机输出。
AI 搞定互动影游
从剧本、角色和场景分镜，到人物站位、游戏 UI 素材与 Codex 互动流程落地。
8 个 AI + UI 工作流
把 B 端、可视化、C 端、作品集、Figma 和代码交付整理成一张可组合的工作流地图。
Three Scope Map Skill 使用指南
安装并调用开源 Skill，生成其他省份、切换主题色、保存视角，并关联大屏落地教程。
0 代码写 AI Skill
先用 Codex 把功能打磨到满意，再抽象成 Skill、发布到 GitHub，并重新安装验证。
AI 大屏工作流合集
5 个章节、12 篇教程，从灵感、Figma 动效和 3D 视觉，到配套页面与代码交付。
AI 动态作品集
从可交互 Hero 的角色与分镜视频，到 Codex 读取作品数据并生成动态作品集网站。
Three Scope Map Skill 2.0
新增 3D 地球入口，从全球视角点击中国下钻到省市地图，并优化主题切换与加载性能。
AI 搞定视觉作品集
从虚拟人 Hero 海报和循环视频，到时间轴角色、手电筒交互素材与 Codex 前端落地。
AI 搞定 FUI 大屏
用 Lovart 提炼 FUI 风格并生成概念稿，完成素材拆分、样机、Skill 复用、3D 地球前端与 Figma 回流。
设计复盘
我把一个3D地图从“能运行”磨到了“能复用”
关于如何借助 AI 把视觉 Demo 打磨成可复用 Three.js Skill 的完整复盘。