# 用 TVU 设计系统做设计 — 正文已并入站上的「上手」页

> **正文在这里（免登录可读，同事直接发这个链接就行）**：
> **https://product-demo.tvustream.com/tvu-design-system/playground-dist/#/guide/onboarding**
>
> 仓库内的源文件 = [`playground/docs/pages/OnboardingPage.vue`](../playground/docs/pages/OnboardingPage.vue)（2026-08-13 起是**站内真页面**，进了左侧「上手」组；老地址 `playground-dist/onboarding.html` 仍在、已缩成重定向壳，别再把它当正文真源）。

---

## 为什么本文只剩指针

本文原先写的是「装好之后做什么」（四条路线分诊），而 `onboarding.html` 写的是「怎么装」。
两份加起来才是一个同事真正需要的一条链，但**它们都只存在于私有仓库里**——
没有 Gitea 权限的同事一份也读不到，而那恰恰是最需要读它们的人。

2026-08-11 owner 拍板合并：**把「装 + 用」并成站上一页**，随文档站发布，免登录可达。
既然正文已经在那一页，本文再留一份就是第二真源（同一句话两处写、改一处忘一处）——
所以收缩成指针。

> 实测依据：站上 `…/playground-dist/**` 无凭据可取（首页与它引用的 JS / CSS 均 200，
> 同站不存在的路径 404 作阴性对照）；而 `…/gitea/**` 无凭据会被重定向到登录页。
> 两者同主机不同路径，发布这一页**不会**让私有仓库变成公开的。

---

## 这一页里有什么

| 段 | 内容 |
|---|---|
| 这套系统怎么用（一句话） | 先问系统有什么，再动手 + 三条工作方法（先查再说 / 别自拼 / 校验交给系统） |
| 你手上有什么（3 行自测） | 分诊到你真能走的路；**没有 Gitea 权限的同事只有路线 0 和 B 是活的** |
| 该装什么 | 安装路径 A（源码，解锁路线 A）· 安装路径 B（npm 依赖，解锁路线 C） |
| 装好之后 | 一次任务从头到尾的顺序 + 唤醒词 + 做界面记住三条 |
| 四条路各自 | 路线 0 文档站 · 路线 A Figma · 路线 B Claude Design · 路线 C 写代码；各带 30 秒自检和真实卡点 |
| 先查再说具体去哪查 | 组件 / affordances / 图标 / token 各自的查法 |

---

## 相关

| 想要 | 去哪 |
|---|---|
| 安装部分的 Markdown 版（内容与站上那一页的安装段同源） | [`ONBOARDING_NEW_MACHINE.md`](./ONBOARDING_NEW_MACHINE.md) |
| 只装 Claude Code plugin | 站上「上手」页 [两行命令装插件](https://product-demo.tvustream.com/tvu-design-system/playground-dist/#/guide/onboarding#install-plugin) |
| 唤醒词全表 | [`WAKE-WORDS.md`](./WAKE-WORDS.md) |
| npm 装包步骤 / 401 排查 | [`GETTING_STARTED.md`](./GETTING_STARTED.md) |
| 想改进设计系统本身 | [`CONTRIBUTING.md`](../CONTRIBUTING.md) — 走 PR，owner review |
| 代码和 Figma 对不上 | [`FIGMA_AS_SOURCE_OF_TRUTH.md`](./FIGMA_AS_SOURCE_OF_TRUTH.md) — 默认结论是代码要改，不是 Figma |

⚠️ **要改「怎么用」的内容，改站上那一页的源文件，别改回本文** —— 本文再长出正文，第二真源就回来了。