菜单
用于设计系统、UI/UX 设计决策、视觉风格定义、配色方案、字体选型、布局模式、间距系统、组件设计规范；当用户提到设计系统、design system、配色、色彩方案、color palette、字体、typography、布局、layout、间距、spacing、圆角、border-radius、阴影、shadow、设计规范、设计令牌、design token、品牌风格、brand style、视觉语言时使用。不用于纯后端逻辑、数据库设计或与 UI 无关的架构决策。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
将此技能应用于所有 uni-app / uniapp / uni-app x / UTS / HBuilderX / DCloud 跨端开发任务；包括 H5、小程序、App、HarmonyOS、鸿蒙元服务、pages.json、manifest.json、uni API、Pinia、条件编译、测试、CI/CD、安全、UTS 插件等场景。
Use when building, modifying, reviewing, upgrading, testing, launching, or troubleshooting Stripe integrations and operations across payments, Billing, Connect, Tax, Treasury, Terminal, fraud, disputes, reporting, SDKs, webhooks, and Stripe AI tooling.
用于 UI 视觉风格选型、风格方向探索、美学参考；当用户提到 UI 风格、视觉风格、glassmorphism、毛玻璃、brutalism、粗野主义、claymorphism、粘土风、neumorphism、新拟态、bento、便当盒布局、minimalism、极简、skeuomorphism、拟物、dark mode、暗色模式、flat design、扁平化、landing page 风格、dashboard 风格时使用。不用于配色/字体/间距等设计系统基础（用 design-system）。
用于基于 Next.js（React 全栈框架，App Router）构建 SSR/SSG/ISR/SPA 应用；当用户提到 Next.js、nextjs、App Router、Server Components、RSC、Server Actions、use server、use client、next/image、next/font、next/link、layout.tsx、page.tsx、loading.tsx、error.tsx、route.ts、middleware.ts、generateMetadata、revalidatePath、revalidateTag、useRouter、Turbopack、Vercel 部署时使用。不用于纯 React SPA（无 Next.js）、Pages Router（旧版）除非明确迁移需求、或与 Next.js 无关的 Node.js 后端框架。
用于基于 Nuxt 4（Vue 3 全栈框架）构建 SSR/SSG/SPA 应用；当用户提到 Nuxt、Nuxt4、nuxt.config、useFetch、useAsyncData、Nitro、server/api、app/pages、app/components、app/composables、defineNuxtConfig、NuxtPage、NuxtLayout、NuxtLink、middleware、layers、useHead、useSeoMeta 时使用。不用于纯 Vue 3 SPA（无 Nuxt）、Nuxt 2、或与 Nuxt 无关的 Node.js 后端框架。
用于基于 @xyflow/react（React Flow v12）构建节点图、工作流编辑器和交互式流程图；当用户提到 ReactFlow、@xyflow/react、节点图、流程图、DAG、工作流 UI、自定义节点/边、Handle、NodeProps、EdgeProps、useReactFlow、fitView、MiniMap、Controls 时使用。不用于纯 SVG 绘图、Canvas 图表或与 React Flow 无关的图表库（ECharts、D3、Chart.js 等）。
| name | design-system |
| description | 用于设计系统、UI/UX 设计决策、视觉风格定义、配色方案、字体选型、布局模式、间距系统、组件设计规范；当用户提到设计系统、design system、配色、色彩方案、color palette、字体、typography、布局、layout、间距、spacing、圆角、border-radius、阴影、shadow、设计规范、设计令牌、design token、品牌风格、brand style、视觉语言时使用。不用于纯后端逻辑、数据库设计或与 UI 无关的架构决策。 |
帮助 Agent 为 Web / 移动端项目建立或使用设计系统：配色方案、字体选型、间距/圆角/阴影系统、布局模式、组件设计规范、品牌视觉语言。
本 skill 负责设计系统层面的决策与规范。具体框架实现（React/Vue/SwiftUI）、CSS 方案（Tailwind/CSS Modules）由用户另行指定。
读取 references/color-system.md。
读取 references/typography.md。
读取 references/spacing-and-layout.md。
读取 references/component-patterns.md。
读取 references/brand-references.md。
当用户提到"参考某品牌风格"时，查阅对应品牌的视觉特征摘要。
| 场景 | 读取 |
|---|---|
| 配色系统与深色模式 | references/color-system.md |
| 字体选型与排版 | references/typography.md |
| 间距与布局 | references/spacing-and-layout.md |
| 组件设计规范 | references/component-patterns.md |
| 品牌视觉参考 | references/brand-references.md |
| 设计令牌定义 | references/design-tokens.md |
