Design and UX

connerkward/ckw-design-skill

Plugin Claude Code

Lists 1 plugin

Frontend design skill: direction, design system, visual philosophy.

BESSER-PEARL/uml-drawing-skill

Skill Claude CodeCodex

Put a correct UML class diagram — as an embeddable image — into your docs. Use this skill whenever the user wants to add, draw, embed, or export a UML class diagram for a README, design doc, wiki, slide, or .md spec: it builds a structurally-correct model (classes, attributes, associations, inheritance…

fitoe/DesignToCode

Skill Codex

Use when converting approved design sources, handoff packages, mockups, visual contracts, or UI blueprints into implementation code and visual parity evidence; also when visual implementation feels rough, stretched, under-specified, or needs section-level high-fidelity repair.

sahajamit/figma-cli

Skill Claude Code

Figma component, style, variable, and design token commands. Use for browsing design systems, searching components, and extracting design tokens.

tomo1230/freecad_mcp_server

Skill Claude CodeCodex

A step-by-step guide for creating 3D models in FreeCAD, a computer-aided design program, through its MCP tools. It explains the required order for creating, positioning, combining, hollowing, rounding, checking, and exporting shapes.

sunhome243/figma-mcp-express

Plugin Claude Code

Bundles 4 skills, 1 hook, 1 MCP server · 170 tokens together

Compact Figma MCP with validated batch ops, multi-channel routing, library automation, and design skills.

sergio-farfan/OCI-draw.io-Architect

Plugin Claude Code

Bundles 1 skill, 1 command · 133 tokens together

Generate production-quality draw.io diagrams for OCI architectures using Python, embedded SVG icons, and Oracle template styles.

software-ai-life/Awesome-IG-Design-Skills

Skill Codex

Create or redesign Instagram posts in a retro playful editorial aesthetic: 4:5 aspect ratio, clean magazine-style layout, nostalgic objects such as vintage phone, toys, and everyday items, balanced image and structured typography overlay, horizontal color blocks, label-style sections, subtle UI-like information layout…

pouyabagheri2005-sudo/CATIA-mcp-ai-automation

MCP server Claude CodeCodexCursor +2

MCP server "catia" as configured in pouyabagheri2005-sudo/CATIA-mcp-ai-automation. Launched with C:\Path\To\Python\python.exe C:\Path\To\catia_mcp\server.py.

iFurySt/DESIGN.md

Skill Codex

Create or refine a DESIGN.md from a public website URL, then use that design system to build and open a standalone HTML page based on either a reference URL or the user's requested page and content. Visually validate the HTML and feed reusable corrections back into DESIGN.md. Use when the user wants a DESIGN.md, an…

flitzrrr/frontend-design-skills

Skill Claude CodeCodex

Modern UI component selection, composition, and theming patterns for web applications. Covers compound components, design tokens, variant systems, responsive patterns, and form architecture derived from 21st.dev SDK, Godly featured products, and current best practices.

sudharsank/spfx-enterprise-skills

Skill Claude CodeCodex

Core design guidance for SPFx web parts and extensions. Use for layout, hierarchy, commanding, text, empty states, and responsive behavior when building or reviewing SPFx UX.

TudeOrangBiasa/design-skill

Skill Claude Code

Frontend design partner. Kills AI-slop by teaching 10 tells with positive direction. Five commands: detect, audit, deslop, shape, craft. Model-invoked: flag tells, run detect. User-invoked: grill first.

ejwhite7/brandkit-mcp

MCP server Claude CodeCodexCursor +2

Brand atomic system over MCP: verbal, visual, motion, tokens, and a magictrick taste primer. Runs locally from the brandkit-mcp npm package.

Demolinator/revit-mcp-plugin

Plugin Claude Code

Bundles 1 skill, 5 commands, 1 MCP server · 143 tokens together

Natural-language building design and BIM management for Autodesk Revit 2024/2025/2026/2027. All Revit professionals — architects, structural engineers, MEP engineers — describe what they want in plain English, and Claude creates, modifies, and analyzes BIM elements in the live Revit model via 48 MCP tools (including…

EaseHee/rhino-mcp

MCP server Claude CodeCodexCursor +2

MCP server connecting Claude to McNeel Rhino 8 and Grasshopper via rhino3dm and an in-Rhino bridge plugin. Runs locally from the rhino3dm-mcp Python package.

georgeharker/svg-mcp

MCP server Claude CodeCodexCursor +2

A FastMCP server exposing structured, hierarchical SVG authoring with a render-and-see feedback loop. Runs locally from the svg-mcp Python package.

Lucxar/premium-web-design-skill

Skill Claude CodeCodex

Transform any website into a premium, Apple-quality web experience. Use when building new websites, redesigning existing ones, reviewing web design quality, implementing landing pages, or when the user mentions "premium", "luxury", "high-end", "Apple-like", or "professional" website design. Also activate when creating…

arcsin1/style-generate-skill

Skill Codex

A tool for turning Markdown, plain text, HTML, presentations, or a reference image into an installable PowerPoint style package. The package includes reusable style files and a preview page.

divikwu/figcraft

Skill Claude Code

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.

donaldrichard19-LVD/pattern-mcp

Skill Claude CodeCodex

Use when building, prototyping or scaffolding UI (a component, page or screen), especially from a Figma link, mockup or screenshot. Checks the project's own design system first to decide reuse versus build, returns the exact unmet requirements to build, then verifies the built file. Skip trivial primitives (button…

Youn-17/omnigraffle-bindcraft

MCP server Claude CodeCodexCursor +2

MCP server "omnigraffle-mcp" as configured in Youn-17/omnigraffle-bindcraft. Runs locally from the omnigraffle-mcp npm package.

dannykeane/figmanage

Skill Claude CodeCodex

Manage Figma workspaces with the figmanage CLI or MCP. Use for locating and organizing files and projects, access reviews, teams, seats, onboarding, offboarding, cleanup, setup recovery, or handing a managed file to the official Figma MCP for design work.

Kemdirimakujuobi/skills

Skill Claude CodeCodex

Run this AFTER a design-system PR merges, whenever the user says "it's merged", "I merged it", "did it land?", "make sure it reaches the app", or you have just watched a PR touching published components, tokens or icons go green and merge. A merge is NOT delivery: the change must be declared (changeset), published to…