Design Systems Agent Skills

Provides a comprehensive design system specification inspired by Tesla's website, covering visual theme, color palette, typography, and UI patterns.

Documents the design system for Cursor's marketing site, including color palette, typography, layout, and component tokens.

Documents the design system behind Ollama's marketing site, including color tokens, typography hierarchy, spacing, and component patterns for a minimal, documentation-first aesthetic.

Analyzes Stripe's design language, documenting its color system, typography, layout, and component patterns for use in design projects.

Documents Ferrari's brand design system including color palette, typography, spacing, and layout tokens for use in marketing materials.

Documents the Raycast design system with color tokens, typography hierarchy, and surface modes for building consistent dark-mode interfaces.

Analyzes and documents Webflow's design language, including color palette, typography hierarchy, spacing system, and layout principles for use in design systems.

Analyzes Mintlify's design system, documenting its dual-mode aesthetic of atmospheric marketing heroes and dense developer documentation surfaces, including color tokens, typography hierarchy, and layout patterns.

Analyze and recreate the visual design language of Voltagent, a developer-focused AI agent engineering platform, including its dark canvas, electric-green accent, typography system, and layout patterns.

Documents Mistral AI's visual design system including sunset gradient color palette, typography pairing of PP Editorial Old with Inter, spacing tokens, and layout patterns across six page types.

Analyzes and documents the design system of Together AI's website, extracting colors, typography, and surface patterns for use in design projects.

Builds and enforces brand identity through structured agents covering positioning, voice, visual systems, and consistency audits, with behavioral science frameworks applied throughout.

Defines and applies design tokens for Vue 3 + shadcn-vue projects, including CSS variables, Tailwind configuration, and usage patterns.

Extrai tokens de cor, tipografia, grid, logo e componentes do Figma e grava na seção 3 do contexto, marcando itens inferidos quando não há acesso ao Figma.

Canonical design token registry covering colors, typography, spacing, sizing, border radius, shadows, z-index, breakpoints, motion, and focus tokens, with a CSS variable template for project setup.

Establishes or validates a canonical Icon wrapper component, size token scale, stroke weight conventions, and illustration usage standards for a project, creating src/components/ui/icon.tsx and documenting the system.

Designs and iterates production-grade frontend interfaces, covering UX review, visual hierarchy, accessibility, performance, responsive behavior, theming, typography, layout, color, motion, and design systems. Handles websites, landing pages, dashboards, product UI, components, forms, and more.

Manages design systems in Stitch by retrieving project assets, creating or updating design systems from DESIGN.md files, and applying them to screens.