Design System
技能 已验证 活跃Build or audit a design system including component library, design tokens, naming conventions, contribution model, and documentation. Use this skill whenever the user wants to build a design system, audit an existing system, define design tokens at the system level, structure a component library, or set up design system governance. Triggers on design system, component library, design tokens, atomic design, atoms, molecules, organisms, design system documentation, Storybook, Figma library, system governance, design contribution model. Also triggers when teams are inconsistent across products and a system is the answer.
To provide a structured, repeatable methodology for creating and maintaining robust design systems that ensure consistency across products and teams.
功能
- Build or audit design systems
- Define design tokens and naming conventions
- Structure component libraries
- Establish contribution models and governance
- Generate design system documentation
使用场景
- Building a new design system from scratch
- Auditing an existing system for gaps and fragmentation
- Structuring a component library and defining its foundations
- Setting up governance for design system contributions and evolution
非目标
- Designing a single page or component in isolation
- Brand identity work unrelated to the system's visual language
- Component-level frontend implementation
- Pure design documentation for marketing purposes
工作流
- Inventory existing UI and identify duplicates
- Define foundations (tokens)
- Audit and define elements (primitives)
- Identify and build priority components
- Document patterns and templates
- Establish governance and contribution model
- Roll out and migrate existing surfaces
实践
- Design system architecture
- Component governance
- Token management
- Documentation standards
安装
npx skills add rampstackco/claude-skills通过 npx 运行 Vercel skills CLI(skills.sh)— 需要本地安装 Node.js,以及至少一个兼容 skills 的智能体(Claude Code、Cursor、Codex 等)。前提是仓库遵循 agentskills.io 格式。
质量评分
已验证类似扩展
Ui Ux Pro Max
100UI/UX design intelligence with searchable style, palette, typography, and chart databases. Use when designing UI components, choosing colors/fonts, reviewing code for UX issues, building landing pages, or implementing responsive layouts.
Figma Generate Library
100从代码库在 Figma 中构建或更新专业级设计系统。当用户想要创建变量/令牌、构建组件库、设置主题（浅色/深色模式）、记录基础或协调代码和 Figma 之间的差距时使用。此技能教授要构建什么以及按什么顺序 — 它补充了教授如何调用插件 API 的 `figma-use` 技能。两个技能应一起加载。
UI Design System Toolkit
99UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.
Ui
96使用此技能可为 InsForge 的可复用 UI 包做出贡献。此技能适用于在 InsForge monorepo 中编辑设计系统基元、导出、样式和包级别组件行为的维护者。
Figma Generate Library
95Build or update a professional-grade design system in Figma from a codebase. Use when the user wants to create variables/tokens, build component libraries, set up theming (light/dark modes), document foundations, or reconcile gaps between code and Figma. This skill teaches WHAT to build and in WHAT ORDER — it complements the `figma-use` skill which teaches HOW to call the Plugin API. Both skills should be loaded together.
Figma Create Design System Rules
95Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.