Claude Code Design plugins and skills

A design toolkit for Claude Code covering UI styling, design tokens and component specs, brand identity and voice, banners, logos, and HTML slide presentations with charts.

7 skills

@nextlevelbuilderInstall Plugin

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

Design guidance for AI coding agents that helps shape, critique, polish, and improve frontend interfaces such as websites, landing pages, and dashboards. It includes live browser iteration and rules that catch common issues in AI-generated frontend design.

1 skill

@pbakausInstall 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

Skills that help designers and engineers make better UI animation decisions faster, covering when to animate, which properties and curves to use, keeping web motion within the frame budget, and React Native and Expo animation.

18 skills

@emilkowalskiInstall Plugin

A design skill for Claude Code, Cursor, and Codex that builds new pages and apps, audits existing ones, and redesigns them or extracts design from URLs or screenshots, with the aim of avoiding a generic AI-generated look.

1 skill

@nutlopeInstall Plugin

Helps designers and engineers make the right animation and interface choices faster, from deciding whether to animate and which properties and curves to use, to keeping motion smooth and finding the exact term for an effect you can only describe loosely.

16 skills

@emilkowalskiInstall Plugin

Draw and edit draw.io diagrams by chatting with an AI. Describe a diagram in a sentence and the AI draws it on a real draw.io canvas. Edit it by hand like any draw.io file, or select a few shapes and tell the AI what to change.

@dayuanjiangInstall Plugin

Design physical products with AI.

8 skills

@earthtojakeInstall Plugin

Create and edit 3D building models in your browser, run Pascal locally with its CLI, or connect AI agents through the Model Context Protocol (MCP).

3 skills

@pascalorgInstall Plugin

A design skill for AI coding tools such as Claude Code that guides building high converting landing pages, covering intake questions, page structure, layout choice, conversion copywriting, SEO, and strict rules for typography, spacing and corner radius.

1 skill

@elayadesignInstall Plugin

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

14 skills

@jakubkrehelInstall Plugin

Gives a coding assistant design engineering skills for tidying UI spacing and typography, auditing accessibility like labels, focus and contrast, fixing HTML metadata and SEO tags, and documenting a product's visual system.

9 skills

@ibelickInstall Plugin

A design skill that turns a theme, mood, or reference into a sparse paper-texture editorial poster, a ready-to-use image prompt, or a reusable visual system. It is written for Codex, not Claude Code.

1 skill

@liamgvchiInstall Plugin

A Claude Code plugin for designing dashboards, admin panels, SaaS apps, and settings pages with consistent, intentional interfaces. It remembers design decisions across sessions and supports reviewing and refining existing UI, but is not meant for marketing sites.

1 skill

@dammyjay93Install 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

Focused agent skills for creating useful, self-contained HTML artifacts, from low-fidelity wireframes to working interactive prototypes.

8 skills

@plannotatorInstall Plugin

A skill of design engineering principles for polishing UI, covering hover states, shadows, borders, typography, icons, and animations. Useful when building components or reviewing frontend code.

1 skill

@jakubkrehelInstall Plugin

A registry of design system skill files for AI coding tools such as Claude Code, covering styles from editorial print to data-dense enterprise interfaces. Each skill can be added to a project on its own.

67 skills

@bergsideInstall Plugin

Gives your AI coding assistant ready-made design guidance, covering typography, color, spacing, components and accessibility rules, so the interfaces it builds follow a consistent visual style. Each style comes with a short instruction file and a companion design note.

67 skills

@bergsideInstall Plugin

Skills and commands for design teams using Claude Code, covering critique sessions, design debt audits, impact reporting, QA checklists and review gates. Each skill points to the related skill to use for adjacent tasks.

111 skills

@owl-listenerInstall Plugin

A cross-platform UI and UX design reviewer grounded in Apple's Human Interface Guidelines, with a design-craft lens for distinctive interfaces. Packaged as an agent skill for reviewing app interfaces.

1 skill

@dickwuInstall 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

mcp-excalidraw-server gives AI agents a live Excalidraw canvas they can draw on, look at, refine, and save into your repo.

1 skill

@yctimlinInstall Plugin

