Claude Code Figma plugins and skills

Turns a brief into a design prototype, website, app, deck, or video that follows your design system, then lets your team share it and refine it with an AI agent in the same project.

170 skills

@nexu-ioInstall Plugin

Turns a codebase into an interactive knowledge graph you can explore, search, and ask questions about, with skills for diff impact analysis, explanations, and business domain mapping.

9 skills

@egonex-aiInstall Plugin

A plugin of skills for building videos from HTML with HyperFrames, covering motion design, transitions, captions, cursor effects and changelog videos. Useful for developers and agents who want to render motion graphics and product videos.

15 skills

@heygen-comInstall Plugin

Creates branded editorial diagrams such as architecture charts, flowcharts, sequence diagrams, ER models, timelines and swimlanes as self-contained HTML and SVG files. Suited to writers and designers who want polished visuals for Claude Code.

1 skill

@cathrynlaveryInstall Plugin

Gives developers working on the Metabase codebase ready-made skills for common backend and frontend tasks, such as adding Malli schemas to API endpoints, instrumenting Clojure code with tracing spans, adding frontend analytics events, and auditing the REST API changelog against the OpenAPI spec.

30 skills

@metabaseInstall Plugin

Gives Claude working knowledge for scientific research, covering instrument data conversion, bioinformatics pipelines for RNA-seq and sequencing data, single-cell analysis and quality control, and research project planning. Useful for lab scientists who want consistent, standardized analysis.

200 skills

@anthropics-2Install Plugin

A skill for writing, editing, debugging, and reviewing Slint UI code and wiring it to Rust, C++, JavaScript, or Python. It covers the Slint language, layout, and interop, plus an MCP server for runtime checks.

1 skill

@slint-uiInstall Plugin

A collection of Cursor plugins for coding agents covering skills and agents such as advisor checkpoints, CLI design review, plugin scaffolding and continual learning for AGENTS.md. Plugins cover developer tools, frameworks and SaaS products.

113 skills

@cursorInstall Plugin

A collection of agent skills that help you build great interfaces.

14 skills

@jakubkrehelInstall Plugin

Analyzes codebases to find duplicate business logic, check coupling between modules, flag misplaced classes, size components, and plan migrations away from monoliths.

94 skills

@tech-leads-clubInstall Plugin

This project implements a Model Context Protocol (MCP) integration between AI agent (Cursor, Claude Code) and Figma, allowing AI agent to communicate with Figma for reading designs and modifying them programmatically.

@grabInstall Plugin

Adds Preline UI components and blocks to HTML files through the Preline MCP server, and generates, previews, and validates Preline theme CSS. Built on Tailwind CSS.

1 skill

@htmlstreamofficialInstall Plugin

Extracts the full design system from any website URL, producing design tokens, Tailwind, Figma variables and shadcn/ui themes, plus a skill that styles UI from the extracted tokens.

2 skills

@manavarya09Install Plugin

Gives a coding assistant design skills for building interfaces: audit a UI against accessibility rules, generate a brand design system of tokens, apply a visual style, and build data-heavy dashboards with real charts.

26 skills

@plugin87Install Plugin

Fetches brand SVG logos and cloud architecture icons for AWS, Azure and Google Cloud from theSVG. Use it when you need a company logo, framework mark or service icon in your project.

1 skill

@glinckerInstall Plugin

Lets an AI coding agent read Figma designs and turn them into code, map Figma components to code snippets, and write frames or pages back into Figma. Use it to skip copying design details by hand.

16 skills

@figmaInstall Plugin

An adapter that lets Pi use MCP servers, with a scripting skill that covers tool discovery, how call results are shaped, and script limits. It is meant for developers who want MCP tools without filling the context window.

@nicobailonInstall Plugin

Free, two-way Figma MCP server. Turn designs into framework-aware code, and push code back to the canvas. Works with Claude Code, Cursor, Codex, and any MCP client.

4 skills

@awdr74100Install Plugin

Generates and edits HTML slide decks in Claude Code and Codex, with design styles and export to PDF or per-slide PNG, plus card-news and image-based slide modes.

7 skills

@nomadamasInstall Plugin

