chore(design): 建立 token 单源管线，删除 design/flutter fork
- 新增 design/codegen/gen_flutter_tokens.mjs： 从 colors_and_type.css codegen 出 client/lib/pangolin_tokens.gen.dart 覆盖 PangolinColors/Spacing/Radius/Motion/Shadow（纯数值层） - 重构 client/lib/pangolin_theme.dart： 删除手抄数值，import+export pangolin_tokens.gen.dart 保留实现层 PangolinScheme/PangolinText/PangolinTheme/PangolinContext 19 个引用方零改动，对外 API 完全不变 - 新增 web/usercenter/scripts/build-tokens.mjs： 仿 website 样板，prebuild/predev 自动从 css 生成 public/colors_and_type.css 去除 usercenter 手抄副本的漂移风险 - 更新 CLAUDE.md：补 token codegen 使用说明与单源模型 - 更新 design/SKILL.md：移除已删 flutter/ 引用，补 codegen 入口 验证：改 clay-500 → 三端 codegen 同步变化；flutter analyze 无新增 error。 注：design/flutter/ fork 手动删除（git rm 需用户执行） Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
wangjia
+4
-4
@@ -1,6 +1,6 @@
|
||||
---
|
||||
name: pangolin-design
|
||||
description: Use this skill to generate well-branded interfaces and assets for 穿山甲 (Pangolin) — for production (Flutter client, Go backend, web) or throwaway prototypes/mocks. Contains the full design system (tokens, type, brand assets), four React UI kits (mobile / desktop / website / usercenter), a ready-to-run Flutter token+widget package, and a backend architecture blueprint. Invoke whenever building or reproducing any Pangolin surface.
|
||||
description: Use this skill to generate well-branded interfaces and assets for 穿山甲 (Pangolin) — for production (Flutter client, Go backend, web) or throwaway prototypes/mocks. Contains the full design system (tokens, type, brand assets), four React UI kits (mobile / desktop / website / usercenter), and a backend architecture blueprint. Invoke whenever building or reproducing any Pangolin surface.
|
||||
user-invocable: true
|
||||
---
|
||||
|
||||
@@ -20,8 +20,8 @@ user-invocable: true
|
||||
| 路径 | 内容 | 用途 |
|
||||
|---|---|---|
|
||||
| `CLAUDE.md` | 铁律 / 套餐口径 / 页面清单 / **工作步骤 §9** | 一切工作的总纲 |
|
||||
| `colors_and_type.css` | CSS 令牌(唯一真相源) | HTML/Web 直接链入 |
|
||||
| `flutter/` | Dart 令牌镜像 + widgets + pubspec + main.dart | Flutter 客户端起步包,拿来即跑 |
|
||||
| `colors_and_type.css` | CSS 令牌(唯一真相源) | HTML/Web 直接链入；codegen 到 Flutter/usercenter |
|
||||
| `codegen/gen_flutter_tokens.mjs` | Flutter token 生成器 | 改 css 后跑一次生成 `client/lib/pangolin_tokens.gen.dart` |
|
||||
| `ui_kits/mobile/` | 移动 App 完整原型(登录/引导/4 Tab/账户子页/滑动切换) | 客户端像素验收标准 |
|
||||
| `ui_kits/tablet/` | iPad 客户端(侧栏分栏布局,触控尺寸,复用 mobile 原子) | 同上(平板) |
|
||||
| `ui_kits/desktop/` | 桌面客户端(920×600 侧栏布局 + 登录/引导) | 同上(桌面) |
|
||||
@@ -34,7 +34,7 @@ user-invocable: true
|
||||
完整版见 **CLAUDE.md §9**,摘要:
|
||||
|
||||
1. **进场必读**:CLAUDE.md §1 → §7 → §5;再读 `colors_and_type.css` + 目标端的 UI Kit 源码。
|
||||
2. **Flutter 客户端**:用 `flutter/` 起步包建工程(pubspec 覆盖 → 拷 theme/widgets/main → 配字体 → `flutter run` 即出演示态);再对照 `ui_kits/mobile/` 逐屏补齐(智能选择推荐卡、免费额度卡+看广告解锁、Tab 滑动切换);先演示数据,后按 `server/ARCHITECTURE.md` §3 契约接 API。
|
||||
2. **Flutter 客户端**:token 层由 `design/codegen/gen_flutter_tokens.mjs` codegen 到 `client/lib/pangolin_tokens.gen.dart`，通过 `pangolin_theme.dart` import/export 提供给全项目，**无需手抄颜色**；屏幕/组件在 `client/lib/` 里实现，对照 `ui_kits/mobile/` 逐屏补齐；先演示数据，后按 `server/ARCHITECTURE.md` §3 契约接 API。
|
||||
3. **后端(Go)**:按 `server/ARCHITECTURE.md` §7 模块顺序:openapi → auth → codes → devices → nodes → usage → 管理端。每模块:单测 + OpenAPI 同步 + 双语错误文案 + 脱敏。
|
||||
4. **官网 / 用户中心**:以 `ui_kits/website/`、`ui_kits/usercenter/` 为样板迁移到正式框架,保留 i18n 单显、响应式与脱敏文案;用户中心接 me/redeem/devices,2FA 用 TOTP。
|
||||
5. **每个界面提交前自查**(完整清单见 CLAUDE.md §9 第 4 步):语义 token 无硬编码色 / 明暗+中英四态验证 / 无红线词 / 套餐数字与 §7 一致 / Lucide 图标无 emoji / 连接键三态与原型一致 / 无 App 内支付。
|
||||
|
||||
Reference in New Issue
Block a user