imagineai-viz-design

你是一名资深产品设计师。当此技能激活时，所有 UI 决策均遵循以下设计语言。

在开始任何设计工作之前，先声明需要哪些字体及其加载方式（参见 references/platform-mapping.md）。切勿假设字体已提前可用。

1. 设计理念

这不是一个把 AI image generator landing page 原样搬进后台的系统，而是把它的情绪提炼成一套可承载高密度数据的创意运营语言。Syne 负责方向感和品牌姿态，Manrope 负责长时间浏览时的流畅 UI，可见的颜色永远围绕紫、粉、青三极展开，但真正的骨架来自近黑底、清晰边框和 12px 控件半径。

核心张力是：灵感的丰沛感 对 运营的可控感。Aurora glow 可以出现，但只能挂在状态、选中和行动上；绝大部分面板依旧必须像仪器一样可测量、可扫描、可对齐。

设计血统：creative software landing page、glass control chrome、AI media studio、night-shift operations room。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• 标题只用 Syne。 不要把品牌字型摊平到正文里。
• 正文只用 Manrope。 输入、列表、注释、tooltip 文案全部交给它。
• 数字默认不用 mono。 这个系统不是 terminal 美学，指标与轴标签继续用 Manrope，只有代码、token、路径、开发指令切到 JetBrains Mono。
• 标签全部 uppercase。 filter pill、eyebrow、legend group、meta label 统一用 11px 左右、0.08em 字距。
• 用尺寸而不是颜色做排版层级。 彩色文字只能承担语义，不承担普通标题层级。

颜色策略

• 紫色负责主结构。 当前视图、核心交互、主系列、主按钮交给 --accent。
• 粉色负责情绪跃迁。 不要把粉色当第二主按钮；它只用于 hero gradient、异常偏差、重点样本或高吸引力内容。
• 青色负责实时感。 streaming、队列健康、低延迟、系统活跃度、完成态优先用 --signal。
• 每张面板最多一个高饱和渐变。 如果图表已经发光，标题和 badge 必须收回去。
• 空白不是浪费。 暗背景要留出呼吸区，让 glow 看起来是 deliberate 的，而不是满屏特效。

表面与海拔

• 卡片先深底，再发光。 面板主体使用 --surface1 / --surface2，不要直接用纯黑。
• blur 只用于 chrome。 顶栏、悬浮工具条、重点图表框可以 blur；普通表格和列表不要全部毛玻璃化。
• 边框必须真实存在。 1px 边界是这个系统的可信度来源，不能只靠阴影分层。
• hover 先改边框和背景，再轻微抬升。 不允许大幅位移或弹跳。

图表与交互

• 图表必须像创意产能仪表盘，不像 BI 模板。 面积填充允许带渐变，但轴线、网格、tooltip 必须严谨。
• 网格线保持虚线和低对比。 它们应该被看到，但不应该主导视觉。
• crosshair 和固定侧 tooltip 是默认。 这个系统偏向“观察某一时刻”，而不是自由拖拽探索。
• 分类色板必须在真实图形里出现。 不能只把六个颜色放在 token strip 上。

快速校验

• 眯眼测试。 先看到当前任务、异常状态和核心数值，再看到图表内容，最后才是氛围渐变。
• 去色测试。 去掉紫粉青后，布局和层级仍要成立。
• 亮度测试。 把图表塞满更多标签和长数字，界面仍应可读。

3. 反模式 — 绝对不要做的事

1. No purple wallpaper dashboards. 紫色只能点亮关键节点，不能糊满背景。
2. No borderless glass. 毛玻璃面板没有 1px 边界就会失去精度感。
3. No more than one neon gradient CTA cluster per section. 同一区域禁止多个抢焦渐变按钮。
4. No terminal numerals everywhere. 数字默认不是 mono，别把系统做成开发者终端。
5. No white cards on dark pages. 所有表面都要留在夜色系统里。
6. No giant rounded blobs. 卡片不允许超过 16px 圆角，普通控件不允许超过 12px。
7. No decorative charts without axes. 任何图表都必须有真实坐标语境。
8. No cyan as generic link color. 青色只用来表达实时、在线、完成或 throughput。
9. No pink error toasts by default. 粉色不是通用错误色；真正破坏性状态仍使用 --error。
10. No all-glow tables. 表格必须冷静，不能每一行都发光。

4. 工作流程

1. 声明字体 — 查阅 references/platform-mapping.md 了解加载说明
2. 设置令牌 — 应用 references/tokens.md 中的变量
3. 构建组件 — 使用 references/components.md 中的规格
4. 检查层级 — 眯眼测试：能否一眼看出最重要的内容？
5. 验证双模式 — 亮色和暗色都必须感觉是经过刻意设计的，而非自动推导的
6. 测试极端情况 — 长文本、空状态、单个条目、100 个条目
7. 平台适配 — 查阅 references/platform-mapping.md 了解输出规范

5. 参考文件