feat(skeleton-gen): 前端样式标准化为 Design Tokens

- docs-04 模板新增 § 2.5 样式与主题（命名规范 + tokens.css 位置 + 引用约定） - docs-06 模板 § 四改为 Design Tokens 三段式（4.1 全局调色板 / 4.2 组件级状态色 / 4.3 引用约定） - 新增 styles-tokens-template.css：8 个全局调色板 + 10 个组件状态色默认值 - SKILL.md 同步：C.1 加 mkdir src/styles + cp tokens.css；C.3 加勾选项；参考列表加新模板

feat(skeleton-gen): 前端样式标准化为 Design Tokens
- docs-04 模板新增 § 2.5 样式与主题（命名规范 + tokens.css 位置 + 引用约定） - docs-06 模板 § 四改为 Design Tokens 三段式（4.1 全局调色板 / 4.2 组件级状态色 / 4.3 引用约定） - 新增 styles-tokens-template.css：8 个全局调色板 + 10 个组件状态色默认值 - SKILL.md 同步：C.1 加 mkdir src/styles + cp tokens.css；C.3 加勾选项；参考列表加新模板
zichun
1 parent 62e69e34
Showing 4 changed files with 85 additions and 10 deletions
skills/plan/skeleton-gen/SKILL.md
skills/plan/skeleton-gen/templates/docs-04-skeleton-template.md
skills/plan/skeleton-gen/templates/docs-06-static-template.md
skills/plan/skeleton-gen/templates/styles-tokens-template.css
@@ -61,23 +61,29 @@ docs/04 已由 scope-lock 写入 § 零。本步骤追加 § 一 ~ 三。
 #### C.1 复制
 ```bash
-mkdir -p scripts .githooks sql/migrations
+mkdir -p scripts .githooks sql/migrations src/styles
 touch sql/migrations/.gitkeep
 cp "${CLAUDE_SKILL_DIR}/templates/env-local-template" .env.local
 cp "${CLAUDE_SKILL_DIR}/templates/githooks-pre-push-template.sh" .githooks/pre-push
 cp "${CLAUDE_SKILL_DIR}/templates/scripts-setup-test-db-template.sh" scripts/setup-test-db.sh
+cp "${CLAUDE_SKILL_DIR}/templates/styles-tokens-template.css" src/styles/tokens.css
 ```
 #### C.2 渲染 scripts/test.sh
-读取 `${CLAUDE_SKILL_DIR}/templates/scripts-test-template.sh`，基于步骤 A 的技术栈（docs/04）推断命令后写到 `scripts/test.sh`：
+读取 `${CLAUDE_SKILL_DIR}/templates/scripts-test-template.sh`，基于步骤 A 的技术栈（docs/04 § 零）为 7 个占位推断命令后写到 `scripts/test.sh`：
-- `{{build_cmd}}` 构建
-- `{{lint_cmd}}` lint
-- `{{test_cmd}}` unit + integration
-- `{{e2e_cmd}}` E2E（无 E2E 则填 `echo "[test.sh] e2e 略"`）
+- `{{backend_build}}` / `{{backend_lint}}` / `{{backend_test}}` 后端各 stage 命令
+- `{{frontend_build}}` / `{{frontend_lint}}` / `{{frontend_test}}` 前端各 stage 命令
+- `{{e2e_cmd}}` E2E（无 E2E 工具则填 `echo "[test.sh] e2e 略"`）
-> 双端项目（backend + frontend）用 `(cd backend && <cmd>) && (cd frontend && <cmd>)` 串联；单端直接写一条。
+> 推断规则：根据 `docs/04 § 零` 。
+> - 「后端*」存在 → 据后端技术栈推 backend 三槽（build / lint / test 命令）
+> - 「前端*」存在 → 据前端技术栈推 frontend 三槽
+> - 缺席 stack → 三槽全填 `:`（运行期 `[ -d X ]` 守卫对接；语法合法即可）
+> - `{{e2e_cmd}}` 通常仅前端，按上述前端规则或填 `echo "[test.sh] e2e 略"`
+>
+> 表结构异常（列名变更 / 无中文前缀）时停下，用 `AskUserQuestion` 让用户显式确认每 stack 命令。
 #### C.3 赋权 + 配置 git hooks
@@ -88,6 +94,7 @@ git config core.hooksPath .githooks
 完成后，用 `Edit` 在 `docs/08-模块任务管理.md` 中勾选：
 - `  - [ ] 工具脚本已生成（scripts/*.sh、.githooks/pre-push、.env.local）`
