home / skills / cyangzhou / -2--project-yunshu- / frontend_design_system

frontend_design_system skill

safe

This skill translates UI design requirements into production-grade frontend code with design tokens, accessibility compliance, and artistic execution.

npx playbooks add skill cyangzhou/-2--project-yunshu- --skill frontend_design_system

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

436 B

---
name: Frontend_Design_System
description: 将 UI 样式需求转化为生产级的前端代码，支持设计令牌、可访问性合规和创意执行。
---

# 前端设计系统技能

系统化且极具创意的前端开发。

## 核心原则
1. **系统 + 创意**: 拒绝平庸，追求独特审美。
2. **令牌优先**: 所有视觉属性源于令牌系统。
3. **技术栈**: 默认使用 React + Tailwind + shadcn/ui。

Overview

This skill converts UI style requirements into production-grade frontend code, delivering a scalable design system that balances creativity with engineering rigor. It centralizes visual decisions into design tokens, enforces accessibility compliance, and ships ready-to-use components. The default implementation uses React, Tailwind CSS, and shadcn/ui as a pragmatic, developer-friendly stack.

How this skill works

I inspect your visual specifications, map colors, spacing, typography, and interaction patterns into a token system, then generate reusable React components styled with Tailwind utility classes. Components are organized, documented, and wired for theming and accessibility by default. The output includes token definitions, component code, examples, and basic tests to accelerate production adoption.

When to use it

Creating a new product UI with consistent design language
Consolidating scattered styles into a single token-driven system
Migrating legacy CSS to a component-based architecture
Ensuring accessibility compliance across a component library
Rapidly prototyping creative UI concepts with production-ready code

Best practices

Start with a minimal set of tokens (color, spacing, type) and iterate
Keep components focused and composable to avoid duplication
Embed accessibility attributes and keyboard behavior in primitives
Version tokens and components to manage design evolution
Document usage examples and visual regression tests for each component

Example use cases

Ship a themeable component library for a multi-brand platform
Replace ad-hoc CSS with token-driven Tailwind components
Audit and remediate accessibility issues across UI primitives
Deliver high-fidelity prototypes that convert to production code
Implement dark mode and responsive token scales across products

FAQ

Which tech stack does the skill target?

The default stack is React + Tailwind CSS + shadcn/ui, but token-first outputs can be adapted to other frameworks.

How are accessibility concerns handled?

Accessibility is baked into primitives: semantic markup, ARIA where needed, focus management, and automated checks in the CI pipeline.