Creates illustrations, animation loops, drawing timelapses, explainer and launch videos, and interactive web animations as code, in many styles with composed scores. Helps keep characters consistent across renders.

1 skill

@alexgreenshInstall Plugin

Claude Code plugin for working with SEED, Daangn's design system: component and token guidance across React and Lynx, Chromatic snapshot diff triage, change impact and changeset writing, deprecation and migration notes, and SEED CLI setup help.

11 skills

@daangnInstall Plugin

A self-hosted terminal AI assistant and Python framework built on Pydantic AI, offering sandboxed execution, multi-agent teams, and skills for build, code review, git workflow, and data formats, with any model supported.

14 skills

@vstorm-coInstall Plugin

Skills for working on the arcade-mcp Python framework, which builds MCP servers and tools. They cover writing new error adapters for provider integrations and preparing changes for review by filling the repository PR template.

2 skills

@arcadeaiInstall Plugin

A library of reusable marketing and SEO workflows for Claude Code and other AI agents, covering Search Console analysis, SEO monitoring, AI search traffic, traffic attribution, and analytics tracking setup.

171 skills

@kostja94Install Plugin

Checks whether an app or startup idea already exists before you build it, by scanning GitHub, npm, PyPI, Hacker News, and Stack Overflow for competitors. Provided as an MCP server with an idea-check skill for new project evaluation.

1 skill

@mnemox-aiInstall Plugin

A Claude Code plugin that helps you make confident UI design decisions through rapid iteration.

1 skill

@0xdesignInstall Plugin

Turns a single line of story text into a finished short drama, covering the script, storyboards, character-consistent video and voiceover. Works with the AI model providers you already use, so you skip assembling each step by hand.

7 skills

@chrischen667788Install Plugin

Gives a marketing team AI-agent skills for planning a period's marketing, building content calendars, writing campaign briefs, diagnosing weak campaign numbers, and drafting short-form video scripts. Covers US, EU, SEA and LATAM markets in Vietnamese and English.

132 skills

@minhnv0807Install Plugin

Create, edit, and implement Figma designs with your coding agent.

3 skills

@ecomfeInstall Plugin

Control Figma from the command line to create shapes, frames, text and components, set styles and layout, manage variables, and export images. Useful for automating design tasks in Claude Code.

1 skill

@dannoteInstall Plugin

Agent-first creative workspace Create images, video, audio, and text with agents that work alongside you. Describe what you want, let the agent build it, then take over whenever you like. Download NodeTool Studio · Quick start · Contribute.

1 skill

@nodetool-aiInstall Plugin

A skill that gives Claude Code and other AI coding tools guidance for Jetpack Compose and Compose Multiplatform UI work across Android, Desktop, iOS, and Web, covering state, navigation, and animation.

1 skill

@aldefyInstall Plugin

Official agentic skills for Qt software development and quality assurance, designed for use with AI coding tools such as Claude Code, Codex CLI, and GitHub Copilot. Skills have been tested with frontier LLMs from the Claude, Gemini, and GPT model families.

13 skills

@theqtcompanyrndInstall Plugin

Turns the coding agents, browser sessions and desktop tools you already use into a personal work assistant, with no new company platform or IT approval needed. It can run automated workflows, distill a colleague's know-how into a reusable skill, and engage on LinkedIn with approval in chat.

5 skills

@zhixiangluoInstall Plugin

A Claude Code skill for App Store Optimization of iOS apps. It runs keyword research by popularity and difficulty, writes the app name, subtitle and keyword field, and localizes App Store metadata into many locales.

1 skill

@kronopInstall Plugin

Reverse-engineers the design taste of a website from its URL. A real browser captures the page's structure and a screenshot, then analysis produces a write-up of its design tokens and the reasons behind its UI choices.

1 skill

@senlindesignInstall Plugin

A Claude Design skill that turns UX decisions into a step-by-step blueprint animation. Show a redesign from Before to After with changed parts rebuilding, or annotate a single screen module by module with what and why, for case studies and posts.

1 skill

@moguzbulbulInstall Plugin

A Claude Code plugin that adds skills, agents and hooks for development work. It can create API endpoints, backend and frontend tests, database migrations and React or Vue components, plus planning and release tasks.

32 skills

@alekspetrovInstall Plugin

