DESIGN.md Design Systems
by @voltagent · plugin · 74 skills
Ready-to-use DESIGN.md design systems extracted from real products, from VoltAgent's awesome-design-md.
Install the whole plugin (CLI)
npx skillmds add voltagent/hp-design-analysis
npx skillmds add voltagent/bmw-design-analysis
npx skillmds add voltagent/cal-com-design-analysis
npx skillmds add voltagent/ibm-design-analysis
npx skillmds add voltagent/clay-design-analysis
npx skillmds add voltagent/expo-design-analysis
npx skillmds add voltagent/meta-design-analysis
npx skillmds add voltagent/miro-design-analysis
npx skillmds add voltagent/nike-design-analysis
npx skillmds add voltagent/uber-inspired-design-analysis
npx skillmds add voltagent/warp-inspired-design-analysis
npx skillmds add voltagent/wise-inspired-design-analysis
npx skillmds add voltagent/xai-inspired-design-analysis
npx skillmds add voltagent/apple-design-analysis
npx skillmds add voltagent/bmw-m-design-analysis
npx skillmds add voltagent/figma-design-analysis
npx skillmds add voltagent/slacc-inspired-design-analysis
npx skillmds add voltagent/tesla
npx skillmds add voltagent/wired-inspired-design-analysis
npx skillmds add voltagent/airbnb-design-analysis
npx skillmds add voltagent/claude-design-analysis
npx skillmds add voltagent/cohere-design-analysis
npx skillmds add voltagent/cursor-design-analysis
npx skillmds add voltagent/framer-design-analysis
npx skillmds add voltagent/kraken
npx skillmds add voltagent/notion-design-analysis
npx skillmds add voltagent/nvidia-design-analysis
npx skillmds add voltagent/ollama-design-analysis
npx skillmds add voltagent/resend-design-analysis
npx skillmds add voltagent/sanity
npx skillmds add voltagent/sentri-inspired-design-analysis
npx skillmds add voltagent/spacex-inspired-design-analysis
npx skillmds add voltagent/stripi-inspired-design-analysis
npx skillmds add voltagent/vercel-inspired-design-analysis
npx skillmds add voltagent/zapier-inspired-design-analysis
npx skillmds add voltagent/binance-design-analysis
npx skillmds add voltagent/bugatti-design-analysis
npx skillmds add voltagent/ferrari-design-analysis
npx skillmds add voltagent/lovable
npx skillmds add voltagent/minimax-design-analysis
npx skillmds add voltagent/mongodb-design-analysis
npx skillmds add voltagent/posthog-design-analysis
npx skillmds add voltagent/raycast
npx skillmds add voltagent/renault-design-analysis
npx skillmds add voltagent/revolut-design-analysis
npx skillmds add voltagent/shopifi-inspired-design-analysis
npx skillmds add voltagent/spotify
npx skillmds add voltagent/webflow-inspired-design-analysis
npx skillmds add voltagent/airtable-design-analysis
npx skillmds add voltagent/coinbase-design-analysis
npx skillmds add voltagent/composio-design-analysis
npx skillmds add voltagent/intercom-design-analysis
npx skillmds add voltagent/mintlify-design-analysis
npx skillmds add voltagent/runwayml
npx skillmds add voltagent/supabase
npx skillmds add voltagent/theverge
npx skillmds add voltagent/vodafone-inspired-design-analysis
npx skillmds add voltagent/dell-1996-inspired
npx skillmds add voltagent/hashicorp-design-analysis
npx skillmds add voltagent/pinterest-design-analysis
npx skillmds add voltagent/replicate-design-analysis
npx skillmds add voltagent/starbucks
npx skillmds add voltagent/voltagent-inspired-design-analysis
npx skillmds add voltagent/clickhouse-design-analysis
npx skillmds add voltagent/elevenlabs
npx skillmds add voltagent/linear-design-analysis
npx skillmds add voltagent/mastercard
npx skillmds add voltagent/mistral-ai-design-analysis
npx skillmds add voltagent/superhumon-inspired-design-analysis
npx skillmds add voltagent/lamborghini
npx skillmds add voltagent/opencode-design-analysis
npx skillmds add voltagent/playstation-design-analysis
npx skillmds add voltagent/together-ai-inspired-design-analysis
npx skillmds add voltagent/nintendo-com-2001-analysisSkills in this plugin
- ▌ hp-design-analysis · voltagent bundleDocuments HP's design language with color tokens, typography hierarchy, and layout patterns for building enterprise-consumer interfaces.
- ▌ bmw-design-analysis · voltagent bundleDocuments the design system of BMW's corporate website, including color palette, typography, spacing, and layout tokens for UI implementation.
- ▌ cal-com-design-analysis · voltagent bundleAnalyzes and documents the Cal.com design system, including color tokens, typography hierarchy, spacing, and component patterns for use in design implementations.
- ▌ ibm-design-analysis · voltagent bundleDocuments IBM's marketing design system based on Carbon Design System, including colors, typography, layout, and component specifications for enterprise marketing canvases.
- ▌ clay-design-analysis · voltagent bundleDefines a vibrant claymation-meets-data design system for Clay.com, including color palette, typography, layout, and elevation tokens for GTM-data interfaces.
- ▌ expo-design-analysis · voltagent bundleDocuments the visual design system of Expo's marketing site, including color palette, typography, layout, and component styles for consistent brand implementation.
- ▌ meta-design-analysis · voltagent bundleDocuments Meta's design system for commerce surfaces, including color tokens, typography hierarchy, spacing, and responsive patterns for hardware merchandising.
- ▌ miro-design-analysis · voltagent bundleDocuments Miro's brand design system including colors, typography, layout, and component patterns for visual consistency.
- ▌ nike-design-analysis · voltagent bundleDocuments Nike's commerce design system: photography-first layouts, typographic hierarchy, color palette, and component patterns across PLP, PDP, and editorial pages.
- ▌ uber-inspired-design-analysis · voltagent bundleAnalyzes and recreates Uber's design language: a black-and-white palette, custom geometric display and text fonts, pill-shaped interactive elements, and editorial 4:3 illustrations for transportation and delivery interfaces.
- ▌ warp-inspired-design-analysis · voltagent bundleAnalyzes Warp's design language—warm dark canvas, restrained Inter typography, tight button radii, and terminal-mockup imagery—to extract a reusable design token system.
- ▌ wise-inspired-design-analysis · voltagent bundleAnalyzes and documents Wise's design language, including color palette, typography, spacing, and layout tokens for use in design systems.
- ▌ xai-inspired-design-analysis · voltagent bundleAnalyze and replicate xAI's design language: near-black canvas, white pill outlines, Universal Sans display type, and Geist Mono technical labels.
- ▌ apple-design-analysis · voltagent bundleDocuments Apple's design system including color tokens, typography hierarchy, spacing rhythm, and component patterns across five surfaces.
- ▌ bmw-m-design-analysis · voltagent bundleDefines the BMW M brand design system with a near-black canvas, white BMW Type Next Latin typography, full-bleed automotive photography, and the M tricolor stripe as a signature accent.
- ▌ figma-design-analysis · voltagent bundleAnalyzes and documents Figma's marketing design system, including color tokens, typography hierarchy, spacing, and component patterns.
- ▌ slacc-inspired-design-analysis · voltagentDocuments Slacc's design language including color palette, typography hierarchy, spacing system, and layout tokens for UI implementation.
- ▌ tesla · voltagent bundleProvides a comprehensive design system specification inspired by Tesla's website, covering visual theme, color palette, typography, and UI patterns.
- ▌ wired-inspired-design-analysis · voltagent bundleAnalyzes and recreates Wired magazine's editorial design language: a strict black-and-white duet, proprietary serif/sans typographic system, square buttons, magazine-style story grid, and hairline borders.
- ▌ airbnb-design-analysis · voltagent bundleAnalyzes Airbnb's design system including color palette, typography, shape language, and component patterns for use in design projects.
- ▌ claude-design-analysis · voltagent bundleDocuments the warm, editorial design system of Claude.com, including color palette, typography, spacing, and surface modes for consistent brand implementation.
- ▌ cohere-design-analysis · voltagent bundleDocuments Cohere's 2026 web design system with color palettes, typography hierarchy, spacing, and layout principles for enterprise AI interfaces.
- ▌ cursor-design-analysis · voltagent bundleDocuments the design system for Cursor's marketing site, including color palette, typography, layout, and component tokens.
- ▌ framer-design-analysis · voltagent bundleAnalyze Framer's marketing site design system, including color palette, typography hierarchy, spacing, and component patterns, to produce a structured design specification.
- ▌ kraken · voltagent bundleProvides a complete design system specification for Kraken's brand identity, including color palette, typography, component styling, and layout principles for building professional crypto exchange interfaces.
- ▌ notion-design-analysis · voltagent bundleDocuments Notion's brand design system including color tokens, typography hierarchy, layout spacing, and component geometry across homepage, enterprise, AI, agents, startups, and pricing surfaces.
- ▌ nvidia-design-analysis · voltagent bundleProvides a design system specification for NVIDIA's marketing pages, including color tokens, typography hierarchy, and component patterns for building engineering-style landing pages.
- ▌ ollama-design-analysis · voltagent bundleDocuments the design system behind Ollama's marketing site, including color tokens, typography hierarchy, spacing, and component patterns for a minimal, documentation-first aesthetic.
- ▌ resend-design-analysis · voltagent bundleAnalyzes and documents Resend's brand design system, including color palette, typography, spacing, and component patterns for dark-themed developer tools.
- ▌ sanity · voltagent bundleProvides a comprehensive design system specification inspired by Sanity's visual identity, including color palette, typography, spacing, and component styles for building dark-themed developer interfaces.
- ▌ sentri-inspired-design-analysis · voltagent bundleDocuments Sentri's design language with color tokens, typography hierarchy, and layout patterns for a developer-tools brand.
- ▌ spacex-inspired-design-analysis · voltagent bundleAnalyzes and documents SpaceX's design language, including color palettes, typography, layout, and elevation, for use in design systems and brand guidelines.
- ▌ stripi-inspired-design-analysis · voltagent bundleAnalyzes Stripe's design language, documenting its color system, typography, layout, and component patterns for use in design projects.
- ▌ vercel-inspired-design-analysis · voltagent bundleAnalyzes Vercel's design language, documenting its color system, typography, surface hierarchy, and gradient-based decorative system for use in design systems or brand analysis.
- ▌ zapier-inspired-design-analysis · voltagent bundleDocuments Zapier's design language with color palette, typography hierarchy, spacing system, and component specifications for UI implementation.
- ▌ binance-design-analysis · voltagent bundleAnalyzes Binance's design system: near-black canvas, single yellow accent (#FCD535), custom BinanceNova/BinancePlex type stack, multi-theme dark/light modes, and trading green/red semantics.
- ▌ bugatti-design-analysis · voltagent bundleDocuments the Bugatti brand design system: a black-and-white interface with custom typefaces, no accent color, and full-bleed photography as the only visual element.
- ▌ ferrari-design-analysis · voltagent bundleDocuments Ferrari's brand design system including color palette, typography, spacing, and layout tokens for use in marketing materials.
- ▌ lovable · voltagent bundleProvides a design system specification inspired by Lovable's website, including visual theme, color palette, typography rules, and component styling for building warm, approachable interfaces.
- ▌ minimax-design-analysis · voltagent bundleAnalyzes MiniMax's design system, documenting its dual identity of stark monochrome marketing and vibrant gradient product cards, with detailed color, typography, and layout tokens.
- ▌ mongodb-design-analysis · voltagent bundleDocuments MongoDB's visual design system including colors, typography, layout, elevation, and shapes for UI implementation.
- ▌ posthog-design-analysis · voltagent bundleDocuments PostHog's design system: a warm cream canvas, hand-drawn hedgehog mascots, IBM Plex Sans typography, and a single yellow-orange CTA pill, with detailed color, typography, and component specifications.
- ▌ raycast · voltagent bundleDocuments the Raycast design system with color tokens, typography hierarchy, and surface modes for building consistent dark-mode interfaces.
- ▌ renault-design-analysis · voltagent bundleDocuments Renault's brand design system including color palette, typography hierarchy, and layout principles for web implementation.
- ▌ revolut-design-analysis · voltagent bundleDocuments Revolut's marketing design system: two-mode canvas (black/white), Aeonik Pro display typography, cobalt-violet brand accent, pill-shaped buttons, and product-led photography.
- ▌ shopifi-inspired-design-analysis · voltagent bundleAnalyzes and documents a two-track design system with cinematic dark marketing pages and light transactional surfaces, including color palettes, typography hierarchy, and component vocabulary.
- ▌ spotify · voltagent bundleProvides a detailed design system specification inspired by Spotify's dark theme, including color palette, typography, component styling, and layout principles for building immersive music-player interfaces.
- ▌ webflow-inspired-design-analysis · voltagent bundleAnalyzes and documents Webflow's design language, including color palette, typography hierarchy, spacing system, and layout principles for use in design systems.
- ▌ airtable-design-analysis · voltagent bundleDocuments Airtable's design system including color tokens, typography hierarchy, spacing, and component patterns for building editorial-style marketing interfaces.
- ▌ coinbase-design-analysis · voltagent bundleDocuments the visual design system of Coinbase's marketing surfaces, including color palette, typography, layout, and elevation tokens.
- ▌ composio-design-analysis · voltagent bundleDocuments the design system for Composio's marketing site, including color palette, typography, layout, elevation, shapes, and component specifications.
- ▌ intercom-design-analysis · voltagent bundleDocuments Intercom's design system including color palette, typography hierarchy, spacing tokens, and layout patterns for marketing surfaces.
- ▌ mintlify-design-analysis · voltagent bundleAnalyzes 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.
- ▌ runwayml · voltagent bundleProvides a design system specification inspired by Runway's cinematic, dark-themed interface with full-bleed photography, single-typeface typography, and minimal UI elements.
- ▌ supabase · voltagent bundleProvides the complete design language for Supabase marketing surfaces, including color tokens, typography hierarchy, spacing system, and component styles.
- ▌ theverge · voltagent bundleProvides a comprehensive design system specification inspired by The Verge's 2024 redesign, including color palette, typography, and component styles for building dark-themed editorial interfaces.
- ▌ vodafone-inspired-design-analysis · voltagent bundleAnalyzes and documents Vodafone's design language, including color palette, typography hierarchy, spacing system, and layout patterns for brand-consistent implementation.
- ▌ dell-1996-inspired · voltagent bundleRecreates Dell.com's 1996 catalog-era design with a black page frame, flat color-block ribbon cards, chunky Helvetica-Black titles, Times Roman body copy, and hand-cut GIF stickers.
- ▌ hashicorp-design-analysis · voltagent bundleDocuments HashiCorp's marketing design system: near-black canvas, per-product accent colors, hashicorpSans typography, and charcoal card surfaces for multi-product brand identity.
- ▌ pinterest-design-analysis · voltagent bundleDocuments Pinterest's design system including color palette, typography, shape geometry, and layout patterns for the home page, search results, and creator marketing surfaces.
- ▌ replicate-design-analysis · voltagent bundleDocuments Replicate's design system: warm cream canvas, hot orange accent, three-family typography stack (rb-freigeist-neue, basier-square, JetBrains Mono), fully rounded interactive elements, and a section rhythm that alternates between cream, orange hero, dark code-story, and black footer.
- ▌ starbucks · voltagent bundleDocuments the Starbucks design system with color palette, typography rules, spacing, and component styles for UI implementation.
- ▌ voltagent-inspired-design-analysis · voltagent bundleAnalyze 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.
- ▌ clickhouse-design-analysis · voltagent bundleDefines a high-contrast brand identity system for ClickHouse using near-pure black canvas, electric yellow accents, and Inter typography across dark surface cards.
- ▌ elevenlabs · voltagent bundleDefines a design system for ElevenLabs with colors, typography, layout, and component tokens for building brand-consistent interfaces.
- ▌ linear-design-analysis · voltagent bundleDocuments Linear's dark-canvas marketing design system with near-black backgrounds, lavender-blue accent, four-step surface hierarchy, aggressive negative tracking on display type, and product UI screenshots as the primary visual rhythm.
- ▌ mastercard · voltagent bundleProvides a design system specification inspired by Mastercard's visual language, including color palette, typography, and component patterns for building brand-aligned interfaces.
- ▌ mistral-ai-design-analysis · voltagent bundleDocuments 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.
- ▌ superhumon-inspired-design-analysis · voltagent bundleAnalyzes and documents Superhuman's design language, including color palette, typography, layout, and elevation system for implementation.
- ▌ lamborghini · voltagent bundleProvides a complete design system specification inspired by Lamborghini's brand, including color palette, typography, spacing, and UI component guidelines.
- ▌ opencode-design-analysis · voltagent bundleDocuments the monospaced, manpage-inspired design system of OpenCode's marketing site, including typography, color palette, and spacing tokens.
- ▌ playstation-design-analysis · voltagent bundleDocuments the PlayStation marketing design system with three alternating canvas modes, PlayStation SST typography at weight 300, and a restrained chrome vocabulary where imagery occupies 60-90% of each section.
- ▌ together-ai-inspired-design-analysis · voltagent bundleAnalyzes and documents the design system of Together AI's website, extracting colors, typography, and surface patterns for use in design projects.
- ▌ nintendo-com-2001-analysis · voltagent bundleAnalyzes the design language of Nintendo.com from 2001, documenting its brushed-periwinkle chrome interface, beveled metal plates, chamfered panel geometry, carbon-navy command layer, rationed warm accents, photographic hero fields, and box-art typography.