494 free skills
Design Systems skills
Skills for design systems — component libraries, design tokens, theming, and turning Figma designs into code.
Sourced from real, public repositories — synced daily, never invented.
494 free skills
Skills for design systems — component libraries, design tokens, theming, and turning Figma designs into code.
Sourced from real, public repositories — synced daily, never invented.
15 tools across six categories
13 of them never send your data anywhere
Free · No signup · No trial clock
SEE THE DIRECTORY
edit-figma-design
warpdotdev/figma-skills
Create or update Figma designs directly from a written product or UI description using the Figma MCP authoring tools. Use when the user wants a mockup, wireframe, screen, component, flow, or concept designed in Figma from text, or wants to iterate on an existing Figma file from textual feedback. Despite the name, this skill can start from a new blank file or edit an existing one. Do not use for capture-based workflows that turn a running page into Figma; use `figma-generate-design` for those, and use `implement-design` for code implementation requests. Requires Figma MCP server connection.
image
syntax-syndicate/marketing-skills
When the user wants to create, generate, edit, or optimize images for marketing — blog heroes, social graphics, product mockups, profile banners, listing visuals, or brand assets. Also use when the user mentions 'AI image generation,' 'generate an image,' 'create a graphic,' 'product mockup,' 'hero image,' 'social media graphic,' 'banner image,' 'cover photo,' 'profile banner,' 'listing screenshot,' 'Flux,' 'Midjourney,' 'DALL-E,' 'GPT Image,' 'Ideogram,' 'Gemini image,' 'Canva,' 'Figma,' 'image optimization,' 'compress images,' 'WebP,' or 'OG image.' Use this for general-purpose marketing image creation and optimization. For paid ad image creative and platform-specific ad specs, see ad-creative. For video production, see video.
figma
zenobi-us/dotfiles
Use when design, prototyping or referencing Figma files. Provides capabilities for inspecting design elements, extracting assets, generating code from designs, and managing Code Connect mappings via the figma-desktop MCP server.
web-styling-scss-modules
agents-inc/skills
SCSS Modules, cva, design tokens
design-handoff-brief
mohitagw15856/pm-claude-skills
Transform feature briefs into structured design briefs that give designers the context they need before opening Figma. Use when asked to write a design brief, create a design handoff, brief a designer on a new feature, or translate a PRD into design requirements. Produces a brief with user goal, emotional context, success criteria, constraints, edge cases, and out-of-scope boundaries.
web-css
alexanderstephenthompson/claude-hub
CSS architecture for vanilla CSS - organization, design tokens, responsive patterns
design-critique
mohitagw15856/pm-claude-skills
Give structured, constructive feedback on any design using UX frameworks. Use when asked to critique a design, review a UI, give feedback on a Figma file or wireframe, assess a user flow, or evaluate a design against UX principles. Produces actionable critique applying Jobs-to-be-Done, Gestalt principles, and usability heuristics, with prioritised issues and specific recommendations.
sb-health
strongeron/storybook-workbench
Check design-system health for a React+Vite app — raw hex, undefined/unused tokens, scale gaps, DESIGN.md drift, and (opt-in) property→token-family misuse. Use for 'is my design system healthy', 'find raw colors', 'check tokens', or a mixed design system.
figma-user-flow-planner
mohitagw15856/pm-claude-skills
Plan user flows and screen states for a Figma design before any designing starts. Use when asked to plan a user flow, map out screens for a feature, define screen states, plan a Figma file structure, or work out what needs to be designed before opening Figma. Produces a complete flow map with all screens, states, entry/exit points, and a suggested Figma page structure.
igniteui-angular-theming
igniteui/igniteui-angular
Generates and customizes Ignite UI for Angular themes including color palettes, typography, elevations, and component-level styles using the Sass theming system and the igniteui-theming MCP server. Use when users ask to theme, restyle, or style Ignite UI components, change colors or the color palette, switch between light and dark themes, create or apply a global theme, customize typography or elevation shadows, adjust spacing, sizing, or roundness, or configure per-component design tokens. Do NOT use for component behavior, APIs, or data binding — use igniteui-angular-components or igniteui-angular-grids instead.
design-system-architecture
nickcrew/claude-cortex
Build scalable design systems with design tokens, component APIs, and documentation. Use when creating or evolving component libraries.
figma
partme-ai/full-stack-skills
Provides comprehensive guidance for Figma design tool including design creation, components, prototyping, collaboration, and design systems. Use when the user asks about Figma, needs to create designs, work with Figma components, or collaborate on design projects.
figma-component-audit
mohitagw15856/pm-claude-skills
Audit a Figma component library for consistency, coverage gaps, and naming issues. Use when asked to audit components, review a design system, check component consistency, identify missing components, or assess Figma library health. Produces a structured audit report with issues prioritised by impact, naming recommendations, and a fix plan.
figma-design-brief
mohitagw15856/pm-claude-skills
Write a structured design brief for a Figma design task from a product requirement or feature request. Use when asked to write a design brief, create a design spec for Figma, turn a PRD into design requirements, or brief a designer on what to build in Figma. Produces a brief with goals, scope, user flows, components needed, constraints, and success criteria.
sb-figma
strongeron/storybook-workbench
The Figma↔Storybook bridge, both directions, via the native Figma MCP. design→code: map foundation tokens (color/spacing/type) from Figma variables with design↔code parity + drift, and deliver approved Figma components (extract → build → embed), authoring stories via sb-stories' rules. code→design: build Code Connect mappings from components + stories + token parity + usage so Figma Dev Mode shows the real code. Use for 'sync my Figma tokens', 'map Figma variables to my design system', 'deliver this approved Figma design', 'check design↔code token parity', 'connect my components to Figma / code connect'. NOT for prototyping/iterating an undecided design (that's sb-explore).
theme-audit
chmouel/lazyworktree
Validate all themes for completeness and correct usage
ux-brief
majesticlabs-dev/majestic-marketplace
Create junior-dev-ready design systems through guided discovery before implementation
Figma-Context-MCP-Skill
howardtangovo/figma-context-mcp-skill
Translate Figma nodes into production-ready code with 1:1 visual fidelity using Framelink Figma-Context-MCP (get_figma_data and download_figma_images). Trigger when the user provides Figma URLs or node IDs, or asks to implement components/pages that must match Figma precisely, and the workflow should use Figma-Context-MCP instead of the official Figma MCP server.
figma-to-ids
iress/design-system
>
css-tokens
schalkneethling/webdev-agent-skills
Provides foundational CSS design tokens (custom properties) for typography, spacing, colors, borders, z-index, and transitions. Use when setting up a base token system for a web project.
prototype-to-figma
alima-max/prototype-to-figma-skill
>
lit-and-figma
rodydavis/skills
Learn how to create a Figma plugin using Lit web components, including project setup, component creation, WASM integration, and building the final plugin for use in Figma.
figma-to-weaverse
weaverse/shopify-hydrogen-skills
Use when recreating a Figma design as Hydrogen + Weaverse pages in this repo — turning a Figma file, frame, or flow into reusable Weaverse sections. Triggers on a figma.com URL, "build this design", "implement this Figma", or "create the storefront from the design". The Figma counterpart of cloning-websites-to-weaverse.
installing-westpac-ui
westpacgel/gel-next
Guides setup and installation of @westpac/ui and @westpac/style-config in a new project. Use when setting up GEL, installing the design system, configuring Tailwind CSS, theming, or brand fonts.
figma-ai
partme-ai/full-stack-skills
Provides comprehensive guidance for Figma AI features including AI-powered design tools, automation, and AI-assisted design workflows. Use when the user asks about Figma AI, needs to use AI features in Figma, or automate design tasks with AI.
syncfusion-maui-toolkit-theming
syncfusion/maui-toolkit-ui-components-skills
Themes and styles Syncfusion .NET MAUI components. Use when working with SyncfusionThemeResourceDictionary, MaterialLight, MaterialDark, visual themes, or theme switching. This skill covers theme customization, color overrides, theme keys, dark mode, light mode, and branding.
electron
fcakyon/claude-codex-settings
Automate Electron desktop apps (VS Code, Slack, Discord, Figma, Notion, Spotify, etc.) using agent-browser via Chrome DevTools Protocol. Use when the user needs to interact with an Electron app, automate a desktop app, connect to a running app, control a native app, or test an Electron application. Triggers include "automate Slack app", "control VS Code", "interact with Discord app", "test this Electron app", "connect to desktop app", or any task requiring automation of a native Electron application.
tailwindcss
marcioaltoe/skills
Tailwind 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.
material-theming
verygoodopensource/vgv-ai-flutter-plugin
Best practices for Flutter theming using Material 3.
tinyship-brand
tinyshipcn/tinyship-skills
>-
figma
johnlindquist/claude
Extract design data from Figma files. Use for getting design tokens, component specs, and generating code from Figma designs.
create-figjam-content
southleft/skills-for-figma
Author FigJam boards with granular control — sticky notes (single + batch), connectors between nodes, shapes-with-text, sections, tables, code blocks, and auto-arrange — plus read back board contents and the connection graph. Use when the user wants to build or edit a FigJam board element-by-element. Triggers: 'add stickies to FigJam', 'create a flowchart/diagram in FigJam', 'connect these nodes', 'make a section/table/code block in FigJam', 'auto-arrange the board', 'read what's on the FigJam board', 'map the connections'. More granular than the native generate_diagram (which produces a whole diagram in one shot). FigJam files only (figma.editorType === 'figjam'). Requires the Figma Desktop app (Plugin API).
duskmoon-dev-css-art
gsmlg-dev/code-agent
When using npm package `@duskmoon-dev/css-art`, this skill shows how to install, configure, and use the pure CSS art component library
migrating-to-westpac-ui-v1
westpacgel/gel-next
Guides migration from pre-@westpac/ui 1.0 to v1.0. Use when upgrading GEL, migrating to v1, updating design tokens, running the token codemod, or fixing breaking changes from the v1 upgrade.
product-design
alekspetrov/navigator
Automates design review, token extraction, component mapping, and implementation planning. Reduces design handoff from 6-10 hours to 5 minutes via direct Figma MCP integration. Auto-invoke when user mentions design review, Figma mockup, or design handoff.
user-context
openai/role-specific-plugins
Load or manage Product Design's saved user context. Use when the user asks to set up Product Design, get started, onboard, save product or design sources, see what Product Design remembers, update saved context, or remember Product Design preferences. Examples include product URLs, Figma files, screenshots, reference images, codebase paths, Storybook, tokens, design systems, brand assets, and general product/design notes.
build-slides-figma
southleft/skills-for-figma
Author Figma Slides presentations — list/create/duplicate/reorder/delete slides, read the slide grid, add text and shapes to a slide, set slide background color, set or read slide transitions (dissolve, slide-from, push-from, smart-animate), focus a slide, and toggle skip. Use when the user wants to build or edit a Figma Slides deck. Triggers: 'create a slide', 'add a slide to the deck', 'reorder slides', 'set the slide background', 'add a transition between slides', 'add text/shape to slide 3', 'read what's on this slide', 'skip this slide in the presentation'. Figma Slides files only (figma.editorType === 'slides'). Requires the Figma Desktop app (Plugin API).
design-system-generator
lotfb86/web-design-skills
Generate a structured DESIGN.md file for any business or project. Produces a machine-readable design system specification that build pipelines consume during code generation. Based on VoltAgent/awesome-design-md format.
Fluxwing Library Browser
jackspace/claudeskillz
Browse and view all available uxscii components including bundled templates, user components, and screens. Use when working with .uxm files, when user wants to see, list, browse, or search .uxm components or screens.
Fluxwing Component Viewer
jackspace/claudeskillz
View detailed information about a specific uxscii component including metadata, states, props, and ASCII preview. Use when working with .uxm files, when user wants to see, view, inspect, or get details about a .uxm component.
setup-design-tokens-figma
southleft/skills-for-figma
Bootstrap a complete design-token system in Figma in one atomic step — create a variable collection, its modes (e.g. Light/Dark), and every variable with per-mode values together. Use when starting a token system from scratch: triggers 'set up design tokens in Figma', 'create a token collection with light and dark modes', 'scaffold variables', 'bootstrap a Figma theme'. Works on ANY Figma plan. For incremental edits to an existing system use manage-variables-figma; for syncing from a code tokens file use import-tokens-figma.
color-palette
nickcrew/claude-cortex
Use this skill when creating, evaluating, or documenting color palettes for brands, products, or design systems. Trigger phrases: ''create a color palette'', ''what colors should I use'', ''brand colors for'', ''accessible color scheme''. Do NOT use for image editing, photo color correction, or print production color matching.
using-figma
bitwarden/ai-plugins
Read and inspect Figma designs via the Dev Mode MCP server — selects the right tool, parses Figma URLs into fileKey and nodeId, and turns design context into useful input for critique, copy review, handoff prep, and Design System work.
figma-sync-design-system
thebushidocollective/han
Sync design system components between Figma and code using Code Connect mappings
tiny-robot-skill
opentiny/agent-skills
Guides TinyRobot Vue AI chat UI implementation, setup, and code generation. Use when the user mentions TinyRobot, OpenTiny TinyRobot, Bubble, Sender, Prompts, chat container, message list, conversation tools, or asks to build chat interfaces with TinyRobot components.
theming-context
rolemodel/rolemodel-skills
Using Optics for implementing design system guidelines, theming, and color scales.
design-system-compliance
reticlehq/reticle
Check that the UI you actually rendered uses the design system, by reading computed styles in the running app against the project's design tokens. Catches hardcoded hex colors, off-palette backgrounds, invisible or unusable controls, and animations that never ran. Use after building or restyling a component, when a design review is wanted, when a UI looks slightly off but nobody can say why, or when a design system exists and nothing checks whether the code follows it.
figma-to-code
t4sh/skills4sh
Repo-first Figma-to-code workflow for implementation, design tokens, design-system rules, and Code Connect. Use when the user asks to \"implement this Figma design\", \"turn this Figma into code\", \"build from a Figma link\", \"match this Figma mockup\", \"extract Figma design tokens\", \"create Figma design system rules\", \"set up Figma guidelines\", \"code connect this component\", or \"map this Figma component to code\"; or when a Figma URL/selection must become repository code, code tokens, agent rules, or Code Connect mappings.
chart-builder
nickcrew/claude-cortex
Use this skill when creating data visualizations, selecting the right chart type, or generating chart code. Trigger phrases: ''build a chart'', ''visualize this data'', ''create a graph'', ''plot these numbers'', ''which chart should I use for''. Not for building interactive dashboards, designing UI components, or creating infographics with design tools like Figma.
figma-mcp-downloader
yuichiroharai/figma-mcp-downloader
CLI for downloading complete Figma design context and metadata to local files. Always use this CLI instead of calling Figma MCP tools (`get_design_context`, `get_metadata`) directly. Direct MCP tool calls risk incomplete data due to context limits. This CLI guarantees 100% complete output.
figma-generate-component
thebushidocollective/han
Generate production-ready code from a Figma component or frame using the Figma MCP server
design-tokens-sync
onewave-ai/claude-skills
Audit and sync design tokens between the source of truth (tokens.json, Figma variables export) and the code that should consume them (Tailwind config, CSS custom properties, theme files). Finds drift -- hardcoded values, orphan tokens, out-of-date copies -- and fixes it in the right direction.
component-scaffolding
schalkneethling/webdev-agent-skills
Generate Drupal/Twig component skeletons with web components and Miyagi validation. Use when user requests to create, scaffold, or add a new component at a specific path (e.g., "add component skeleton at patterns/share-button"), or when creating component files including Twig templates, CSS, JavaScript web components, JSON schemas, or mock data files.
design-critiquer
nickcrew/claude-cortex
Use this skill when reviewing, evaluating, or giving structured feedback on UI designs, wireframes, mockups, or design systems. Trigger phrases: ''critique this design'', ''give feedback on my UI'', ''review this wireframe'', ''what''s wrong with this design''. Do NOT use for writing code, implementing designs, or marketing material critique.
penpot-design-to-code-review
penpot/penpot-ai-kit
Review a Penpot design against its implemented code (a source component or Storybook story) and emit a structured DRIFT report. Use when an engineer needs to confirm the build matches the design: extract HTML/CSS from a selection, map its tokens/structure/states to the code component, diff them, and list what each side is missing with severity and a reconciliation. Degrades gracefully to a design-system-token check when no code source is supplied. Triggers: 'design to code review', 'does my code match the design', 'design code parity', 'compare Penpot to my component', 'check this against Storybook', 'extract HTML/CSS from this selection', 'find design drift', 'design implementation diff'.
firstrun
redongreen/uspec
Configure uSpec's Figma template library. Verifies your MCP connection, then extracts template component keys from your Figma library and writes them to uspecs.config.json. Run after `npx uspec-skills init` has set up the platform and config file. Use when the user mentions "firstrun", "first run", "setup library", "configure templates", or "link templates".
figma-implement-design
kilo-org/kilo-marketplace
>-
getting-started
dylantarre/design-system-skills
Introduction to the design system skills plugin. Use when first installing the plugin, exploring available skills, or planning a design system implementation.
code-to-figma
t4sh/skills4sh
CI-anchored code-to-Figma token export pipeline for keeping Figma aligned with the codebase. Use when the user asks to \"sync code to Figma\", \"export design tokens to Figma\", \"set up a Figma sync pipeline\", \"wire up the tokens-sync-to-figma plugin\", \"generate a figma-export.json\", \"create a page walker\", or \"keep Figma up to date with the codebase\".
figma-code-connect
figma/dev-mode-mcp-server-guide
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.