Design System
Skill Verifiziert AktivBuild 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.
Funktionen
- Build or audit design systems
- Define design tokens and naming conventions
- Structure component libraries
- Establish contribution models and governance
- Generate design system documentation
Anwendungsfälle
- 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
Nicht-Ziele
- 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
Workflow
- 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
Praktiken
- Design system architecture
- Component governance
- Token management
- Documentation standards
Installation
npx skills add rampstackco/claude-skillsFührt das Vercel skills CLI (skills.sh) via npx aus — benötigt Node.js lokal und mindestens einen installierten skills-kompatiblen Agent (Claude Code, Cursor, Codex, …). Setzt voraus, dass das Repo dem agentskills.io-Format folgt.
Qualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
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
100Erstellen oder aktualisieren Sie ein professionelles Designsystem in Figma aus einer Codebasis. Verwenden Sie dies, wenn der Benutzer Variablen/Tokens erstellen, Komponentenbibliotheken erstellen, Theming (helle/dunkle Modi) einrichten, Foundations dokumentieren oder Lücken zwischen Code und Figma abgleichen möchte. Diese Fähigkeit lehrt WAS gebaut werden soll und in WELCHER REIHENFOLGE — sie ergänzt die `figma-use`-Fähigkeit, die lehrt WIE die Plugin-API aufgerufen wird. Beide Fähigkeiten sollten zusammen geladen werden.
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
96Nutzen Sie diese Fähigkeit, wenn Sie zum wiederverwendbaren UI-Paket von InsForge beitragen. Dies ist für Maintainer, die an Design-System-Primitiven, Exporten, Stilen und der verpackungsspezifischen Komponentenfunktionalität im InsForge-Monorepo bearbeiten.
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.