CodeGanHaoZ

Gks QianLV UiSkill — AI skill for Claude Code

AI community

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

How to install Gks QianLV UiSkill

This entry records only its repository, not the path inside it, so there is no exact command to give. Open CodeGanHaoZ/gks-QianLV-uiSkill and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Gks QianLV UiSkill does

从旅行类 App 设计稿提炼的可主题切换移动端 UI 设计范式 —— 一套为 AI 编程助手（WorkBuddy / Claude Code / Cursor）打造的 Agent Skill。源于一次真实的 UI 设计还原需求：手里有 6 张旅行类 App 的设计稿（日期选择、旅行偏好、逐日行程、构建进度、地图行程、探索发现），需要把它们抽象成一套可复用的设计规范，而不是每次重新抄一遍样式。于是有了这个 Skill —— 它把设计稿里的视觉语言拆解成 8 个核心 Token + 8 个核心组件，并让主题色和图标系统可自由切换。下次再遇到同类 C 端界面，AI 直接按这套范式产出代码。

Alternatives in AI

Next AI Draw Io — Draw and edit draw.io diagrams by chatting with an AI 36.3k ★
Omniget — Udemy & Hotmart course downloader, YouTube downloader (yt-dlp GUI, 1,800+ sites) + desktop app for AI agents 13.9k ★
Opencodex — Universal provider proxy for OpenAI Codex & Claude Code — use any LLM (Claude, Gemini, Grok, DeepSeek, Ollama… 12.3k ★

README

gks-QianLV-uiSkill

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

![themes](https://img.shields.io/badge/themes-5-coral) ![icon sets](https://img.shields.io/badge/icon_sets-3-blue) ![platform](https://img.shields.io/badge/platform-Web%20%7C%20UniApp%20%7C%20Taro%20%7C%20Vue%20%7C%20RN-green) ![license](https://img.shields.io/badge/license-MIT-lightgrey)

📖 这个 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 个值，组件代码一处不动。**