Skill Name

Retro Industrial UI Generator (Distributable)

Purpose

将自然语言需求转换为可开发的结构化 UI 输出，并严格复用 retro-industrial-design-system（v0.11）资产：

Tokens: tokens/build/tokens.css, tokens/build/tokens.ts, tokens/semantic/retro-industrial.json
Components: components/*/SPEC.md（含 v0.11 表单家族）
Patterns: patterns/backpack, patterns/component-gallery
Assets: assets/surfaces/*, assets/decorations/*, assets/icons/*

目标：让其他 agent 实现 一句话需求 -> 结构化 UI -> 可落地代码骨架。

When to use

在以下任务中启用本 skill：

生成页面、弹层、列表、卡片、对话、分支选择、设置、表单、状态页等 UI。
需要输出可开发结构（而非纯视觉描述）。
需要保证风格统一、token 合规、响应式覆盖 PC 与 Pad。
需要基于现有组件快速复用，而非从零设计。

不适用场景：

纯后端逻辑、数据管道、无 UI 任务。

Input Schema

调用方必须提供结构化输入：

{
  "product_request": "string, required",
  "platform": {
    "target": "string, required, oneOf: ['web']",
    "form_factor": "string, required, oneOf: ['responsive-pc-pad', 'pad-first']"
  },
  "page_type": "string, required, oneOf: ['full-page', 'modal', 'panel', 'embedded-section']",
  "interaction_level": "string, optional, oneOf: ['static', 'basic', 'rich'], default='basic'",
  "content_density": "string, optional, oneOf: ['compact', 'comfortable'], default='comfortable'",
  "data_contract": {
    "entities": "array, optional",
    "empty_state": "boolean, optional, default=true",
    "error_state": "boolean, optional, default=true",
    "loading_state": "boolean, optional, default=true"
  },
  "constraints": {
    "theme": "string, optional, oneOf: ['light', 'dark', 'auto'], default='auto'",
    "must_use_existing_components": "boolean, required, default=true",
    "allow_new_component": "boolean, optional, default=false",
    "a11y_required": "boolean, optional, default=true"
  },
  "deliverables": {
    "need_layout_tree": "boolean, required, default=true",
    "need_component_mapping": "boolean, required, default=true",
    "need_interaction_spec": "boolean, required, default=true",
    "need_code_skeleton": "boolean, required, default=true"
  }
}

Output Rules

以下为强约束规则，任一违反即视为失败输出：

Token-only styling
- 禁止硬编码视觉值：#hex、rgb/rgba、hsl、任意固定 px（阴影参数/1px 描边/transform 微位移例外）。
- 颜色/字号/行高/间距/圆角/阴影必须来自 --ri-*。
- 字体必须使用 var(--ri-font-serif)。
Three-layer architecture (mandatory)
- 必须输出三层：layout / component / interaction。
- layout 负责区域与网格。
- component 负责组件映射、variant、状态。
- interaction 负责事件、状态迁移、反馈规则。
Pad compatibility (mandatory)
- 默认采用 rem + clamp 策略（2730 画布基准，覆盖 PC 到 Pad）。
- 禁止写死绝对尺寸导致小屏溢出。
- 沉浸式 pattern 可使用 transform: scale，必须显式声明场景原因。
Component reuse first
- 优先复用现有组件（当前共 27 个，含 v0.11: Input/Textarea/Select/Checkbox/Radio/FormField）。
- 若确需新组件，输出 TODO(design-system) 并给出 token 缺口说明。
Fixed output sections
- 输出必须按顺序包含 4 段：
  1. UI_LAYOUT_TREE
  2. UI_COMPONENT_MAPPING
  3. UI_INTERACTION_SPEC
  4. UI_CODE_SKELETON
- 每段必须结构化（JSON/TS 对象），不能用散文替代。
Development-ready
- UI_CODE_SKELETON 至少包含：容器结构、组件占位、关键 token 引用、loading/empty/error 占位。
- 对于可交互组件（button/select/checkbox/radio/input），必须定义状态与事件钩子。

Generation Steps

Parse
- 解析一句话需求，提取目标页面、核心任务、关键实体、必要状态。
Collect Design System Context
- 读取 tokens、组件 SPEC、可复用 pattern。
- 标记最接近的组件集合（含变体与状态）。
Map by Family
- 组件按家族映射：基础、内容、反馈、容器、导航、对话、表单。
- 表单需求优先使用 v0.11 新组件（Input/Textarea/Select/Checkbox/Radio/FormField）。
Bind Tokens
- 所有视觉属性绑定 --ri-* token。
- 字号与行高必须成对。
- 颜色优先语义 token，禁止直接回退原子色。
Compose 3 Layers
- 生成 layout 树（区域、排列、响应式约束）。
- 生成 component 映射（spec 路径、variant、state、token）。
- 生成 interaction 规范（事件、迁移、反馈）。
Pad Validation
- 校验 1920~2730 范围显示与交互可用性。
- 必要时加 max-width/max-height 与弹性布局规则。
Emit
- 输出 4 段固定结构。
- 若有设计系统缺口，追加 TODO(design-system)，但不允许硬编码替代。

Distribution Notes

用于分发时仅需包含以下路径：

.agent/skills/retro-industrial/SKILL.md（本文件）
tokens/
components/
patterns/
assets/

安装后其他 agent 只需在任务中引用：

@retro-industrial-ui-generator

retro-industrial-ui-generator