Navigator is a Claude Code plugin for planning and delivering features across sessions. It adds skills to create API endpoints, database migrations, React or Vue components, and backend and frontend tests, plus agents and hooks for workflow orchestration.

31 skills

@qf-studioInstall Plugin

Assembles a virtual design team inside Claude Code to produce UI, UX, visual, social media, email, and data design output. A design manager picks the right specialist roles for each task.

1 skill

@adityaraj0421Install Plugin

Teaches non-engineers to work with AI coding agents like Claude Code, Cursor and Codex through a guided course. Adds skills for drafting articles, designing A/B tests, setting up analytics tracking and making social media banners.

101 skills

@minicooheiInstall Plugin

Open-source B2B data enrichment, prospecting, and outbound skills for Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, Grok, OpenCode, Windsurf, Hermes-Agent, OpenClaw, Claude Cowork, and 60+ other agents, powered by Explorium and Vibe Prospecting.

22 skills

@explorium-aiInstall Plugin

Repository of Adobe skills for AI coding agents.

176 skills

@adobeInstall Plugin

Gives Claude Code persistent knowledge of production patterns, so you stop re-explaining your stack and preferences each session. Agents follow your patterns, and hooks block risky actions such as committing straight to main.

122 skills

@yonatangrossInstall Plugin

Gives you a team of AI helpers for a rough product idea: one researches real data, one argues against it, and one offers cross-industry comparisons, then a coach walks the idea through to a PRD and clickable prototype.

117 skills

@majiayu000Install Plugin

Skills, agents, and commands for Claude Code that run a one-sentence idea through a team of AI roles for research, counterarguments, and analogies, and take it to a PRD and clickable HTML prototype.

111 skills

@majiayu000Install Plugin

Turns an article into a ready-to-use cover image prompt for WeChat and Xiaohongshu covers. It reads the article, asks a few questions, suggests titles, and offers composition styles, with an option to include a real person and reference images.

1 skill

@hongfamonvaiInstall Plugin

An agent design team you control. 10 agents that run an inclusive design process while you direct. The system notices how you design and reflects it back. Designpowers is an open, model-agnostic design workflow that gives you a team of 10 design agents.

36 skills

@owl-listenerInstall Plugin

Turns a Figma component into design system documentation, from a captured component contract and implementation guide to annotation frames rendered back into Figma. You describe the component to your agent and it produces the specs without manual annotation.

13 skills

@redongreenInstall Plugin

Scale content quality through AI-powered design system enforcement View website Read docs An agent skill that enables Claude, Codex, and Cursor to write and edit user-centered interface copy (UX text/microcopy) for digital products.

1 skill

@content-designerInstall Plugin

Claude skill that analyzes images, websites, and Figma files and generates a structured design.md with token system, component inventory, and reconstruction notes.

1 skill

@uxkeroInstall Plugin

An agent skill that guides founders from idea to launched product through structured conversations and AI-powered document generation.

1 skill

@buildgreatproductsInstall Plugin

Skills for running a design system day to day: auditing component accessibility against WCAG AA, reporting adoption across teams, writing AI agent instructions, describing Figma components for LLMs, and turning audit findings into sprint tickets.

36 skills

@murphytruemanInstall Plugin

The source file is the design brief. Turn existing HTML into a beautiful, usable page, without losing its meaning.

7 skills

@kayforkindInstall Plugin

Design system compliance for AI-generated Figma designs. Skills enforce library-first components, Auto Layout structure, and binding every color, spacing, and radius value to Figma Styles or Variables instead of hardcoded values, with a preflight session check.

4 skills

@senlindesignInstall Plugin

A self-contained Claude Code plugin that carries a feature from a one-line idea to reviewed, verified, shipped code through 23 atomic, stack-agnostic skills and a TDD implementation engine, with a living decomposition roadmap above the per-feature flow and a.

23 skills

@genkovichInstall Plugin

AI that designs like a human. Give OMD one complete request. The selected model inspects the project, researches useful references, chooses a direction, builds, renders, repairs, and verifies the result through one model-led workflow.

2 skills

@3x-haustInstall Plugin