Turns a raster logo, such as a PNG, JPG, WebP or screenshot, into a clean minimal SVG, then builds an SVG logo animation and an interactive HTML motion demo. Useful for designers who need scalable logo vectors and animated previews.

1 skill

@nolangzInstall Plugin

Gives your AI assistant design skills, UI prompts and brand kits so the interfaces it builds for websites and apps look more deliberate. It also brings in universal guidance on visual hierarchy, typography and accessibility for design decisions.

2 skills

@bergsideInstall Plugin

Extracts design DNA from reference UIs such as images, screenshots, or URLs, covering design tokens, qualitative style, and visual effects, then generates matching UI from your content.

1 skill

@zanweiInstall Plugin

Guides a product from an idea to a codebase in steps covering product vision, data shape, design tokens, UI design and implementation handoff. Provides commands for Claude Code users.

@buildermethodsInstall Plugin

A motion and interaction design skill with two modes, build interactive components with purposeful motion, or audit existing animations. Both modes give context-aware, per-designer guidance drawn from three distinct motion-design lenses.

1 skill

@kylezantosInstall Plugin

A comprehensive skill for AI coding assistants that can load SKILL.md files, covering Google's Material Design 3 (Material You) UI system.

1 skill

@hamenInstall Plugin

A motion and interaction design skill with two modes, build interactive components with purposeful motion, or audit existing animations. Both modes give context-aware, per-designer guidance drawn from three distinct motion-design lenses.

1 skill

@kylezantosInstall Plugin

Agent skill for creative 3D visualization: turn an idea into a Three.js/Blender scene worth exploring. Claude Code + Codex plugin, 223 recipes, 440 knowledge records, 22 proved kits, 37 runnable studies.

1 skill

@viettranxInstall 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 design method toolkit for building and reviewing user interfaces in Claude Code. It applies consistent design tokens, layout choices, and rendered visual checks, and includes a skill for capturing approved design lessons locally.

2 skills

@bitjaruInstall Plugin

A reference of Apple Human Interface Guidelines for Claude Code, covering iOS, iPadOS, macOS, tvOS, visionOS and watchOS, with a guided workflow for adapting an existing iOS app to the folding iPhone.

1 skill

@justinwetchInstall Plugin

A skill that turns a PRD, reference URL, screenshot or keywords into a standard DESIGN.md spec, then generates responsive web pages such as landing pages, portfolios, product pages and blogs once the user confirms the spec.

1 skill

@xiaopu-aiInstall Plugin

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

1 skill

@0xdesignInstall Plugin

A Claude Code skill that generates on-brand HTML presentation decks or responsive websites by extracting a brand's design language with Firecrawl and applying codified design principles, including color contrast and slide layout rules.

1 skill

@itsssssjackInstall Plugin

Helps Claude design and polish user interfaces by applying the concrete rules from the book Refactoring UI, such as set spacing, type, color and shadow scales and building visual hierarchy with weight and color. It turns vague design judgment into specific choices you can apply directly.

1 skill

@s0xdkInstall Plugin

An AI-powered Claude skill for creating, rigging, and refining Spine 2D skeletal animations, from raw assets to interactive previews. Live Animation Preview · Interactive Part Editor.

1 skill

@genielabsopensourceInstall Plugin

Helps AI produce distinctive interface designs instead of generic templates. It previews visual directions, implements the chosen one, and checks it in the browser, and it also makes cover images for social media platforms.

1 skill

@joeseesunInstall Plugin

Gives Claude Code design guidance for pages, components and product interfaces, covering diagnosis, visual direction previews, design systems, implementation and visual checks. It also creates and adjusts cover images for WeChat, Bilibili, YouTube and Xiaohongshu.

1 skill

@joeseesunInstall Plugin

A house style for hand-written SVG diagrams such as flowcharts and architecture figures, with layout arithmetic, a colour system, and a dependency-free linter that checks the output. Suited to CJK-friendly typography.

1 skill

@bybit-exchangeInstall Plugin

An agent skill that gives a coding agent color science knowledge for palettes, ramps, gradients, color space conversions, accessibility checks, and perceptual color matching.

1 skill

@meodaiInstall Plugin

Skills that give Claude Code guidance for building interfaces that follow Apple's Human Interface Guidelines for iPhone, iPad, Mac and Apple TV, plus Material Design for Android. They cover components, navigation, input and accessibility.

