Files

T

wangjia b04cef3cc4 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>

2026-06-15 18:27:22 +08:00

4.8 KiB

Raw Permalink Blame History

name, description, user-invocable

name	description	user-invocable
pangolin-design	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.	true

穿山甲 · Pangolin — 设计与实现技能

这套技能让你(含 Claude Code)完全还原穿山甲的设计并落地为产品。UI 以 ui_kits/ 的 React 原型为像素基准;客户端生产代码用 Flutter;后端按 server/ARCHITECTURE.md 蓝本实现。

第一步:必读(顺序固定)

CLAUDE.md — 设计铁律 13 条(§1)、套餐口径单一来源(§7)、页面清单(§5)、实施工作步骤(§9)。先读它,§9 就是工作流。
README.md — 品牌语境、内容基础、视觉基础、图标系统、文件索引。
按需:colors_and_type.css(令牌真相源)、flutter/README.md(Flutter 接入)、server/ARCHITECTURE.md(后端)。

这是什么品牌

穿山甲 / Pangolin — 极简、轻量、亲和的跨平台消费级网络加速应用(对外一律不用"VPN"等红线词,见 CLAUDE.md 铁律 13)。暖大地色(穿山甲鳞甲)+ 大量留白 + 双语单显 + 深浅双主题。核心卖点:一键连接、智能选线、即开即用。

仓库地图

路径	内容	用途
`CLAUDE.md`	铁律 / 套餐口径 / 页面清单 / 工作步骤 §9	一切工作的总纲
`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 侧栏布局 + 登录/引导)	同上(桌面)
`ui_kits/website/`	官网(产品/定价/下载/文档/Blog,响应式+i18n)	官网迁移样板
`ui_kits/usercenter/`	Web 用户中心(概览/订阅导入/兑换/邀请/设置含 2FA,移动适配)	用户中心样板
`server/ARCHITECTURE.md`	Go 控制面 + WireGuard 数据面蓝本(数据模型/API/流程/实现顺序)	后端实现总纲
`assets/` `preview/`	品牌 SVG / 设计系统 specimen 卡	资产与规范预览

工作步骤(交给 Claude Code 的执行计划)

完整版见 CLAUDE.md §9,摘要:

进场必读:CLAUDE.md §1 → §7 → §5;再读 colors_and_type.css + 目标端的 UI Kit 源码。
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。
后端(Go):按 server/ARCHITECTURE.md §7 模块顺序:openapi → auth → codes → devices → nodes → usage → 管理端。每模块:单测 + OpenAPI 同步 + 双语错误文案 + 脱敏。
官网 / 用户中心:以 ui_kits/website/、ui_kits/usercenter/ 为样板迁移到正式框架,保留 i18n 单显、响应式与脱敏文案;用户中心接 me/redeem/devices,2FA 用 TOTP。
每个界面提交前自查(完整清单见 CLAUDE.md §9 第 4 步):语义 token 无硬编码色 / 明暗+中英四态验证 / 无红线词 / 套餐数字与 §7 一致 / Lucide 图标无 emoji / 连接键三态与原型一致 / 无 App 内支付。

铁律摘要(完整 13 条见 CLAUDE.md §1)

暖大地色调,绝不纯黑纯白大面积填充;主色 clay #B96A3D,绝不蓝紫渐变;圆角偏大;阴影柔和暖调;单语言显示(中/英切换,不并排);状态用色点+文字胶囊(无 emoji);国家用 2 字母码块(无 emoji 国旗);Lucide 细线图标;App 内无支付(兑换码+外部渠道:发卡店/USDT/TG/LINE/邮箱);品牌母题=行走穿山甲(拷 assets/*.svg,绝不重绘);不堆砌、留白即设计;全站脱敏(红线词清单见铁律 13)。

套餐口径(单一来源 = CLAUDE.md §7,改数字先改那里)

注册享 7 天免费试用(不限时长节点)→ 之后免费版 1 个基础节点 + 每日 10 分钟 + 每日使用前看激励视频解锁;PRO ¥25/月(年付 ¥20/月),80+ 线路,5 设备;团队版 ¥99/月 10 席位。

无指令时

若用户只调用技能未说要做什么:问他要建/设计什么,问几个聚焦问题,作为本品牌专家输出 —— 按需产出 HTML 原型、Flutter 生产代码或后端模块。

4.8 KiB Raw Permalink Blame History