Building an FUI Dashboard with AI

1.1 用 Lovart 生成 FUI 大屏

把 Pinterest 收藏直接带入 Lovart，让 AI 先提炼参考图的 FUI 设计语言，再生成以地球为视觉中心的大屏概念稿。

先在 Lovart 中选择连接器并连接 Pinterest，收藏的参考内容会直接同步到工作区。

找到想参考的图片，选择“添加到聊天”，再描述目标。AI 会提炼参考图中的 FUI 风格、设计语言和配色，不需要从零研究提示词。

操作步骤

1. 连接 Pinterest，并把收藏的视觉参考同步到 Lovart。
2. 把目标参考图添加到当前聊天。
3. 说明大屏中心视觉和业务方向，生成第一版概念稿。

Lovart

完整提示词

1.2 拆分标题和大屏素材

概念稿确认后，用图层拆分、裁切和橡皮擦提取可复用素材，为后续代码还原准备干净资产。

在生成结果中使用图层拆分，把标题、面板和中间主视觉等需要复用的内容独立出来。

选择目标区域后继续裁切；如果边缘仍有多余内容，再用橡皮擦清除，最终获得可以直接交给前端的独立标题背景或装饰素材。

操作步骤

1. 对完整大屏执行图层拆分。
2. 选择目标素材并按原始区域裁切。
3. 使用橡皮擦清理多余内容并检查透明边缘。

1.3 自动套用展示样机

不需要手动做透视变形，Lovart 的 Mockup 功能可以把大屏自动贴合到设备和空间样机中。

选中生成好的样机图，打开更多工具并选择 Mockup。

把完整大屏放入样机，系统会自动完成透视贴合，快速产出可用于汇报或作品集展示的效果图。

2.1 把成功对话做成大屏 Skill

把这次已经验证成功的生成过程封装成 Skill，下一次只需要改比例、业务场景和面板数量，就能复用同一视觉方向。

选择输入框左下角的加号，进入 Skill，并选择“基于此对话创建 Skill”。AI 会总结本次对话中的有效规则和提示词。

下次需要生成同风格大屏时，在同一入口找到刚创建的 Skill；选中后按 Tab，完整提示词会自动填入输入框，再按项目修改比例、业务场景和数据面板数量。

操作步骤

1. 从当前成功对话创建 Skill。
2. 检查 AI 总结出的风格约束和生成参数。
3. 在新任务中调用 Skill，并只替换业务变量。

3.1 用 Codex 和 3D 地图 Skill 落地网页

把概念稿与拆分素材放进 Codex，明确技术栈、视觉基线和验收阈值，再调用开源 3D 地图 Skill 还原可交互地球。

把概念稿和标题背景放进 Codex，告诉它需要使用的技术栈，并要求调用开源的 3D 地图 Skill 还原中央地球。

通过多轮对话继续调整布局、色系和交互细节。最终概念图会变成包含 3D 地球动效、ECharts 图表和真实交互的前端大屏，代码可以打包交付开发。

Three Scope Map Skill

完整提示词

3.2 复制到 Figma 继续编辑

网页完成后还可以通过插件复制回 Figma 继续调整，但图表可能以图片形式进入，需要根据后续编辑要求再做结构化还原。

使用浏览器插件可以把完成的网页复制到 Figma 中继续编辑。

需要注意，图表进入 Figma 后可能是图片而不是可编辑图层；如果项目要求继续修改图表，可以交给 Figma Make 还原后再放回设计稿。

Figma 浏览器插件