Design Systems Agent Skills

Onboards brand tokens and generates a 12-token CSS palette for consistent, WCAG-AA-compliant HTML document styling across markdown conversions.

Generate design tokens, color palettes, typography scales, component systems, and developer handoff documentation for UI design systems.

Apply, document, or enforce brand guidelines for any product or company, covering color systems, typography, logo usage, brand voice, and visual identity.

Review UI implementations against design quality standards and design system compliance, or create distinctive, production-grade frontend interfaces from scratch.

Generate or audit design systems, check visual consistency, and review PRs that touch styling.

Implement Apple's Liquid Glass design system for iOS 26+ with dynamic glass materials, blur, reflection, and interactive morphing in SwiftUI, UIKit, and WidgetKit.

Walks through a step-by-step wizard to configure brand colors, typography, and scaffold the first screen for a new app using the StyleSeed design system.

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files.

Audits UI code for compliance with the StyleSeed design system, covering design tokens, component conventions, accessibility, mobile UX, and typography.

Manage design tokens by listing, adding, and updating them while keeping JSON sources, CSS variables, and dark-mode values in sync.

Build and maintain Rayden UI components and screens in Figma via Figma MCP with full design token enforcement.

Score a UI file's design quality 0-100 against StyleSeed's design language with per-category breakdown, worst offenders, and prioritized fix list.

Build or update a professional-grade design system in Figma from a codebase, creating variables, tokens, component libraries, theming, and documentation.

Generates custom design system rules for AI coding agents by analyzing a project's codebase and conventions, then saving them to the appropriate rule file (CLAUDE.md, AGENTS.md, or .cursor/rules).

Reverse-engineer a design system from frontend source code by analyzing component files, stylesheets, Tailwind configs, theme definitions, and design tokens to produce a comprehensive DESIGN.md document.

Analyzes a website's current design and user intent to produce a structured redesign specification, including product and design documents, a design system JSON, and a reasoning trace.

Create professional UI/UX designs in Penpot using MCP tools, with guidance on design systems, accessibility, and platform guidelines.

Build a comprehensive color system with palette generation, semantic mapping, and accessibility compliance.

Create a consistent spacing system based on a base unit with contextual application rules for harmonious interfaces.

Facilitate structured design critiques with clear feedback frameworks and actionable outcomes.

Define and organize design tokens for color, spacing, typography, elevation, and motion with naming conventions and usage guidance.

Identify, categorize, and prioritize accumulated design inconsistencies and structural problems across a product.

Design a theming architecture that supports brand variants, dark mode, and high-contrast modes with token mapping.

Define a set of actionable design principles that guide decision-making and resolve trade-offs.

Create systematic QA checklists to verify that design implementations match specifications across visual accuracy, layout, interaction, content, accessibility, and cross-platform categories.

Structure a pattern library entry with problem context, solution pattern, usage examples, and related patterns.

Establish clear naming conventions for design assets, components, and tokens to make design systems predictable and maintainable.

Write clear design rationale that connects decisions to user needs, business goals, and principles.

Define version control strategies for design files, component libraries, and design assets to enable team collaboration and consistency.

Audit design token usage across a product for consistency and coverage, identifying hard-coded values and gaps.

Define the processes, roles, and decision frameworks that keep a design system healthy and evolving without fragmentation.

Check a screen's brand expression by comparing it against mood, voice, and design token reference files, flagging divergences and suggesting corrections.

Generates DESIGN.md files for Google Stitch that encode premium, anti-generic UI standards including typography, color, layout, motion, and anti-patterns.

Defines and manages brand identity including voice, visual standards, messaging frameworks, asset organization, and consistency audits.

Creates and manages design tokens with a three-layer architecture (primitive, semantic, component), generates CSS variables and component specifications, and produces brand-compliant slide presentations with Chart.js integration.

Documents HP's design language with color tokens, typography hierarchy, and layout patterns for building enterprise-consumer interfaces.