AI DESIGNER / CREATIVE TECHNOLOGIST
AI 搞定 FUI 大屏
用 Lovart 提炼 FUI 风格并生成概念稿，完成素材拆分、样机、Skill 复用、3D 地球前端与 Figma 回流。
完整教程
这篇教程从 Pinterest 参考图出发，用 Lovart 提炼 FUI 风格并生成可视化大屏，再完成素材拆分、自动套样机、对话封装 Skill、Codex 前端落地和 Figma 回流，形成一条从视觉概念到可交付网页的完整路径。
1.1 用 Lovart 生成 FUI 大屏
把 Pinterest 收藏直接带入 Lovart，让 AI 先提炼参考图的 FUI 设计语言，再生成以地球为视觉中心的大屏概念稿。
先在 Lovart 中选择连接器并连接 Pinterest，收藏的参考内容会直接同步到工作区。
找到想参考的图片，选择“添加到聊天”，再描述目标。AI 会提炼参考图中的 FUI 风格、设计语言和配色，不需要从零研究提示词。
操作步骤
- 连接 Pinterest，并把收藏的视觉参考同步到 Lovart。
- 把目标参考图添加到当前聊天。
- 说明大屏中心视觉和业务方向，生成第一版概念稿。
完整提示词
FUI 大屏概念稿
按照这种设计风格，生成中间是地球的大屏。
1.2 拆分标题和大屏素材
概念稿确认后，用图层拆分、裁切和橡皮擦提取可复用素材，为后续代码还原准备干净资产。
在生成结果中使用图层拆分，把标题、面板和中间主视觉等需要复用的内容独立出来。
选择目标区域后继续裁切；如果边缘仍有多余内容，再用橡皮擦清除，最终获得可以直接交给前端的独立标题背景或装饰素材。
操作步骤
- 对完整大屏执行图层拆分。
- 选择目标素材并按原始区域裁切。
- 使用橡皮擦清理多余内容并检查透明边缘。
1.3 自动套用展示样机
不需要手动做透视变形，Lovart 的 Mockup 功能可以把大屏自动贴合到设备和空间样机中。
选中生成好的样机图，打开更多工具并选择 Mockup。
把完整大屏放入样机，系统会自动完成透视贴合，快速产出可用于汇报或作品集展示的效果图。
2.1 把成功对话做成大屏 Skill
把这次已经验证成功的生成过程封装成 Skill，下一次只需要改比例、业务场景和面板数量，就能复用同一视觉方向。
选择输入框左下角的加号，进入 Skill，并选择“基于此对话创建 Skill”。AI 会总结本次对话中的有效规则和提示词。
下次需要生成同风格大屏时，在同一入口找到刚创建的 Skill；选中后按 Tab，完整提示词会自动填入输入框，再按项目修改比例、业务场景和数据面板数量。
操作步骤
- 从当前成功对话创建 Skill。
- 检查 AI 总结出的风格约束和生成参数。
- 在新任务中调用 Skill，并只替换业务变量。
3.1 用 Codex 和 3D 地图 Skill 落地网页
把概念稿与拆分素材放进 Codex，明确技术栈、视觉基线和验收阈值，再调用开源 3D 地图 Skill 还原可交互地球。
把概念稿和标题背景放进 Codex，告诉它需要使用的技术栈，并要求调用开源的 3D 地图 Skill 还原中央地球。
通过多轮对话继续调整布局、色系和交互细节。最终概念图会变成包含 3D 地球动效、ECharts 图表和真实交互的前端大屏，代码可以打包交付开发。
完整提示词
Codex 大屏落地提示词
基于图2生成一个可视化大屏，图1是大屏的大标题背景，中间的3D地球使用 https://github.com/songsummer920-dazzle/three-scope-map-skill 进行还原。
要求颜色、色系等内容保持一致，不要自己臆想；技术栈使用 Vue，图表使用 ECharts 进行还原，确保整体布局和色系与图2参考图保持一致。
完成后使用自动对比校验，完成度达到 90% 再让我确认。
3.2 复制到 Figma 继续编辑
网页完成后还可以通过插件复制回 Figma 继续调整，但图表可能以图片形式进入，需要根据后续编辑要求再做结构化还原。
使用浏览器插件可以把完成的网页复制到 Figma 中继续编辑。
需要注意，图表进入 Figma 后可能是图片而不是可编辑图层；如果项目要求继续修改图表，可以交给 Figma Make 还原后再放回设计稿。
关键方法
- 先用参考图锁定 FUI 设计语言，再开始生成
- 拆分资产时要保留原始尺寸和透明边缘
- 样机用于展示，不应替代真实页面交付
- Skill 应封装已经验证成功的对话和规则
- 把视觉基线、技术栈和验收阈值一起交给 Codex
- 回流 Figma 前先判断图表是否需要保持可编辑
作者与发布
本文由宋夏天Dazzle 创作，收录于公众号「送你整个夏天」的 2026 教程档案。