GenArt

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

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

1. 设计理念

GenArt 是一间夜间营业的数字版画工作室，不是 AI 营销站，不是传统 SaaS 仪表板。黑色画布负责吞噪，Syne 负责制造“展签一样醒目”的标题，Manrope 负责让所有输入、参数和流程真正可用。荧光 magenta / cyan / lime / yellow 只在三种时刻出现：发起动作、切换选择、显示创作结果。主要张力是海报级戏剧性与产品级可操作性并存。

设计血统来自生成艺术展海报、电子音乐视觉、暗场画廊墙签和创作者工具台。任何屏幕都必须看起来像“可以立刻开始生成、筛选、导出、mint”，而不是“只会讲概念的赛博着陆页”。

2. 制作规范 — 如何构建

视觉层次层

排版纪律

• 所有戏剧性都给 Syne。 标题、按钮、高权重标签、步骤编号都使用 Syne。
• 所有可读性都给 Manrope。 输入、说明、参数、表单、列表、图表注释都使用 Manrope。
• 数字不默认切到等宽。 这是一套创作者系统，不是运维终端；等宽只给 seed、版本号、导出规格和代码样例。
• 每屏最多一个彩色标题焦点。 如果 hero 已经用了彩色渐变，其他标题保持纯白。

间距语义

• 8px 模数不可破。 12 / 20 / 32 是允许的二级节点，但都必须服务于同一节奏。
• 空间感来自大块暗面，不来自空白恐惧。 卡片之间留出 16px 到 24px，舞台区给足 32px 到 48px。
• 工具卡可大，但按钮不可胖。 大面板承载实验感，小控件必须保持利落。

颜色策略

• 黑色先解决 80% 的层级。 先用 --background / --surface1 / --surface2 / --border 搭好骨架，再考虑 neon。
• magenta 是主动作。 任何渐变按钮、主要切换、关键 hover 都从 magenta 出发。
• cyan 是次动作和工具。 用于工具卡、辅助高亮、数据对照，而不是抢主 CTA。
• lime 与 yellow 只做结果和分类。 lime 更偏“生成完成 / active style”，yellow 更偏“稀有 / featured / mint fee”。

构图方法

• 先搭工作台，再放艺术。 工具栏、舞台、属性面板、导出区的边界必须先清楚。
• 暗面层级必须可眯眼识别。 眯眼后仍应分得出导航、舞台、属性面板和结果区。
• 发光只给 hover 与高价值动作。 静态卡片不发光，只有被悬停或被激活时才出现 magenta halation。
• 真实内容优先。 prompt、seed、collection、gas fee、style mix 必须像真实产品字段，而不是 lorem ipsum。

数据与图表规则

• 图表是创作反馈，不是 BI 仪表盘。 只展示生成节奏、风格分布、导出热度这类贴近创作的指标。
• 网格线保持稀薄。 dashed + 低 opacity，避免把工作区变成金融终端。
• 图表系列使用 neon，但轴和标签仍留在中性层。
• tooltip 读起来像工作台浮层。 深色底、细边框、短标签，不要做成营销卡片。

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

1. No 白底赛博。 亮色模式可以存在，但不能把主体验洗成普通 SaaS。
2. No 同屏三块以上强 neon。 彩色过量会立刻从“工作室”变成“夜店广告”。
3. No 圆角大于 16px 的卡片。 只有 pills 可以到 999px。
4. No 默认彩色边框。 边框默认是 --border，彩色边框只给激活与 hover。
5. No 纯装饰 blur 背景球替代结构。 chaos blob 只做远景氛围，不能承担布局职责。
6. No 粗暴玻璃拟态。 顶栏允许 blur，主体卡片不做 frosted panel 堆叠。
7. No 终端式等宽泛滥。 seed 可以 mono，作品标题和价格不可以。
8. No 彩虹图表。 数据系列只从技能定义的 categorical palette 中取色。
9. No 阴影代替分组。 先用暗面阶差和边框，再决定是否给 hover glow。
10. No marketing hero copy inside app screens. 应用页写真实字段，不写“push boundaries”。
11. No tiny controls. 所有可点击元素至少 40px 高，主按钮 52px。
12. No generic AI purple gradients. GenArt 的主梯度必须是 magenta → cyan，不要自动滑向泛紫。

4. 工作流程

1. 声明字体 — 加载 Syne 700/800、Manrope 400/500/600、Space Mono 400
2. 设置令牌 — 应用 references/tokens.md 中的颜色、排版、间距与 glow 规则
3. 搭建工作区骨架 — 先排 toolbar、stage、properties panel、export/mint 区
4. 部署组件 — 使用 references/components.md 的按钮、style pills、工具卡、输入与图表容器
5. 检查彩色稀缺性 — 确认 neon 只出现在动作、选择与结果
6. 验证双模式 — 暗色是主模式；亮色必须仍然保有“展签 + 工具台”气质
7. 测试极端情况 — 超长 prompt、0 results、10 个 style filters、稀有作品、mint 失败都要成立

5. 参考文件