Design Systems

alirezarezvani Bundle

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

alirezarezvani Bundle

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

alirezarezvani Bundle

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

microsoft Bundle

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

affaan-m Skill

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

affaan-m Skill

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

antigravity Skill

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.

antigravity Skill

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

antigravity Skill

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

antigravity Skill

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

antigravity Skill

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

antigravity Skill

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

openai Bundle

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

openai Bundle

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).

google-labs-code Bundle

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.

adobe Bundle

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.

github Bundle

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

owl-listener Skill

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

owl-listener Skill

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

owl-listener Skill

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

owl-listener Skill

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

owl-listener Skill

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

owl-listener Skill

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

owl-listener Skill

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

owl-listener Skill

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

owl-listener Skill

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

owl-listener Skill

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

owl-listener Skill

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

owl-listener Skill

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

owl-listener Skill

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

owl-listener Skill

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

owl-listener Skill

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

leonxlnx Bundle

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

nextlevelbuilder Bundle

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

nextlevelbuilder Bundle

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.

voltagent Bundle

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