+- `  - [ ] 样式 token 骨架已生成（src/styles/tokens.css）`
 ### D. 追加 .gitignore 忽略项
@@ -149,9 +156,10 @@ QA 横幅涵盖：产出文件清单（docs/04 / 06 / 07 / 09 + scripts/*.sh + .
 - `${CLAUDE_SKILL_DIR}/templates/docs-06-static-template.md`（大纲）
 - `${CLAUDE_SKILL_DIR}/templates/docs-07-env-template.md`（大纲）
 - `${CLAUDE_SKILL_DIR}/templates/docs-09-structure-template.md`（大纲）
-- `${CLAUDE_SKILL_DIR}/templates/scripts-test-template.sh`（推断命令填充：build/lint/test/e2e）
+- `${CLAUDE_SKILL_DIR}/templates/scripts-test-template.sh`（推断命令填充 7 槽：backend/frontend × build/lint/test + e2e；缺席 stack 填 `:`）
 - `${CLAUDE_SKILL_DIR}/templates/scripts-setup-test-db-template.sh`（0 槽位）
 - `${CLAUDE_SKILL_DIR}/templates/githooks-pre-push-template.sh`（0 槽位）
 - `${CLAUDE_SKILL_DIR}/templates/env-local-template`（0 槽位）
 - `${CLAUDE_SKILL_DIR}/templates/gitignore-append-template`（0 槽位）
+- `${CLAUDE_SKILL_DIR}/templates/styles-tokens-template.css`（0 槽位，样式 token 骨架）
 - `${CLAUDE_SKILL_DIR}/scripts/merge-gitignore.sh`（.gitignore 逐行判重合并脚本）
@@ -38,6 +38,14 @@ skeleton-gen 读取 docs/04 § 零（技术栈表）和 docs/01-需求清单/ind
 ### 2.4 错误处理
 <!-- 网络错误 / 业务错误 / 页面级错误的分层处理。 -->
+### 2.5 样式与主题
+<!-- 基于 § 零 UI 库给出 CSS 变量约定：
+     - 命名格式 `--color-<scope>-<role>-<state>`（scope=form/table-row/...，role=bg/fg/border，state=edit/readonly/hover/selected）
+     - 文件位置 `src/styles/tokens.css`，由 skeleton-gen 生成空骨架，色值由 docs/06 § 四锁定后填入
+     - 组件样式中只用 var(--color-xxx)，禁止硬编码 hex/rgba
+     - 与 UI 库主题对接（如 Ant Design ConfigProvider.theme.token）的映射方式
+     具体 token 表见 docs/06 § 四。 -->
+
 ## 三、共同约定
 ### 3.1 Git 提交
@@ -40,8 +40,24 @@ UI ç»†èŠ‚ï¼ˆå¸ƒå±€å‚æ•°ã€é¢œè‰²ã€ç»„ä»¶é€‰åž‹ï¼‰æ¥è‡ª Â§ é›¶ å‰ç«¯ UI ç»„ä»
 ### 3.3 æƒé™æŽ§åˆ¶ï¼ˆå‰ç«¯ï¼‰
 <!-- èœå•çº§ / æŒ‰é’®çº§ / è·¯ç”±çº§çš„æŽ§åˆ¶æ–¹å¼ï¼Œå…³è”åŽç«¯ RBACã€‚ -->
-## å››ã€ä¸»é¢˜ä¸Žé¢œè‰²
-<!-- åŸºäºŽ Â§ é›¶ UI åº“çš„ä¸»é¢˜ tokenï¼›ä¸»è‰² / æˆåŠŸ / è¦å‘Š / é”™è¯¯ è‰²å€¼ã€‚ -->
+## å››ã€Design Tokens
+
+<!-- æ‰€æœ‰è‰²å€¼ç»Ÿä¸€ä»¥ CSS å˜é‡å®šä¹‰äºŽ src/styles/tokens.cssï¼›å‘½åè§„èŒƒè§ docs/04 Â§ 2.5ã€‚ -->
+
+### 4.1 å…¨å±€è°ƒè‰²æ¿
+<!-- ä¸Ž Â§ é›¶ UI åº“ä¸»é¢˜å¯¹é½ï¼šåˆ—å = è¯ä¹‰ / å˜é‡å / é»˜è®¤å€¼ / ç”¨é€”ã€‚
+     è‡³å°‘å«ï¼šä¸»è‰²/æˆåŠŸ/è¦å‘Š/é”™è¯¯/ä¸»æ–‡å—/æ¬¡æ–‡å—/è¾¹æ¡†/èƒŒæ™¯ã€‚ -->
+
+### 4.2 ç»„ä»¶çº§çŠ¶æ€è‰²
+<!-- åœºæ™¯ Ã— çŠ¶æ€æ˜ å°„è¡¨ï¼šåˆ—å = åºå· / ç»„ä»¶ / ç¼–è¾‘bg / åªè¯»bg / æ‚¬æµ®bg / ç¼–è¾‘fg / åªè¯»fg / æ‚¬æµ®fg / å¤‡æ³¨ã€‚
+     å•å…ƒæ ¼å†™ token åï¼ˆvar(--color-xxx) å½¢å¼ï¼‰ï¼Œä¸å†™ hexï¼›"â€”" è¡¨ç¤ºè¯¥çŠ¶æ€ä¸é€‚ç”¨ã€‚
+     è¡¨åŽè¿½åŠ ã€ŒToken é»˜è®¤å€¼ã€è¡¨ï¼Œåˆ—å‡ºæ¯ä¸ª --color-xxx åœ¨ tokens.css çš„é»˜è®¤å€¼ã€‚ -->
+
+### 4.3 å¼•ç”¨çº¦å®š
+<!-- ä¸€å¥è¯ä¸‰æ¡ï¼š
+     - ç»„ä»¶æ ·å¼åªç”¨ var(--color-xxx)ï¼Œç¦æ¢ç¡¬ç¼–ç 
+     - æ–°å¢ž token é¡»å…ˆç™»è®°åˆ° Â§ 4.1/4.2 å†è¡¥ tokens.css
+     - ä¿®æ”¹è‰²å€¼åªæ”¹ tokens.css ä¸€å¤„ï¼Œä¸å…è®¸ç»„ä»¶è¦†ç›– -->
 ## äº”ã€é¡µé¢æ¸…å•
 ï¼ˆç”± `downstream-gen` æŒ‰æ¨¡å—è¿½åŠ æ®µè½ï¼‰
+/*
+ * src/styles/tokens.css — Design Tokens
+ * 命名规范见 docs/04-技术规范.md § 2.5
+ * 色值锁定见 docs/06-UI交互规范.md § 四
+ *
+ * 命名格式：--color-<scope>-<role>-<state>
+ *   <scope> 组件域：form / table-row / table-header / ...
+ *   <role>  作用：bg（背景）/ fg（前景/字体）/ border
+ *   <state> 状态：edit / readonly / hover / selected（无状态时省略）
+ *
+ * 约束：
+ *   - 组件样式中只用 var(--color-xxx)，禁止硬编码 hex / rgba
+ *   - 修改色值只改本文件，不允许在组件级覆盖
+ *   - 新增 token 须先登记到 docs/06 § 4.1 / 4.2，再补到此处
+ */
+
+:root {
+  /* === 1. 全局调色板（与 Ant Design 主题对齐） === */
+  --color-primary: #1890ff;
+  --color-success: #52c41a;
+  --color-warning: #faad14;
+  --color-error: #ff4d4f;
+  --color-text: rgba(0, 0, 0, 0.85);
+  --color-text-secondary: rgba(0, 0, 0, 0.45);
+  --color-border: #d9d9d9;
+  --color-bg-base: #f0f2f5;
+
+  /* === 2. 组件级状态色（与 docs/06 § 4.2 一一对应） === */
+
+  /* form：输入框 / 备注框 / 时间框 / 下拉框共用 */
+  --color-form-bg-edit: #ffffff;
+  --color-form-bg-readonly: #f1f2f8;
+  --color-form-bg-hover: #f5f5f5;          /* 仅下拉框使用 */
+  --color-form-fg: #000000;
+
+  /* table */
+  --color-table-row-bg-selected: #86d5fb;
+  --color-table-row-bg-hover: #fff7e6;
+  --color-table-row-bg-readonly: #f1f2f8;  /* = rgb(241, 242, 248) */
+  --color-table-row-fg: #000000;
+  --color-table-header-bg: #f5f5f5;
+  --color-table-header-fg: rgba(0, 0, 0, 0.85);  /* = #000000D9 */
+}