8 skills

@ehmoInstall 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 skills that let Claude design mobile app screens with Sleek, edit Sleek projects, and implement those designs in React Native or HTML.

1 skill

@sleekdotdesignInstall Plugin

A Claude Code plugin for designing modular software architectures and reviewing existing code for coupling problems, using the Balanced Coupling model. It produces design and review documents in Markdown and HTML.

4 skills

@vladikkInstall Plugin

Designs UI mockups for apps, admin panels, game interfaces and full landing pages, then turns them or screenshots into HTML/CSS, existing front-end projects or WeChat mini programs.

1 skill

@oil-oilInstall Plugin

Gives Claude Code and other AI coding agents a design system, with skills for applying brand context, fetching free placeholder assets, and critiquing UI quality. Free and open source under the MIT license.

41 skills

@kwakseongjaeInstall Plugin

A Claude Code skill for designing mobile app screens, flows, and components, and for improving existing mobile interfaces, following established design principles.

1 skill

@ceorkmInstall Plugin

A ui-ux skill for Claude Code that builds and polishes app interfaces such as dashboards, lists, tables, forms, settings pages and modals. It works from your project's own component library and colors, and proposes wireframes for you to choose from before building.

1 skill

@evondevInstall Plugin

Creates polished infographic images from data, facts, or a topic. Builds a self-contained HTML and SVG page in one of several design styles and renders it to PNG for Claude Code users.

1 skill

@orronInstall Plugin

A set of Claude Code skills for UI and UX design, including controlled design decisions, production-grade frontend generation, AI search optimization content, and personal coding conventions.

16 skills

@benciumInstall 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

Subframe is a UI design tool featuring a drag-and-drop visual editor, React + Tailwind code export, and AI-powered design and prototyping features.

@subframeappInstall Plugin

Reviews a UI design and gives targeted fixes for hierarchy, typography, color, spacing and buttons, so you can tighten a screen without guessing at each decision. Run one fix on its own or a full design pass across them.

11 skills

@gnurioInstall 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 skill that applies a restrained Scandinavian visual system to a codebase, with a black-and-white foundation, sans-serif type, generous spacing, and purposeful product imagery. It is built for Cursor agents.

1 skill

@ericzakariassonInstall Plugin

Creates hand-drawn architecture, workflow, and swimlane diagrams in dark neon or light paper styles, with editable Excalidraw sources, PNG previews, and animated GIF output.

1 skill

@lazypayInstall 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

Gives Claude Code a design skill that requires reference research before UI, landing page, dashboard, or styling work, plus a read-only MCP connection to Refero's design reference library.

1 skill

@referodesignInstall Plugin

A design plugin for Claude Code with skills for clarifying vague design requests, building viewable HTML mockups and wireframes, evaluating interface usability, and choosing truthful chart types. It helps avoid generic AI-looking interfaces.

4 skills

@ryanthedevInstall Plugin

Skills that guide product designers through the Layers of Product Design framework, covering conceptual models, domain mapping, interaction flows, and observed user behaviour research.

9 skills

@jamiemillInstall Plugin

A comprehensive showcase of 11 modern frontend design aesthetics with master prompts, signature effects, and production-ready code.

1 skill

@claudekitInstall Plugin

A skill for web projects that converts hex, rgb and hsl colors to OKLCH, generates palettes, checks contrast, handles gamut boundaries, and sets up themes with Tailwind.

1 skill

@jakubkrehelInstall Plugin

Claude Code Skills for content creation, design optimization, and resource curation.

3 skills

@ricoccInstall 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

Installable Agent Skills for creating and managing reversible themes across supported Chromium/Electron AI desktop apps, including OpenAI Codex and Tencent WorkBuddy.

2 skills

@codedrobeInstall Plugin

Claude Code/Agent Skill for making App Store screenshots with GPT Image 2 that you can upload. Give it your App Store link & screenshots of your app and it will produce beautiful app store screenshots ready to upload to Apple (or Google)

1 skill

@hypersocialincInstall 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

Claude skills for Computational Designers.

18 skills

@abhinavbwjInstall Plugin

