# TVU Design System — AI 消费入口 (llms.txt)

> 包名 `@ux-team/tvu-design-system`。这是一个**辅助 AI 进行产品 UX 设计的设计系统**：AI 是一等消费者。
> 任何 AI 工具（Claude / Codex / Cursor / 其它）用本包生成产品设计（Vue 代码 / Figma mockup）时，**起手先加载下面三份机器可读上下文**，再动手——它们让你用对组件、用对 token、别自拼已有的组合组件。
> 本文件遵循 llms.txt 约定，随 npm 包分发（在 `files` 字段内）。

## AI 起手必读（按 npm 子路径导出加载）

- **组合语义 SoT** — `@ux-team/tvu-design-system/composition` (`dist/composition/composition.json`)
  每个 canonical 组件内置了什么能力（如 InputNumber 的 step、DropDownListSelect 的 multi）、组件嵌套关系（contains / contained_by）、以及"别自拼"警告（do_not_hand_compose）。**生成代码前先查这里，避免把已有组件拆开用 primitive 重拼。** JS 形态见 `/composition/js`。
- **设计 token** — `@ux-team/tvu-design-system/tokens` (DTCG JSON) + `/tokens/js` (resolved TS)
  颜色（原始色板 + 语义层，Figma Variable 绑定的原子真源）。**不要硬编码 hex/px，用 token。**
- **图标 registry** — `@ux-team/tvu-design-system/icons/manifest.json`
  全部图标的 canonical 名（`category/name`）+ affordance 分类。**任何图标从这里取，别自画 SVG。**

## 组件消费

- Vue：`import { Button, Table, ... } from '@ux-team/tvu-design-system'` + `import '@ux-team/tvu-design-system/style.css'`
- 图标 SVG：`@ux-team/tvu-design-system/icons/svg/*` · ESM：`/icons/esm/*`
- Chart（独立入口）：`@ux-team/tvu-design-system/chart` + `/chart/style.css`
- 安装与上手：见包内 `docs/CONSUMER_AUDIT_SETUP.md`

## 硬约束（AI 生成产品设计时必须遵守）

1. **Figma 是真源**：组件视觉属性 1:1 还原 Figma，不自由发挥、不按"行业惯例"补全。
2. **别自拼组合组件**：`composition` 里标了 `do_not_hand_compose` 的（如用 fixed 遮罩 div 拼模态、用 InputBox+按钮拼步进器），必须用现成组件。
3. **别硬编码设计值**：颜色/间距用 token，图标用 registry canonical 名。
4. **消费侧有 ESLint plugin 守这些约束**：`@ux-team/tvu-design-system/eslint-plugin`（no-inline-svg / no-base-component-import 等）。

## 反向溯源（code ↔ Figma）

每个 canonical 组件带 `data-figma-*` 属性，可经 `figma-data/render-verification-manifest.json`（930 条 Figma nodeId ↔ 组件 ↔ props 确定性映射）回指唯一设计库 `figmaFileKey = YbsPRUVmNdsbN40NNwh1Gn`。