Generate a complete, accessible brand design system from a brief — primitive → semantic → component DTCG tokens (color, type, spacing, radius, shadow, motion), light + dark, plus a single theme.css — verified for WCAG. Use when the user wants a from-scratch brand/design foundation, a new palette + type system, or a themeable token kit for a product.
中文简介正在准备中。当前显示原文说明。
查看安装方法安装前可以查看交给 AI 代理的指令内容。
Step 0 — is the kit here? This skill reads files from the kit. Check once:
ls ${CLAUDE_SKILL_DIR}/../../../tokens >/dev/null 2>&1 && echo KIT_OK || echo KIT_MISSINGOnKIT_MISSINGonly the skill folders were installed, which is whatnpx skills adddoes. Say so plainly, point the user atnpx ux-ui-agent-skills initor the plugin install, and stop. Do not guess the contents of a file you could not open.
Stand up the foundation (one token system everything renders from) before any screen. Get this right and every page stays consistent and themeable from one place.
${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md → Brief Inference). Pick an anchoring archetype from ${CLAUDE_SKILL_DIR}/../../../taste/aesthetic-systems.md..claude/rules/tokens-and-color.md → Color Generation.action.primary/-hover/destructive, text.{primary,secondary,on-action,link}, surface.{page,card,raised}, border.{default,strong}, feedback.{success,warning,error,info} — and the dark overrides (designed, not inverted).${CLAUDE_SKILL_DIR}/../../../tokens/motion.json-style durations/easings.${CLAUDE_SKILL_DIR}/../../../tokens/*.json (3-tier) + a single theme.css (the one shared source, [data-theme="dark"] overrides). Optionally feed the token-build pipeline (token-build skill) for other platforms.python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_tokens.py — valid JSON, all aliases resolve.python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_contrast.py — required text/action/border pairs pass WCAG AA in light AND dark; border.strong ≥ 3:1.python3 ${CLAUDE_SKILL_DIR}/../../../scripts/validate_theme_refs.py — every component var(--…) resolves to the theme.Output is a verified token foundation — the measurable part is provable (run
npm run verify). Brand "feel" still benefits from a human review against${CLAUDE_SKILL_DIR}/../../../taste/design-taste.md.
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Audit a UI or design against WCAG 2.2 AA/AAA and ARIA patterns, returning criterion-referenced findings with severity and specific fixes. Use when the user wants an accessibility check, contrast verification, keyboard/screen-reader review, or wants to confirm a component meets POUR.
中文简介正在准备中。当前显示原文说明。
Apply a visual direction — an archetype (high-end agency, editorial minimal, brutalist, soft-SaaS, dark-tech) or one of 138 named design systems (apple, linear-app, stripe, vercel, notion, material, shadcn, spotify, tesla…) — by resolving it into the token system. Use when the user wants a specific look/vibe/brand feel, or asks to make a design feel premium/expensive/non-generic.
中文简介正在准备中。当前显示原文说明。
Adversarial design critique of the current work — render it, look at it, and argue for rejection. Run after the gates are green, never instead of them.
中文简介正在准备中。当前显示原文说明。
Build a dense, data-heavy screen - an analytics console or a trading terminal - with real charts drawn from tokens: candlestick, volume, depth, stacked area, waterfall, scatter, correlation matrix, donut, gauge, sparklines, heatmaps and order books. Use when the request is a dashboard, terminal, monitoring view, data console, or any screen whose job is to show many numbers at once. Covers the layout sequence, the SVG geometry, the accessibility contract per chart type, and the contrast traps that only appear in dark mode.
中文简介正在准备中。当前显示原文说明。
Generate production-ready, accessible, token-driven component code for ANY framework — React+Tailwind, Next.js, SwiftUI, Vue, Svelte, Angular, Solid, Web Components/Lit, React Native, Flutter, Jetpack Compose, vanilla CSS, or CSS-in-JS. Use when the user wants working UI code for a component or screen in a specific stack.
中文简介正在准备中。当前显示原文说明。
Design a UI component spec to the house quality bar — anatomy, variants, sizes, the 8 states, token mapping, and accessibility. Use when the user wants to design or document a component (button, input, tabs, toast, combobox, date picker, modal, etc.) at the spec level before or alongside code. For generating framework code, use design-code.
中文简介正在准备中。当前显示原文说明。