Design and UX

wch/create-shiny-react-app

MCP server Claude CodeCodexCursor +2

Add components to your apps. Runs locally from the shadcn npm package.

Raul-Marin/html-to-design-marcador

Cursor rule Cursor

Figma html-to-design en modo solo-script por defecto (sin captura MCP salvo petición explícita).

joannastoffregen/guardian_ai_website_yt

Cursor rule Cursor

Ensures the style guide stays in sync with implementation.

yudistirosaputro/palugada-cli

MCP server Claude CodeCodexCursor +2

One of 2 in .mcp.json

MCP server "figma-bridge" as configured in yudistirosaputro/palugada-cli. Runs mcp/figma-bridge/dist/index.cjs with node.

nicolethoen/patternfly-ai-coding

Cursor rule Cursor

Enforces PatternFly Vibe coding standards and documentation best practices for all PatternFly React code.

0505ttt/frontend-design-research-zh

Plugin Claude Code

Bundles 1 skill · 146 tokens together

A Chinese-language plugin that provides a method for researching and designing website front ends. It includes guidance on visual direction, avoiding generic AI design patterns, image-generation prompts, and workflows for tools such as v0, Bolt, and Lovable.

mae616/design-skills

Skill Claude Code

Translate designs and UI requirements into robust, extensible implementations. Apply when converting designs to code, implementing components, fixing broken UI, or handling responsive layouts.

michaelshimeles/ui-agent-constraints

Skill Claude CodeCodex

Opinionated constraints for building better interfaces with agents.

huyhoangnhh98/anti-ai-design

Skill Claude CodeCodex

Auto-orchestrating UI design skill that prevents generic AI-generated output. Detects project context and target platform, explicitly asks the user which platforms to design for, resolves brand color direction through user choice or auto-selection, presents curated design style options, and generates a CJX-ready…

zht043/AgentSkills

Skill Claude CodeCodex

A skill for adding Mermaid diagrams to Markdown documents. Mermaid is a text format that turns descriptions into diagrams, and this skill supports dark and light themes, meaningful shapes, compact layouts, and reusable templates.

devinilabs/claude-stitch-setup

Plugin Claude Code

Bundles 1 skill, 1 MCP server · 76 tokens together

Google Stitch MCP server + agent skills for Claude Code. Generate, edit, and export UI screens from text prompts — with design-system awareness.

Maximepodgorski/claude-plugin

Plugin Claude Code

Bundles 1 skill · 113 tokens together

Design system skills for Claude Code — Figma to production, DS-compliant.

zeta92/design-library-plugin

Plugin Claude Code

Bundles 12 skills, 2 hooks, 1 MCP server · 507 tokens together

A full design suite for Claude Code: 58 brand design systems + UI/UX, accessibility, motion, design guidelines, visual taste, web quality (Lighthouse/Core Web Vitals), and full design-process skills. Bundles Playwright MCP for in-browser verification. Auto-selects skills based on your project type.

Albermonte/android-skills

Skill Codex

Android UI/UX design or review with Material 3 Expressive (M3 Expressive / Material You Expressive). Use when selecting expressive component tokens, defining expressive hierarchy, motion, color, shape, typography, or reviewing Android UI against expressive guidance. Not for non-Android platforms, non-UI Android tasks…

Surya17155/Replica

Skill Claude CodeCodex

Use when the user uploads a screenshot of a hero section or landing page (or a URL/description of one) and wants a copy-paste-ready developer prompt to recreate it exactly in a tool like Lovable, Bolt, Replit, or Cursor. Produces prompts with exact hex colors, Tailwind classes, animation timing tuples, and component…

santowilem/skills

Skill Claude CodeCodex

Pixel-faithful clone of any web UI into the user's existing stack, using whatever sources are available — a screenshot alone, a live URL, raw HTML/CSS, or any combination. Use this skill whenever the user wants to recreate, match, replicate, or "clone" a design from a screenshot, image, URL, Figma export, or HTML…

jithinolickal/blender

Plugin Claude Code

Bundles 1 skill · 94 tokens together

AI-powered 3D design in Blender via MCP. Create parametric models, apply materials, set up lighting, and render scenes.

Owl-Listener/agent-ready

Skill Claude CodeCodex

Assess a Figma file's agent readiness before generating code or modifying designs. Use when reading design context from Figma via MCP, generating code from Figma components, creating or updating components in a Figma file, or when code output quality seems poor and the cause may be file quality. Triggers on: Figma…

0xNyk/unmachined

Skill Claude CodeCodex

Finds and removes AI slop from prose, UX copy, and web interfaces. Use when writing, auditing, or revising articles, posts, READMEs, marketing copy, UI copy, layouts, or frontend code that must not feel AI-generated; when the user says unmachined, de-slop, AI slop, anti-slop, humanize, make this human, sounds like AI…

JacobLinCool/ux-discovery-interviewer-skill

Skill Claude CodeCodex

run an interactive ux research discovery interview with a customer who starts from a vague product idea or follow-up request. use when chatgpt should act as a ux researcher, clarify goals through progressive questioning, and produce research outputs such as interview summary, user journey, happy path, pain points…

solinkz/micro-interactions-skill

Skill Claude CodeCodex

Expert micro-interaction architect for mobile apps, web applications, and responsive websites. Use this skill when the user asks to add, build, fix, audit, or consult on micro-interactions, animations, transitions, motion design, gesture feedback, haptics, loading states, skeleton screens, pull-to-refresh, swipe…

realproject7/svgsmith

Skill Claude CodeCodex

Convert a raster image (PNG/JPG) into clean, editable SVG using the svgsmith CLI. Use when the user wants to vectorize, trace, or turn a bitmap/logo/icon/illustration/pixel-art image into SVG. Picks the engine by intent, self-verifies the output quality, and retries before reporting.

cristicretu/family-taste-skill

Skill Claude CodeCodex

Apply the "Family Values" design philosophy to every UI you build. Use this skill whenever creating frontends, components, apps, landing pages, dashboards, or any user-facing interface. Enforces three core principles — Simplicity (gradual revelation), Fluidity (seamless transitions), and Delight (selective emphasis) …

RMRanjit/mcp-Archimate

MCP server Claude CodeCodexCursor +2

A Model Context Protocol (MCP) server for ArchiMate 3.2 enterprise architecture diagrams. Creates Mermaid and ArchiMate XML diagrams with validation against ArchiMate 3.2 specification. Runs locally from the @null-pointer/mcp-archimate npm package.