Generative Art Platform

---
version: alpha
name: Generative Art Platform
description: 一套实验性黑色画布创作体系，以超大 Syne 展示字、模块化图像网格、橙色控件强调和有意的不对称构图为特征。
sourceUrl: "https://www.uupm.cc/demo/generative-art-platform"
websiteUrl: "https://www.uupm.cc/demo/generative-art-platform"
exampleUrl: "https://www.uupm.cc/demo/generative-art-platform"
language: zh-CN
sourceLanguage: en

colors:
  primary: "#FFFFFF"
  primary-dark: "#E5E5E5"
  secondary: "#888888"
  accent: "#F97316"
  ink: "#FFFFFF"
  body: "#888888"
  muted: "#888888"
  hairline: "#333333"
  canvas: "#0A0A0A"
  surface: "#1A1A1A"
  on-primary: "#0A0A0A"
  success: "#22C55E"
  warning: "#F59E0B"
  error: "#EF4444"

typography:
  display-xl:
    fontFamily: "Syne, sans-serif"
    fontSize: 60px
    fontWeight: 700
    lineHeight: 1.15
    letterSpacing: -1.2px
  display-lg:
    fontFamily: "Syne, sans-serif"
    fontSize: 48px
    fontWeight: 700
    lineHeight: 1.18
    letterSpacing: -0.8px
  display-md:
    fontFamily: "Syne, sans-serif"
    fontSize: 36px
    fontWeight: 600
    lineHeight: 1.2
    letterSpacing: -0.4px
  title-lg:
    fontFamily: "Syne, sans-serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: 0
  title-md:
    fontFamily: "Syne, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  body-lg:
    fontFamily: "Manrope, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  body-md:
    fontFamily: "Manrope, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0
  body-sm:
    fontFamily: "Manrope, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0
  label:
    fontFamily: "Manrope, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0
  metric:
    fontFamily: "Syne, sans-serif"
    fontSize: 30px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.4px

rounded:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  pill: 9999px

spacing:
  xxs: 4px
  xs: 8px
  sm: 12px
  md: 16px
  lg: 24px
  xl: 32px
  xxl: 48px
  section: 80px

effects:
  card-border: "1px solid #333333"
  card-shadow: "0 8px 30px rgba(0, 0, 0, 0.10)"
  focus-ring: "0 0 0 3px #FFFFFF40"
  hover-lift: -2px
  transition-fast: 160ms

components:
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 14px 24px
    minHeight: 48px
  button-secondary:
    backgroundColor: transparent
    textColor: "{colors.ink}"
    borderColor: "{colors.hairline}"
    typography: "{typography.label}"
    rounded: "{rounded.md}"
    padding: 13px 23px
    minHeight: 48px
  content-card:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.hairline}"
    rounded: "{rounded.lg}"
    padding: 24px
  data-panel:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.hairline}"
    rounded: "{rounded.md}"
    padding: 16px
  status-badge:
    backgroundColor: "#22C55E1A"
    textColor: "{colors.success}"
    rounded: "{rounded.pill}"
    padding: 6px 10px
---

## 概览

这是一套可复用的**实验性生成艺术画布**。它把来源页面抽象成适用于提示词编辑器、风格方块、生成网格、参数控件、创作者主页与导出流程的产品中立设计语言。应保留层级、颜色职责、信息密度和交互行为，并替换原有品牌、宣传数据与领域文案。

## 设计原则

- **清晰先于视觉奇观。** 装饰只能用于加强层级、状态或产品证据。
- **颜色职责稳定。** 主色负责选择与行动，次色负责对照，语义色不得沦为装饰。
- **展示真实产品。** 优先使用可信的界面片段、数据、控件与结果，少用泛化插画。
- **密度跟随任务频率。** 高频操作保持紧凑，解释和营销区块保持宽松节奏。
- **用一致性建立信任。** 标签、数值、状态位置、边框和焦点行为必须跨模块一致。

## 色彩体系

