ant-design-vue-design-tokens
Maintains design token compliance for Ant Design Vue.
Install
mkdir -p .claude/skills/ant-design-vue-design-tokens && curl -L -o skill.zip "https://agentskills.codes/api/skills/download/13552" && unzip -o skill.zip -d .claude/skills/ant-design-vue-design-tokens && rm skill.zipInstalls to .claude/skills/ant-design-vue-design-tokens
Activation
This is the description your AI agent reads to decide when to run this skill — the better it matches your request, the more reliably it fires.
Visual design token rules for Vue 3 + Ant Design Vue 4.x admin pages. Use when choosing colors, spacing, border-radius, or button styles. Enforces unified enterprise admin styling — no handmade color/spacing values. This is part of the ant-design-vue skill family — for layout/response, see ant-design-vue-responsive-layout.Key capabilities
- →Select colors for Ant Design Vue 4.x admin pages.
- →Determine spacing values using a predefined set.
- →Apply border-radius values from an approved list.
- →Standardize button styles for enterprise admin UIs.
- →Ensure visual consistency across all admin pages.
How it works
This skill provides specific rules for design tokens, including approved values for spacing, border-radius, and colors, to maintain a unified enterprise admin UI style.
Inputs & outputs
When to use ant-design-vue-design-tokens
- →Selecting colors for admin pages
- →Standardizing button styles
- →Applying consistent spacing rules
About this skill
Design Tokens（企业后台设计规范）
你专注 Vue 3 + Ant Design Vue 4.x 的视觉设计规范。 目标是确保所有页面视觉统一，不出现散点样式。
When to Apply
- 选择颜色、间距、圆角时
- 确定按钮样式时
- 统一页面视觉风格时
- 用户提到"样式"、"颜色"、"间距"、"圆角"、"设计规范"等关键词
不涵盖的内容
- 响应式布局 → 参考 [[ant-design-vue-responsive-layout]]
- 表单/弹窗 → 参考 [[ant-design-vue-form-modal]]
设计定位
这是一个企业后台 UI 风格，不是官网、营销页、作品集。
默认风格：
- 简洁、稳、清晰、有层级、易读、可维护、适度精致
要求：
- 页面信息分区明确
- 视觉层级清晰
- 表单和表格不拥挤
- 状态和操作一眼能懂
- 不堆无意义渐变、阴影、动画
- 不把营销站风格硬套到后台系统
间距规范
仅使用：
4 / 8 / 12 / 16 / 24 / 32
禁止：
- 10、14、18、22 等散点间距
圆角规范
仅使用：
6 / 8 / 10 / 12
禁止：
- 组件中手写临时圆角值
颜色规范
优先使用 Ant Design 语义色，不随意造色：
| 语义 | 颜色值 |
|---|---|
| Primary | #1677ff |
| Success | #52c41a |
| Warning | #faad14 |
| Error | #ff4d4f |
| Border | #d9d9d9 |
| 主文本 | rgba(0,0,0,0.88) |
| 次文本 | rgba(0,0,0,0.65) |
技术约束
- Vue 3 +
script setup - JavaScript（不使用 TypeScript）
- Ant Design Vue 4.x
When not to use it
- →When designing responsive layouts.
- →When the project is not a Vue 3 + Ant Design Vue 4.x admin page.
Limitations
- →This skill is specific to Vue 3 + Ant Design Vue 4.x admin pages.
- →It does not cover responsive layouts, forms, or modals.
- →It enforces a default style that is concise, stable, clear, hierarchical, readable, and maintainable.
How it compares
This skill prevents the use of custom or inconsistent styling by enforcing a limited set of approved design token values, unlike a manual approach that might introduce visual discrepancies.
Compared to similar skills
ant-design-vue-design-tokens side by side with the closest alternatives in the catalog.
| Skill | Installs | Updated | Safety | Difficulty |
|---|---|---|---|---|
| ant-design-vue-design-tokens (this skill) | 0 | 1mo | No flags | Beginner |
| front | 0 | 4mo | Caution | Beginner |
| ui-ux-pro-max | 1,909 | 5mo | Review | Intermediate |
| scroll-experience | 101 | 6mo | No flags | Intermediate |
Try saying
Example prompts that trigger this skill in your AI assistant.
More by keepsty
View all by keepsty →You might also like
front
Shuimo03
PromptWizard 前端开发 Skill。适用于 Vue 3 + Vite + Ant Design Vue + axios 场景下的组件开发、页面调整、API 接入和展示层修复。默认遵循当前仓库的 JavaScript 写法，而不是假设 TypeScript、Pinia 或 HeroUI 已经存在。
ui-ux-pro-max
nextlevelbuilder
UI/UX design intelligence. 50 styles, 21 palettes, 50 font pairings, 20 charts, 8 stacks (React, Next.js, Vue, Svelte, SwiftUI, React Native, Flutter, Tailwind). Actions: plan, build, create, design, implement, review, fix, improve, optimize, enhance, refactor, check UI/UX code. Projects: website, landing page, dashboard, admin panel, e-commerce, SaaS, portfolio, blog, mobile app, .html, .tsx, .vue, .svelte. Elements: button, modal, navbar, sidebar, card, table, form, chart. Styles: glassmorphism, claymorphism, minimalism, brutalism, neumorphism, bento grid, dark mode, responsive, skeuomorphism, flat design. Topics: color palette, accessibility, animation, layout, typography, font pairing, spacing, hover, shadow, gradient.
scroll-experience
davila7
Expert in building immersive scroll-driven experiences - parallax storytelling, scroll animations, interactive narratives, and cinematic web experiences. Like NY Times interactives, Apple product pages, and award-winning web experiences. Makes websites feel like experiences, not just pages. Use when: scroll animation, parallax, scroll storytelling, interactive story, cinematic website.
vue-best-practices
antfu
MUST be used for Vue.js tasks. Strongly recommends Composition API with `<script setup>` and TypeScript as the standard approach. Covers Vue 3, SSR, Volar, vue-tsc. Load for any Vue, .vue files, Vue Router, Pinia, or Vite with Vue work. ALWAYS use Composition API unless the project explicitly requires Options API.
visual-design-foundations
wshobson
Apply typography, color theory, spacing systems, and iconography principles to create cohesive visual designs. Use when establishing design tokens, building style guides, or improving visual hierarchy and consistency.
anthropic-frontend-design
chaibuilder
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI). Generates creative, polished code and UI design that avoids generic AI aesthetics.