当修改组件、token、样式、交互或文档展示时使用;在 TAI Design 中同步组件源码、调用方、文档页和预览产物,避免只改一半。
这个 skill 用于处理 TAI Design 中任何会影响组件真实表现的改动,确保 packages/components、packages/docs、组合展示组件和预览产物保持单一事实源。
当用户提到"改组件样式""微调 token""修文档预览""某个组件调用后样式不一致""弹窗里引用的按钮不对"这类请求时,应优先加载本 skill。
packages/components/src/* 下的组件实现、样式、类型或交互packages/components/src/tokens/* 中影响组件外观的 tokenpackages/docs/src/design-system/pages/* 的展示文案、预览态或交互控制packages/docs/src/design-system/*Component.tsx 这类文档包装/组合组件packages/components/src/<component>/:组件源码和类型packages/components/src/tokens/:颜色、语义 token、迁移兼容层packages/components/src/tokens/index.ts:公开排版 token(FONT_SIZE / FONT_WEIGHT / LINE_HEIGHT,过渡期兼容)、、、SPACINGRADIUSSHADOWpackages/components/src/tokens/semanticTokens.ts:颜色语义 token、PRESSED_OVERLAY、STATIC、TypographyTokens(tokens.typography.*)packages/components/src/tokens/primitives.ts:primitive 色板(不应直接在组件/页面中使用)packages/components/src/index.ts:组件库公开导出入口packages/docs/src/design-system/pages/:文档页面packages/docs/src/design-system/DocComponents.tsx:共享文档骨架组件(DocPageHeader、DocSection、DocPanel、DocTokenTable 等)packages/docs/src/design-system/*Component.tsx:文档展示/组合组件packages/docs/src/main.tsx:文档路由入口textColor、bgColor、borderColor、functionalColorSTATIC.*、SHADOW.* 等),但不向文档/用户暴露tokens.typography.*(如 tokens.typography.title.page.fontSize)FONT_SIZE / FONT_WEIGHT / LINE_HEIGHT 保留在 tokens/index.ts 供过渡期fontSize 属性(非排版语义)保持硬编码数值| 类别 | 路径前缀 | 包含 token |
|---|---|---|
| title | tokens.typography.title.* | page(42/600/1.2)、section(36/600/1.3)、card(32/500/1.5)、subsection(30/500/1.4) |
| body | tokens.typography.body.* | primary(28/400/1.4)、secondary(26/400/1.5)、long(28/400/1.6) |
| label | tokens.typography.label.* | buttonLarge、buttonMedium、buttonSmall、buttonMini、tag、tab、badge、input |
| meta | tokens.typography.meta.* | caption(24/400/1.5)、time(22/400/1)、footnote(18/400/1) |
| display | tokens.typography.display.* | hero(42/700/1.2)、numeric(24/600/1.5) |
Button.types.ts。packages/docs/src/design-system/*Component.tsxpackages/docs/src/design-system/pages/*每个组件同步完成后,必须输出该组件真实使用的全部公开 token 清单,分两类:
列出所有使用的 textColor.*、bgColor.*、borderColor.*、functionalColor.*、组件级 token(如 input.*、checkbox.*)和静态色(STATIC.*、PRESSED_OVERLAY)。
列出所有使用的 tokens.typography.* 语义路径。
格式示例:
## Button Token 清单
### 颜色 token
- `bgColor.brand` — primary 变体背景
- `textColor.anti` — primary 变体文字
- `STATIC.transparent` — ghost 变体背景
...
### 排版 token
- `tokens.typography.label.buttonLarge` — xlarge 尺寸文字
- `tokens.typography.label.buttonMedium` — large 尺寸文字
...
pnpm buildpnpm devpnpm preview只有下面四层都一致,才能对用户说"已改好":
token 前后定义打架,后面的返回值把前面的修复覆盖掉packages/components,没改 pages/* 或 *Component.tsx