13,362 tagged Design and UX, measured the same way as everything else here.
Browse within: design-system 162agentic-ai 157agentic 152ai-tools 130skills 128ai-design 112byok 106agent 102coding-agents 93desktop-app 93ai-ppt 88ai-ppt-generator 87aippt 87html-ppt 87
Skill Claude Code
Use when the user wants to design, analyze, audit, refine, or improve frontend interfaces. Covers websites, landing pages, dashboards, product UI, applications, components, design systems, and any visual interface. Handles UX review, visual hierarchy, information architecture, accessibility, performance, responsive…
tonyljl526/bambu-filament-color-match
Skill Claude CodeCodex
An offline color-matching tool for 3D-printing materials. It matches a HEX color or the main color in an image to colors from several named filament catalogues and can create a local HTML color card.
Skill Claude CodeCodex needs its repo
Turn notes (Notion, Google Docs, Markdown) into branded 1920×1080 HTML slide decks with PDF and PNG export. Pulls real brand tokens from any URL.
Skill Claude CodeCodex
Comprehensive web interface guidelines for accessibility, interactions, animations, layout, content, forms, performance, and design.
Skill Claude Code
Complete shadcn/ui component library guide including installation, configuration, and implementation of accessible React components. Use when setting up shadcn/ui, installing components, building forms with React Hook Form and Zod, customizing themes with Tailwind CSS, or implementing UI patterns like buttons…
Skill Claude Code
Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social/ads/web/print), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos…
Skill Claude CodeCodex
Converts a Figma frame into pixel-perfect code in whatever stack the project uses — by extracting EXACT values via the Figma MCP and reproducing every visual property (borders, gradients, shadows, blurs, opacity) instead of eyeballing them. Use whenever the user shares a figma.com/design URL or dev link and wants…
Skill Claude Code
Live parameter tweaking and design exploration for React projects using the dialkit npm package. Triggers on "design with dialkit", "live parameter tweaking", "interactive design exploration", "tweak parameters", "tune values", "explore design directions", "dial in this component", "design exploration", or invokes…
Skill Claude Code
A guided process for choosing a user interface’s visual direction and recording the decisions in DESIGN.md.
Skill Claude Code
Reviews code diffs after implementation, auto-fixes safe issues, and runs specialist security and architecture reviewers on large diffs. Also triages issues and PRs when the user mentions them. Not for exploring ideas or debugging.
Skill Claude CodeCodex
Perform a static UX audit of any frontend or app codebase by traversing the code, without running the app or opening a browser. Use this whenever the user asks for a UX audit, UX review, design review, accessibility check, flow map, or "check my UI/UX", and no dev server or browser tool is available or wanted. Also…
Skill Claude CodeCodex
Mermaid diagram design master: create beautiful, ergonomic diagrams and export to high-quality images (PNG/JPG/SVG/PDF). Use when user wants to draw/design/visualize architecture diagrams, flowcharts, sequence diagrams, ER diagrams, mind maps, or any diagram; when user needs to convert Mermaid code to images; when…
Skill Claude CodeCodex
UI/UX design intelligence and implementation guidance for building polished interfaces. Use when the user asks for UI design, UX flows, information architecture, visual style direction, design systems/tokens, component specs, copy/microcopy, accessibility, or to generate/critique/refine frontend UI (HTML/CSS/JS…
Skill Claude CodeCodex
The craft layer for authoring standalone SVG assets through the SVGator MCP — designing the artwork, directing the motion, and wiring the interaction. Turns a prompt ("animate this logo", "make a loading spinner", "an icon that reacts on hover") into an art-directed, well-composed piece, then hands off to the MCP's…
Skill Claude CodeCodex
Generate interactive HTML mockups from a description, iterate on them, and deploy to GitHub Pages or Vercel for sharing. Use this skill when the user wants to create a mockup, prototype, UI exploration, or design comparison, or when they want to deploy or share one.
Skill Claude CodeCodex
Generate beautiful article diagrams using HTML + Playwright. Five layouts: pipeline (horizontal flow), sequence (actors + messages), grid (2-col cards), stack (numbered hero cards), comparison (before/after). Bold white carousel style with thick black borders, terracotta accents, chunky rounded cards, and LARGE Inter…
Skill Claude Code
Evaluate design from a UX perspective, assessing visual hierarchy, information architecture, emotional resonance, cognitive load, and overall quality with quantitative scoring, persona-based testing, automated anti-pattern detection, and actionable feedback. Use when the user asks to review, critique, evaluate, or…
Skill Codex
Use when Codex users want local continuity across account switches, OAuth changes, API key swaps, or mixed authentication setups. Use this skill to keep /.codex conversations in a shared local pool, create or restore local snapshots, inspect whether shared links are installed, or initialize a private local profile…
Skill Claude CodeCodex
Capture before/after screenshots of UI changes — production vs local dev — and produce a markdown comparison table ready for a GitHub PR. Use when the user wants before/after captures of UI work, a visual comparison of an element or page against production, or a PR-ready screenshot table. Triggers on "before/after"…
Skill Claude CodeCodex
A visual design recipe that changes HTML, React or Vue pages to a neo-brutalist style: warm paper-like backgrounds, grids, thick black edges, square corners and solid offset shadows. React and Vue are tools for building web interfaces.
Skill Claude CodeCodex
Convert a selected shadcncraft Figma frame, component, or full page into production React + shadcn/ui code via the official Figma MCP. Use this whenever the user wants to turn a Figma design into code, implement a frame, "generate code from this design", "convert this Figma component", "build this screen from Figma"…
Skill Claude CodeCodex
Generate beautiful, self-contained HTML blueprint pages that visually plan implementations with architecture diagrams, phased task breakdowns, file change maps, dependency graphs, risk matrices, and verification checklists. Use this skill whenever the user asks for a blueprint, implementation plan, feature spec…
Skill Claude CodeCodex
Entrevista al usuario para recopilar lineamientos de diseño (colores, tipografías, logos) y al finalizar diseña, crea y guarda automáticamente una nueva skill de guía de estilo (brand book) personalizada. Usar cuando el usuario pida: crear brand book, definir guía de estilo, configurar colores de marca, crear…
Skill Claude CodeCodex
Analyzes websites provided by the user to extract and synthesize abstract visual design guidelines. Measures spacing, typography, color, alignment, grouping, shadows, borders, and layout patterns from real sites. Produces a reusable design rules document for AI agents to follow when building UIs. Use when the user…
At most 3 mods per repository are shown here, and a mod shipped inside a plugin is left to that plugin's page — the rest are on their repository pages: