Design and UX

alfianyusufabdullah/figma-proxy-mcp

Skill Claude CodeCodex

Slice a Figma frame into production-ready HTML/CSS with ≥90% visual fidelity via the figma-proxy-mcp tools.

AlexZai007/figma-unlimited-mcp

MCP server Claude CodeCodexCursor +2

MCP server that lets an AI agent read and edit FigJam boards through a local Figma plugin — no REST or Dev Mode quotas. Runs locally from the figma-unlimited-mcp npm package.

maaker-ai/excalidraw-mcp

MCP server Claude CodeCodexCursor +2

Generate 25+ types of Excalidraw diagrams with auto-layout. Flowcharts, sequence, architecture, mind maps, ER, class, state, timeline, pie/bar/line/radar charts, kanban, wireframes, decision trees, and more. Runs locally from the maaker-excalidraw-mcp Python package.

Ciltress/sap-abap-mcp

Skill Claude CodeCodex needs its repo

Generate SAP BTP (Business Technology Platform) solution architecture diagrams as native draw.io (.drawio) files following the official SAP BTP Solution Diagram guidelines (Fiori Horizon design system) and open them via a configured draw.io MCP server. USE WHEN: user asks to create/draw/design/sketch a BTP diagram…

mklinovsky/excalimaid

MCP server Claude CodeCodexCursor +2

Convert Mermaid diagrams to Excalidraw and open in browser. Includes MCP server for AI assistants. Runs locally from the excalimaid npm package.

Henry-Hong/figma-mcp

MCP server Claude CodeCodexCursor +2

Enhanced Figma MCP Server with prototype flow analysis — exposes screen lists, prototype connections, and full flow maps via Figma REST API. Runs locally from the @devheerim/figma-mcp npm package.

bharathgnana/archdiagram

Skill Claude CodeCodex

Turn a natural-language cloud architecture description into an editable diagram whose nodes are official vendor service icons (Azure, AWS, GCP, Kubernetes), exported as PDF, draw.io, or VSDX (Lucid-importable). Use when the user asks to draw, diagram, or visualize a cloud/system architecture, or to produce a…

dalingo81/ZWCAD-MCP

MCP server Claude CodeCodexCursor +2

MCP server "zwcad-mcp" as configured in dalingo81/ZWCAD-MCP. Runs locally from the zwcad-mcp Python package.

EnchStyle/ui-ux-audit-skill

Skill Claude CodeCodex

Comprehensive UI/UX quality audit and prevention system that catches the failures AI consistently ships, including broken or shifting layouts, text overflow, inconsistent components, missing states, poor contrast, undersized touch targets, accessibility violations, performance jank, and generic "AI slop" aesthetics.…

keysjoao/laws-of-ux-skills

Skill Claude CodeCodex

Quick 12-point UX pre-ship checklist with pass/fail verdict. Use when user says "UX checklist", "pre-ship check", "ready to ship?", "quick UX check", "laws-of-ux checklist", or "ship check".

jeremidelacruz/growthlab-skills

Skill Claude CodeCodex

Use when an LLM needs to respect a brand it has never seen — or when a deliverable came back off-brand, colors were guessed, or a font was invented. Also when a brand identity lives only in a PDF manual, a website, or someone's head, and needs to become rules a model can check itself against. Triggers on: "design.md"…

lexs32/ultimate-design-engineer

Skill Claude CodeCodex

The master design engineering skill encoding Emil Kowalski's polish philosophy, Apple's fluid interface principles, Anime.js 3D/timeline motion, Motion spring physics, Kokonut UI component aesthetics, and Backlit UI dark-mode charts. Use when designing, animating, or reviewing web UIs to achieve high-precision craft…

DanielJamesTronca/apple-liquid-glass-skill

Plugin Claude Code

Bundles 1 skill · 105 tokens together

Design, implement, review, and migrate Apple Liquid Glass UI across SwiftUI, UIKit, AppKit, WidgetKit, CarPlay, and Icon Composer.

samuelpatro/.claude

Skill Claude Code

Apple's approach to interface design and fluid, physical motion, translated for the web. Use when building or reviewing gesture-driven UI, spring animations, drag/swipe/sheet interactions, momentum and interruptible transitions, translucent materials and depth, typography (optical sizing, tracking, leading)…

humbleteam/design-review

Skill Claude CodeCodex

Run a structured UX critique on a screenshot, URL, or HTML snippet - a 0-4 score, up to 6 prioritized issues each with Before/After/Why, and one citation per claim. Given two or more variants, compares them on shared dimensions and names a winner. Given a screen plus a decision question, answers the question with the…

heyparsadev/liquid-glass-skill

Plugin Claude Code

Bundles 1 skill · 105 tokens together

Comprehensive iOS 26 Liquid Glass design system for SwiftUI. Provides API reference, HIG principles, design tokens, motion patterns, accessibility guidance, performance rules, anti-patterns, a pattern library for every common surface, and nine full-screen example apps that compile in Xcode 26.

connerkward/ckw-skills

Plugin Claude Code

Conner K. Ward's Claude Code skills and MCP servers — human-in-the-loop studios, deterministic design tooling, and personal-data search.

imamirezaei/Product-Team-Claude-Skills

Skill Claude CodeCodex

Use this skill to generate interactive HTML wireframes showing a feature in multiple states AND multiple interaction pattern variants. Triggers: 'show me what this looks like', 'generate a wireframe', 'I want to see all the states', 'show me different ways to implement this', 'make a visual prototype of the flow'…

iannuttall/png2svg

Skill Claude CodeCodex

Reconstruct a geometric PNG (logo, icon, monogram) as a clean native SVG with exact geometry and gradients, using an analyse -> measure -> model -> check -> residuals iteration loop scored by perceptual metrics. Use when asked to vectorise, trace or convert a PNG/WebP logo to SVG, recreate a logo's geometry, rebuild a…

netresearch/netresearch-branding-skill

Plugin Claude Code

Bundles 1 skill · 56 tokens together

Netresearch brand guidelines with branded output styles.

aliborhothamud/claude-melhores-skills

Skill Claude CodeCodex

Use when a landing page, marketing site, or hero section looks generic/AI-made ("cara de vibe coding") and needs a $10k-agency-level redesign, or when building a new landing from scratch. Triggers - "o site ficou com cara de IA", "quero uma landing premium", "redesenha a landing", "faz o site baseado em [site de…

s-a-s-k-i-a/design-md-skill

Skill Claude Code

Generate or update a DESIGN.md for the current project following the google-labs-code/design.md specification. Inventories existing design inputs (theme.json, Tailwind config, CSS custom properties, DTCG tokens, brand assets), maps them to typed tokens (colors, typography, rounded, spacing, components), writes the…

nusabyte-my/jebat-core

Skill Claude CodeCodex

Generate web assets including favicons, app icons (PWA), and social media meta images (Open Graph) for Facebook, Twitter, WhatsApp, and LinkedIn. Use when users need icons, favicons, social sharing images, or Open Graph images from logos or text slogans. Handles image resizing, text-to-image generation, and provides…

aj604/agentic-atlas-plugin

Plugin Claude Code

Bundles 3 skills, 2 agents, 1 MCP server · 707 tokens together

Do design work with Agentic Atlas over hosted MCP at agentic-atlas.dev/mcp/. Three skills — audit an existing agent artifact, design a new agent system, apply one named pattern — over two read-only agents; no SDK, CLI, local server, or content bundle is installed.