A skill that creates, evaluates, and improves other skills. Meta-level. Architecture-first skill lifecycle: design → build → test → evaluate → package. Most skill tools jump straight to "write SKILL.md."

1 skill

@smixsInstall Plugin

115 brand-themed HTML designs as a Claude Code skill (93 web + 22 iOS, incl. 20 China showcase). Install in one line, then talk: 'do a Linear-style page', '飞书风的页面', 'Spotify Now Playing iPhone mockup'.

1 skill

@yzflyInstall Plugin

Gives your AI coding agent UX judgment for interface work, such as choosing a drawer over a modal, picking palettes that pass contrast, and designing button states and app navigation. It helps the agent avoid common design mistakes before you have to fix them.

45 skills

@dembrandtInstall Plugin

A curated collection of plugins for AI-assisted development at Bitwarden. Enables discovery and distribution of quality-controlled plugins for use with Claude Code.

83 skills

@bitwardenInstall Plugin

A skill for Claude Code that turns notes, metrics, and prose into clean, professional visuals such as board slides, charts, process flows, and timelines. It outputs SVG slides, an animated HTML deck, or a design spec.

1 skill

@kgraph57Install Plugin

An MCP server for the Khan Academy Wonder Blocks design system, a React component library. It is a work in progress, so parts of it may still change.

@khanInstall Plugin

This repo uses: pnpm for package management moon to manage task running Changesets for automated versioning and releasing Prettier for code formatting/linting commitlint and Convetional Commits to standardize commit messages husky to automate formatting of.

2 skills

@adobeInstall Plugin

Bridge connects Claude Code to the Figma Plugin API over WebSocket, so you can design, extract your design system, and fix or ship Figma components from the terminal.

5 skills

@noemuchInstall Plugin

A Claude skill that converts working Claude Code prototypes into structured Figma design files, exploding each interaction flow into separate frames, using your design system components, and annotating interaction details natively in Figma.

1 skill

@alima-maxInstall Plugin

A collection of Agent Skills for working with Webflow sites through the Webflow MCP server. Manage CMS content, audit site health, optimize assets, build in Webflow Designer, create Code Components, run Webflow CLI workflows, and safely publish changes.

33 skills

@webflowInstall Plugin

26 production-ready skills for AI coding agents. Install with one command, use across Claude Code, Cursor, Kiro, Windsurf, and OpenCode.

47 skills

@fabricioctellesInstall Plugin

The most comprehensive open-source product development skill for Claude. 80 agents · 36 frameworks · Research-first, AI-native, depth to the Mariana Trench · Solo founder Day 0 → IPO → public company This is a Claude Skill. Claude reads SKILL.md.

1 skill

@ankitjha67Install Plugin

Gridgeist is an agent skill for creating, redesigning, and reviewing product-native web interfaces. It adapts structure, typography, imagery, interaction, and product evidence to the established brand, using grids as visible, quiet, or invisible logic.

1 skill

@ohmilerInstall Plugin

Bootstrap projects from Figma, Linear, Notion & GitHub specs. The only AI ralph with source integrations.

9 skills

@rubenmarcusInstall Plugin

Audits Figma screens and components for design-system drift, such as missing shared components, local overrides, and unbound tokens. It can also apply the design system to an existing design and fix specific findings.

3 skills

@edenspiekermannInstall Plugin

Gives an AI coding agent working knowledge of WordPress sites, so it can analyze, audit, optimize and fix a site with its real content and structure in view. Covers page building, brand voice, reports and more.

55 skills

@respira-pressInstall Plugin

Gives your AI assistant the OutSystems tools and working rules in one install, so it can inspect and build OutSystems apps and tenant assets, confirm before changing anything, and wait for long operations to finish. Includes tools that draw interactive architecture and dependency graphs.

7 skills

@outsystemsInstall Plugin

A Claude skill that converts HTML, CSS, JS, screenshots, PDFs, Figma exports or design mockups into WordPress Elementor template kits. Built for designers and developers who build WordPress sites.

1 skill

@abanoubkhaliilInstall Plugin

Your client wants 30 days of social content across six platforms with brand-faithful imagery, AI-generated video, and provenance signed for EU markets. You have five days.

21 skills

@indranilbanerjeeInstall Plugin

