Gks QianLV UiSkill

gks-QianLV-uiSkill

从旅行类 App 设计稿提炼的可主题切换移动端 UI 设计范式 —— 一套为 AI 编程助手（WorkBuddy / Claude Code / Cursor）打造的 Agent Skill。

   

📖 这个 Skill 怎么来的

源于一次真实的 UI 设计还原需求：手里有 6 张旅行类 App 的设计稿（日期选择、旅行偏好、逐日行程、构建进度、地图行程、探索发现），需要把它们抽象成**一套可复用的设计规范**，而不是每次重新抄一遍样式。

于是有了这个 Skill —— 它把设计稿里的视觉语言拆解成 **8 个核心 Token + 8 个核心组件**，并让主题色和图标系统**可自由切换**。下次再遇到同类 C 端界面，AI 直接按这套范式产出代码。

✨ 特性

特性	说明
🎨 5 套主题一键切换	Coral / Ocean / Forest / Lavender / Mono，改 data-theme 一行即可
📦 3 套图标系统	Emoji / Linear / Solid，data-icon-set 独立于主题切换
🧱 8 个核心 Token	换主题只改 8 个 CSS 变量，组件代码零改动
🧩 8 个核心组件	按钮、卡片、标签、进度、状态项、开关、TabBar 全覆盖
🌍 跨编译器复用	UniApp / Taro / Vue 3 / React / React Native 迁移指南齐备
🔄 状态可视化	loading / done / empty / error 各有独立视觉表达
🤖 Agent Skill 规范	符合规范格式，AI 助手按需加载，不占用额外上下文

🎨 五套主题

主题 ID	主色	适用场景
coral	#FF7A66	旅行、社交、生活（默认）
ocean	#2D7FF9	工具、效率、SaaS
forest	#1FAE6F	健康、户外、教育
lavender	#7C5CFF	娱乐、阅读、女性向
mono	#1A1A1A	极客、专业、B 端

🧱 8 个核心 Token

[data-theme] {
  --color-primary-50;   /* 极浅 — 主背景 / 选中态      */
  --color-primary-100;  /* 浅   — 卡片装饰             */
  --color-primary-300;  /* 中浅 — icon 容器            */
  --color-primary-500;  /* 主色 — 按钮 / 强调          */
  --color-primary-600;  /* 深   — 按钮 hover           */
  --color-primary-700;  /* 最深 — 文字强调             */
  --color-accent-soft;  /* 软强调 — 卡片 icon 背景     */
  --color-toggle-on;    /* toggle 开关选中色           */
}

**换主题 = 改这 8 个值，组件代码一处不动。**

🧩 8 个核心组件

组件	用途	关键规格
PrimaryButton	主操作	高 56 / 圆角 24 / 主色底 + 投影
TextButton	次要操作	muted 色文字，无背景
`ThemeC