A compact design skill that generates four design variations of a component to iterate better on your UIs. A skill for Claude Code, Codex CLI, and opencode.

1 skill

@nutlopeInstall Plugin

A portable Claude skill that turns Claude into an expert designer for HTML-based artifacts, landing pages, slide decks, interactive prototypes, animated videos, posters, wireframes, and visual explorations.

1 skill

@jiji262Install Plugin

A Agent Skill for designing professional interfaces following Apple Human Interface Guidelines 一项用于设计苹果前端交互界面的代理技能.

1 skill

@axiaoge2Install Plugin

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

7 skills

@kayforkindInstall Plugin

Diagram with your agent. Stay in control. Use Claude Code or Codex to edit an existing Excalidraw diagram. Review what changed, keep drawing in the same workspace, and export a native file you can keep editing.

3 skills

@edwingao28Install 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

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

Part of the Designer Skills suite. Install this collection and four more with one command in Claude Code: /plugin marketplace add Owl-Listener/designer-skills This repo still works on its own. The suite just gives everyone one front door.

44 skills

@owl-listenerInstall Plugin

Turn raster figures into editable SVG and native PowerPoint files.

1 skill

@giszztInstall Plugin

Turn one visual reference into a connected brand system with Lovart Agent. An open-source, agent-guided creative-direction workflow for building an Anchor Brand Kit, guidelines, key visuals, original campaign assets, and packaging concepts, without losing.

1 skill

@amirmushichgeInstall Plugin

47 installable visual-design skills for Codex, with reusable Python tooling and versioned packages. Turn photos into artwork. Try online: style.abdc.online.

51 skills

@vieeeeeeeInstall 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

Reusable UI/UX design skills for AI coding agents, Codex, Claude Code, ZCode, and more. OJO Design Skills is a drop-in skill bundle that teaches your AI coding agent how to make real design decisions, not generic "AI-looking" layouts.

2 skills

@touchine-ojoInstall Plugin

Claude Code plugin that lets Claude drive real Onshape CAD: sketches, extrudes, fillets, mates, parametric iteration via Variable Studios, custom FeatureScript features.

2 skills

@reshefelishaInstall Plugin

One prompt. One .drawio file. Every icon renders correctly because the skill carries a verified catalog of 270+ stencil names, not guesses.

1 skill

@vidanovInstall 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

A reusable Agent Skill for designing, reviewing, and implementing UI/UX with Google Material Design 3, Material You, M3 Expressive, accessibility, adaptive layouts, and semantic design tokens.

1 skill

@skydashnetInstall 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

Frontend design skill for Claude Code, Codex, and Gemini CLI. Eight aesthetic anchors, each locking palette, typography, and texture to specific CSS tokens. Pick one per brief.

1 skill

@ilm-alanInstall Plugin

Active open-source project · MIT tooling with attributed Apple reference content HIG Doctor helps developers and coding agents find interface issues before release.

15 skills

@raintree-technologyInstall 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

Urban Design Skills Claude.

18 skills

@abhinavbwjInstall Plugin

The design language of Open Analytics, packaged three ways: an agent skill, type-checked component recipes, and a CLI. People kept asking how the dashboard looks and moves the way it does; this repository is the answer, in a form an agent can execute.

1 skill

@openlabs-soInstall Plugin

A library of Claude Code skills for teaching coding agents how to use various CAD tools. Sponsored by neThing.xyz.

4 skills

@rawwerksInstall Plugin

Agent Skills for finding and fixing web accessibility issues, powered by @accesslint/core.

5 skills

@accesslintInstall Plugin

A Claude Code Skill powered by getdesign.md, give your AI agent the design language of world-class brands, on demand.

1 skill

@spacezephyrInstall 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

Turn photos, ideas, and research into beautiful editorial visuals with Codex or Claude Code. Made with one shared paper-and-ink system and four compositions chosen for the subject. Click any image for the full result.

4 skills

@jiahuiqu17Install 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

A collection of agent skills for building interfaces with coding agents.

26 skills

@raphaelsalajaInstall Plugin

A Claude Code skill that gives a prioritized design critique of a UI from a URL, screenshot, or component file. It covers visual hierarchy, typography, spacing, color and contrast, motion, component states, and responsiveness.

1 skill

@superfutureInstall 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

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