design-language-system

What it does

This skill provides a structured framework for defining and managing consistent visual elements across frontend projects. It enables AI agents to generate code that adheres to specific brand guidelines, ensuring uniformity in typography, colors, spacing, and component styles.

When to use it

• Brand Consistency: When building multiple pages or components that must share a unified look and feel.
• Component Libraries: When creating reusable UI kits where style tokens need to be centrally managed.
• Design Handoff: When translating Figma designs into code with strict adherence to established design systems.
• Theming: When applying specific visual themes to applications without rewriting core CSS or styling logic.

Key capabilities

• Defines centralized design tokens for colors, fonts, and spacing.
• Enforces consistent component styling across the application.
• Streamlines the process of updating global styles in one place.
• Facilitates easier onboarding for developers by providing clear style rules.

Example prompts

• "Generate a React navigation bar using the design-language-system tokens."
• "Create a button component that follows the established typography and color palette from the system."
• "Apply the current spacing scale to this card layout to ensure it matches our design guidelines."

Tips & gotchas

Ensure your project has the necessary design token variables initialized before invoking style generation. This skill is most effective when used in conjunction with a pre-defined set of visual rules or a Figma file linked to the system.