Extracts a Figma design system into a structured design.md file, turning design tokens into markdown that AI coding assistants such as Claude Code can use. Useful for teams that want their design tokens documented for AI-assisted development.

1 skill

@albertzhangz10Install Plugin

A Claude Code skill for social media work: it builds monthly content calendars, audits a brand's social channels, and runs competitor audits. Useful for marketers and brand teams planning posts.

1 skill

@darthfluteInstall Plugin

Builds Figma component sets and Figma variable collections (primitive and semantic design tokens) from component contract files. Use it to keep Figma designs in sync with your component and token definitions.

2 skills

@nvillapianoInstall Plugin

Production-grade Claude Skills for building, debugging, and shipping n8n workflows, distilled from 100+ production workflows by an n8n Verified Creator. Give Claude Code the instincts of a senior n8n engineer.

5 skills

@masteranimeInstall Plugin

A Claude Code plugin with skills for product managers, covering competitive research, experiment analysis, customer feedback synthesis, decision records, and HTML slide decks for product presentations.

27 skills

@shaan-adInstall Plugin

A Claude Code skill that turns raw UX, product, and design project notes into portfolio case studies. It runs a short intake, then drafts the story in a format suited to the project and audience.

1 skill

@sonwaneyyInstall Plugin

Syncs design tokens between code and Figma variables, reporting drift and asking for approval before applying changes. Useful for design-system teams keeping code and Figma in step.

1 skill

@firebendersInstall Plugin

A frontend engineering plugin for Claude Code that adds skills, agents, commands, hooks and MCP servers covering accessibility checks, API integration, browser storage and related frontend work.

74 skills

@bovinphangInstall Plugin

A skill that makes a pixel-faithful clone of any web UI in your existing stack, working from a screenshot, a live URL, raw HTML and CSS, or a mix of these. It is built on the SKILL.md open standard.

1 skill

@santowilemInstall Plugin

A Claude Code plugin with specialist agents, slash skills, and hooks for development work. Skills cover multi-model workflows with Gemini and Codex, cross-model debate for design decisions, Playwright-based web crawler design, and cleaning up work artifacts.

23 skills

@ggombeeInstall Plugin

Takes a ticket from its issue key to a finished pull request, planning with your approval first and checking test coverage and other quality gates before the PR opens. The tracker is updated along the way, so you stop doing the routine steps by hand.

14 skills

@theamInstall Plugin

Auto-invoked skills and specialist agents for Drupal and WordPress development, covering browser validation, coding standards checks, commit messages, Composer patches, and test coverage analysis. Works in Claude Code, Claude Desktop, and OpenAI Codex.

28 skills

@kanopiInstall Plugin

Makes the AI agent work like a careful QA engineer: every pass or fail verdict must rest on an observed artifact such as a screenshot, network response or log, and anything not checked is marked as not tested instead of guessed. Includes help drafting bug reports and test cases.

5 skills

@akovalionInstall Plugin

A development workflow plugin that guides AI and human collaboration through story markdown, BDD scenarios, task dependency analysis, and draft story generation from trackers, designs, and code. Includes guidance on technical design PRs and code review.

10 skills

@intaiInstall Plugin

Turns a ticket into a test-first implementation plan, smoke-tests features against a running app, hunts bugs using runtime evidence, and reviews pull requests with context from your tracker and design tools. Each skill handles one step of the development cycle.

40 skills

@flagrareInstall Plugin

Turns a screenshot of a hero section or landing page into a copy-paste developer prompt for recreating it in AI coding tools like Lovable or Bolt, with colors, classes, and component structure.

1 skill

@surya17155Install Plugin

A frontend kit of skills and agents that helps Claude Code and other AI coding agents plan, debug, and review React and Next.js work, including reading Figma designs and screenshots into implementation specs.

23 skills

@ytvee-devInstall Plugin

Two composable, tool-agnostic skills for design-to-code fidelity, get the real design out of Figma, then prove the running app actually matches it.

2 skills

@jeltehommingaInstall Plugin

Skills and slash commands for LinkedIn growth that audit your profile, draft posts, carousels and comments, analyze performance, and remove AI-sounding wording from text. Open source under the MIT license.

17 skills

@warpirateInstall Plugin