- **Primary**（`{colors.primary}`）：主操作、选中导航、关键链接、焦点与第一数据序列。
- **Primary Dark**（`{colors.primary-dark}`）：hover 和 pressed 状态。
- **Secondary**（`{colors.secondary}`）：对照信息、辅助身份或第二可视化序列。
- **Accent**（`{colors.accent}`）：稀有强调，可见面积不超过 10%。
- **Canvas / Surface**（`{colors.canvas}` / `{colors.surface}`）：页面与有边界内容层。
- **Ink / Body**（`{colors.ink}` / `{colors.body}`）：高强调与常规文字。
- **Hairline**（`{colors.hairline}`）：分隔、输入框、网格与安静的卡片边界。
- 成功、警告和错误色只表示真实状态；关键状态不得只依赖颜色传达。

## 字体体系

展示标题、区块标题、卡片标题和重要指标使用 **Syne**；段落、标签、控件和高密度辅助内容使用 **Manrope**。Desktop 首屏采用 60px/1.15，区块标题为 36–48px，默认正文为 16px/1.6。纵向对比的数据应使用等宽数字。

## 布局与间距

- 最大内容宽度 1280px，Desktop 两侧 gutter 为 24–32px。
- 营销区使用 12 栏网格和 80px 垂直内边距。
- 产品样张内部可以采用 16px 紧凑节奏，外围区块仍保持宽松。
- 功能网格 Desktop 3 栏、Tablet 2 栏、Mobile 1 栏。
- 主操作必须靠近被操作对象，不把输入与确认拆到无关卡片中。

## 表面、层级与形状

页面画布是零层级。卡片使用 `{colors.surface}` 与 1px hairline。阴影只用于浮层、选中项或模态内容。标准控件与面板使用 12px 圆角，功能卡使用 16px，24px 仅用于大型首屏或 CTA 容器。Pill 只用于徽标、筛选和紧凑状态。

## 组件规范

核心组件包括提示词编辑器、风格方块、生成网格、参数控件、创作者主页与导出流程。主次按钮高度统一为 48px。上下文可能丢失的输入项必须保留标签。数据面板应包含标题、时间或范围、可视化、简短图例以及空态和加载态。

## 交互状态

- **Hover：** 调整所属颜色明度，浮动卡可上移 2px。
- **Focus：** 使用 3px 主色焦点环，在画布和卡片上均清晰可见。
- **Pressed：** 取消上浮并降低强调，不改变布局尺寸。
- **Loading：** 保持组件尺寸，使用有意义的进度或骨架。
- **Empty：** 解释缺失原因，并提供一个相关下一步。
- **Error：** 错误色必须配合明确说明、恢复操作和字段关联。
- **Success：** 确认已完成对象，避免持续庆祝动效。

## 动效

控件使用 160ms，面板使用 220–280ms，只动画 opacity 与 transform。图表可在首次进入时绘制一次，但必须迅速稳定。遵守 `prefers-reduced-motion`，关闭环境循环，不用动效遮挡最终数据。

## 响应式

1024px 时减少多栏营销网格并简化次级导航；768px 时堆叠首屏、收起侧面板，让核心产品样张紧跟价值主张；480px 以下使用 16px gutter、全宽主按钮、不可压缩表格横向滚动，并保证至少 44px 触控目标。

## 无障碍

满足 WCAG AA 对比度，提供清晰键盘焦点、语义标题、明确表单标签和图表或作品的文字替代。正负、选中与未选中状态不能只靠色相区分。异步结果使用合适 live region，键盘顺序必须与视觉顺序一致。

## 应当与不应

### 应当

- 在导航、数据和操作中持续复用颜色职责。
- 展示真实组件状态和可信内容密度。
- 每个区块只保留一个主 CTA 和一条主要阅读路径。
- 验证模糊、字体或图片失效时的回退表面。

### 不应

- 复制来源品牌、宣传口号或具体业务文案。
- 给所有组件添加渐变、发光、玻璃或阴影。
- 把关键值隐藏在 hover 或动效之后。
- 在 Mobile 强行压缩表格，导致标签和数值关系不清。

## QA 清单

- [ ] 颜色 Token 与语义职责符合规范。
- [ ] 标题/正文字体组合及响应式字号已实现。
- [ ] 按钮、输入、卡片、数据面板和状态覆盖完整。
- [ ] Desktop、Tablet、Mobile 均无页面横向溢出。
- [ ] 键盘、焦点、对比度和减少动效通过检查。
- [ ] 截图与示例体现的是通用体系而非来源品牌。