250 free skills · page 2 of 5
Design Systems skills
Skills for design systems — component libraries, design tokens, theming, and turning Figma designs into code.
Real files from public repositories — hand-curated, never invented. Sorted by installs.
2 / 5page
brand-identityarnabbagxd/brand-building-skillsCreate a visual identity brief for a brand — logo direction, color palette, typography, imagery style, and design system foundations. Use when the user says "visual identity", "brand identity", "logo brief", "logo direction", "design brief", "brand design", "color palette for my brand", "typography for my brand", "visual language", "design system", "brand look and feel", "what should my brand look like", or is briefing a designer or design agency. Also use when the user has a brand strategy and wants to translate it into visual design direction.Design Systems1.1k
figma-design-to-codefigma/mcp-server-guideMANDATORY prerequisite — you MUST invoke this skill BEFORE calling the get_design_context Figma MCP tool. You MUST trigger this skill whenever the user wants to implement, build, port, or code up a Figma design as code. Example prompts (not exhaustive) are 'implement this Figma design', 'build this screen from Figma', 'turn this Figma into code', 'design to code'. This skill provides critical instructions and steps to the agent on how to correctly implement Figma designs in code and must NOT be skipped.Design Systems1.1k
muidavila7/claude-code-templatesMaterial-UI v7 component library patterns including sx prop styling, theme integration, responsive design, and MUI-specific hooks. Use when working with MUI components, styling with sx prop, theme customization, or MUI utilities.Design Systems1.1k
ui-design-systemalirezarezvani/claude-skillsUI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use when creating design systems, generating design tokens, maintaining visual consistency, or facilitating design-dev collaboration and developer handoff.Design Systems1.0k
antbergside/awesome-design-skillsStructured, enterprise-focused design system emphasizing clarity, consistency, and efficiency for data-dense web applications.Design Systems1.0k
design-systemjezweb/claude-skillsExtract a complete design system from an existing website or screenshot into a DESIGN.md file. Analyses colours, typography, component styles, spacing, and atmosphere through browser automation and HTML inspection. Produces a semantic design system document optimised for consistent page generation. Triggers: 'extract design system', 'design system', 'create DESIGN.md', 'analyse the design', 'what design does this site use', 'extract styles from', 'reverse engineer the design'.Design Systems990code-connect-componentsfigma/mcp-server-guideConnects Figma design components to code components using Code Connect. Use when user says "code connect", "connect this component to code", "connect Figma to code", "map this component", "link component to code", "create code connect mapping", "add code connect", "connect design to code", or wants to establish mappings between Figma designs and code implementations. Requires Figma MCP server connection.Design Systems886
daisyuibobmatnyc/claude-mpm-skillsTailwind CSS component library providing semantic class names for 50+ components with built-in themes, dark mode, and customization for rapid UI development.Design Systems844
design-systemsmindrally/skillsComprehensive design system guidelines for building consistent, accessible, and scalable component libraries. Use when creating design tokens, building component libraries, implementing design systems, setting up theming architecture, or establishing UI governance processes.Design Systems794
figma-designerzhaono1/agent-playbookAnalyzes Figma designs into implementation-ready visual evidence, tokens, component specifications, and interaction states for handoff to planning or development.Design Systems789
musesimota/agent-skillsDefining and managing design tokens, applying token systems to existing codebases, building design system foundations. Use for spacing, color, typography, dark mode, cross-platform output.Design Systems697
designsubframeapp/subframeDesign and edit anything in Subframe — pages, components, snippets, design documents, the theme. Use when the user explicitly wants a resource in the Subframe design tool created or changed, asks to explore visual directions in Subframe, or invokes /subframe:design. Do not use for implementation-only work in an existing codebase. Always load this skill when taking any action through the Subframe MCP server. This includes building or iterating on UI, evolving the design system, capturing design intent in writing, or cleaning up a project. Don't write UI code directly — design first, then implement with /subframe:develop.Design Systems692
ui-design-braincarmahhawwari/ui-design-brainGenerate production-grade UI using real component patterns and best practices from 60+ documented interface components. Use when the user asks to build web interfaces, pages, dashboards, forms, navigation, or any UI — ensures modern, minimal, SaaS-quality output grounded in design system conventions rather than generic AI patterns.Design Systems677
create-wot-ui-themewot-ui/open-wot为 wot-ui 生成单文件主题 SCSS，并在用户明确要求接入时追加 App.vue 的 @use。当用户要做品牌主题、语义变量落地、单文件主题接入时使用。Design Systems672
design-system-startersoftaworks/agent-toolkitCreate and evolve design systems with design tokens, component architecture, accessibility guidelines, and documentation templates. Ensures consistent, scalable, and accessible UI across products.Design Systems665figma-integrationmindrally/skillsGuidelines for integrating Figma designs with development workflows using MCP servers and best practicesDesign Systems653
popular-web-designsnousresearch/hermes-agent54 real design systems (Stripe, Linear, Vercel) as HTML/CSS.Design Systems652
swiss-designzeke/swiss-design-skillApply a Swiss International Style design system using Tailwind CSS. Use when asked to style a webpage, clean up a UI, apply a design system, make something look great, or when the user references Swiss design, grotesque fonts, Helvetica, grid systems, modernist typography, or 1960s/1950s design aesthetics. Implements IBM Plex Sans typography, stone color palette, opacity-based hierarchy, generous whitespace, and structured grid layouts.Design Systems650figma-swiftuifigma/mcp-server-guideSwiftUI ↔ Figma translation. Use whenever the user mentions Swift, SwiftUI, iOS, iPhone, or iPad — in EITHER direction — translating a Figma design into SwiftUI (design → code), or pushing SwiftUI views / screens / tokens back into a Figma file (code → design). Triggers on phrases like 'implement this Figma design in SwiftUI', 'build this screen in Swift', 'push this SwiftUI view to Figma', 'mirror my Swift code in a Figma file', or whenever a Figma URL appears alongside .swift files / an .xcodeproj. Routes to a direction-specific reference doc; loads alongside figma-use for the code → design path.Design Systems639
ui-stylingmrgoonie/claudekit-skillsCreate beautiful, accessible user interfaces with shadcn/ui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.Design Systems608
ss-lintbitjaru/styleseedQuick automated lint — detects common design system violations in secondsDesign Systems601
color-mode-and-themedembrandt/dembrandt-skillsChoose light, dark, or combined color mode deliberately based on brand tone and user context. Offer a theme selector only when user control genuinely matters — enterprise tools, data-heavy UIs, or extended-use applications. Use when defining the base color palette, designing a design system, or deciding whether to build dark mode support.Design Systems587modular-scale-typographydembrandt/dembrandt-skillsTypography feels cohesive and intentional when font sizes follow a modular scale — a ratio-based sequence where every size is mathematically related to the others. Use when defining type scales, setting up design tokens, reviewing font size choices, or when typography feels inconsistent or arbitrary.Design Systems557component-family-consistencydembrandt/dembrandt-skillsButtons, inputs, pills, badges, calendars, and other interactive components form a visual family — they share the same border-radius, colour logic, shadow scale, border style, and spacing rhythm. Inconsistency between them breaks the sense of a coherent product. Use when building or reviewing a component library, design system, or any set of UI components.Design Systems543figma-implement-motionfigma/mcp-server-guideTranslates Figma motion and animations into production-ready application code. Use when implementing animation/motion from a Figma design — user mentions "implement this motion", "add animation from Figma", "animate this component", provides a Figma URL whose node is animated, or when get_design_context returns motion data or instructs you to call get_motion_context.Design Systems541extract-designdembrandt/dembrandt-skillsExtract a complete design system — colors, typography, spacing, components, shadows, and W3C design tokens — from any live website using Dembrandt. Runs a headless browser against the URL and returns real computed values from the DOM. Use when you need a site's actual design tokens, want to reverse-engineer a visual design, or need to seed a design system from an existing product.Design Systems523
design-system-creationaj-geddes/useful-ai-promptsA design system is a structured set of components, guidelines, and principles that ensure consistency, accelerate development, and improve product quality.Design Systems512figma-use-motionfigma/mcp-server-guideMotion / animation context for the use_figma MCP tool — animating Figma nodes via manual keyframes, animation styles, easing, and timeline duration. Load alongside figma-use whenever a task involves adding, editing, or inspecting animation on a node.Design Systems501
mesh-gradient-dark-blue-cleanmengto/skillsCreate a futuristic, premium, clean dark-blue mesh-gradient design system across background rendering, hero shell, navigation, floating nodes, framed sections, CTAs, and motion. Use when the interface needs a near-black navy foundation, procedural blue mesh atmosphere, disciplined minimal structure, and infrastructural or planetary depth.Design Systems481image-first-grid-layoutmengto/skillsCreate an image-led grid design system with full-bleed photography, structural guide lines, anchored content blocks, and restrained technical overlays.Design Systems479clean-minimal-beige-light-modemengto/skillsCreate a clean minimal beige light-mode design system with warm neutral shells, quiet process grids, restrained accent color, and elegant low-contrast structure.Design Systems476technical-wireframe-info-layoutmengto/skillsCreate a monochrome technical wireframe design system with exploded 3D structure, connector annotations, sparse information labels, and precise dark diagnostic framing.Design Systems472dither-laser-dark-modemengto/skillsCreate a dark premium design system that combines near-black surfaces, subtle ordered-dither texture, and a thin accent-colored laser atmosphere.Design Systems470light-mode-paper-technicalmengto/skillsCreate a light-mode technical design system with warm paper surfaces, dark outer framing, subtle diagonal texture, precise bracketed geometry, and restrained accent signals.Design Systems470book-serif-indexmengto/skillsCreate an archival book-reader design system with serif-led pages, mono index navigation, aged paper surfaces, margin notes, and a premium catalog frame.Design Systems468glass-dark-mode-clockmengto/skillsCreate a dark glass design system with frosted shells, soft beam grids, circular clock-like calibration dials, and precise sci-fi instrument framing.Design Systems467split-layout-technicalmengto/skillsCreate a technical split-screen design system with dual panels, fine frame lines, mono metadata, quiet editorial typography, and premium inset surfaces.Design Systems467orange-clean-paper-saasmengto/skillsCreate a clean paper-toned SaaS design system with warm neutrals, orange accent signals, rounded premium forms, and polished product illustration surfaces.Design Systems465tech-green-dark-mode-modernmengto/skillsCreate a modern dark-mode technical design system with matte-black surfaces, emerald signal accents, mono system labeling, framed dashboard cards, and restrained glow.Design Systems465blue-cloudy-clean-modernmengto/skillsCreate a clean modern design system with a luminous blue sky atmosphere, soft drifting cloud light, minimal white framing, and serene premium typography.Design Systems464high-contrast-skeuomorphic-cleanmengto/skillsCreate a high-contrast clean skeuomorphic design system with molded dark surfaces, crisp light separation, tactile inset depth, and restrained signal accents.Design Systems464dark-blue-contrasting-cleanmengto/skillsCreate a dark-blue clean design system with strong contrast, cobalt gradient feature blocks, crisp framed structure, and restrained premium glow.Design Systems463framed-tech-dark-border-gradientmengto/skillsCreate a framed dark technical design system with border-gradient shells, asymmetrical grid panels, mono utility labeling, and restrained monochrome atmosphere.Design Systems461
figma-designmanutej/luxor-claude-marketplaceFigma workflows, components, auto layout, constraints, prototyping, design systems, and plugin development based on Figma Plugin API documentationDesign Systems457funky-purple-container-techmengto/skillsCreate a dark container-led technical design system with fuchsia-purple accents, layered rounded shells, crisp frame lines, and playful futuristic focal objects.Design Systems457agency-grid-layout-minimalmengto/skillsCreate a minimal agency design system with a disciplined editorial grid, oversized typography, quiet uppercase utility labels, restrained image blocks, and subtle structural detail.Design Systems453nested-container-clean-agencymengto/skillsCreate a clean agency design system built from nested containers, with an outer editorial shell, inset dark feature blocks, rounded premium cards, and restrained accent color.Design Systems442bright-green-tech-system-webglmengto/skillsCreate a bright-green technical design system with structured split layouts, hard-framed dark surfaces, mono utility labels, and a prominent WebGL visualization zone.Design Systems430
oiloil-ui-ux-guideoil-oil/ui-ux-guideRun a structured UI/UX consultation to either (a) co-design a project-specific design system and emit design-spec.md, (b) review an existing UI with prioritized fixes, or (c) emit compact do/don't rules for a surface. Triggers when the user wants to define / build / refine a design system or design tokens, asks for a design spec, asks for a full UI review of a screen / mockup / PR, or wants design rules for a surface type. Do NOT trigger for narrow one-off questions ("is this color OK?", "should this button be larger?") — answer those directly without invoking the consultation flow.Design Systems428
figma-prototypingdylantarre/animation-principlesUse when implementing Disney's 12 animation principles in Figma prototypes and Smart AnimateDesign Systems423
web-design-expertcuriositech/some_claude_skillsCreates unique web designs with brand identity, color palettes, typography, and modern UI/UX patterns. Use for brand identity development, visual design systems, layout composition, and responsiveDesign Systems412
design-system-creationsecondsky/claude-skills| Creates comprehensive design systems with typography, colors, components, and documentation for consistent UI development. Use when establishing design standards, building component libraries, or ensuring cross-team consistency.Design Systems410
om-ux-setupopen-mercato/skillsExtract the repository's design contract (tokens, component registry, screen archetypes, conventions) into .uxproof/ so every UX skill judges against THIS repo's design system, whatever it is. Run once per repository; re-run to refresh after design-system changes.Design Systems380
visual-design-system-extractorsrinitude/skillsUse when reference images, screenshots, moodboards, style frames, brand boards, cinematic stills, product interface shots, or a live site URL must become a production design system, design tokens, art direction, motion rules, or a YAML style specification. Covers reverse engineering visual references into a deterministic YAML contract with graded confidence, evidence boundaries, and typefaces drawn from the live Google Fonts catalog and ranked as rarely used. Not for generating images or for ordinary frontend work where no reference has to be decoded first.Design Systems375
godot-ui-themingthedivergentai/gd-agentic-skillsExpert blueprint for UI themes using Theme resources, StyleBoxes, custom fonts, and theme overrides for consistent visual styling. Covers StyleBoxFlat/Texture, theme inheritance, dynamic theme switching, and font variations. Use when implementing consistent UI styling OR supporting multiple themes. Keywords Theme, StyleBox, StyleBoxFlat, add_theme_override, font, theme inheritance, dark mode.Design Systems370
design-trends-2026guia-matthieu/clawfu-skillsApply 2026's top graphic design trends to any creative brief. Based on Kittl × Savee's 2026 Design Trends Report (10 trends + 2 honorable mentions), backed by Adobe, Figma, and Pinterest data. Use when: Designing a brand identity — pick the right aesthetic for your audience; Creating social media assets — use trending visual languages that perform; Briefing a designer or AI image tool — give precise style direction with vocabulary and references; Refreshing a visual identity — know what's rising vs saturating; Building mood boards — combine trends intentionally with data-backed rationale.Design Systems366
tailwindcsspedronauck/skillsTailwind CSS v4 conventions — semantic design tokens for theme-safe styling, mobile-first responsive layouts, and v4-first utilities. Use when styling components or writing className utilities with Tailwind. Don't use for plain CSS, CSS-in-JS (styled-components, emotion), or other utility frameworks.Design Systems361
tdesign-miniprogramjoneqian/claude-skills-suiteTDesign Mini Program UI component library by Tencent. Use for building WeChat mini apps with TDesign components, design system, and best practices.Design Systems355nuxt-ui-v4secondsky/claude-skillsNuxt UI v4 component library for building Nuxt v4 applications. 125+ accessible components with Tailwind v4, Reka UI, dark mode, theming. Use for dashboards, forms, overlays, editors, page layouts, pricing pages, or encountering component, theming, or TypeScript errors.Design Systems351
create-remotion-geistvercel-labs/skill-remotion-geistCreate Remotion videos using the Geist design system aesthetic. Use when asked to create videos, animations, or motion graphics that should follow Vercel's visual style - dark theme, spring animations, Geist typography, and the Geist color palette.Design Systems343Other tasks
same rules, different job
