13,357 tagged Design and UX, measured the same way as everything else here.
Browse within: design-system 166agentic-ai 157agentic 152ai-tools 131skills 128ai-design 112byok 106agent 102desktop-app 93coding-agents 91ai-ppt 88ai-ppt-generator 87aippt 87html-ppt 87
Shanmus4/figma-variables-tokens-generator
Skill Claude CodeCodex
Generate a fully connected design token system instantly from a chat prompt. Supports everything from a simple 1-tier flat architecture, to 2/3-tier systems (Primitives, Semantic with light/dark modes, Component Colors), all the way up to an enterprise 4-tier setup (Primitives, Theme, Semantic, Component Colors +…
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.
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…
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.
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…
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…
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…
Dometrain/getting-started-claude-code
Skill Claude Code
Apply Dometrain's brand colors, typography, and styling to UI, CSS, components, slides, diagrams, or any visual asset. Use whenever asked to "make it look like Dometrain", "apply our/Dometrain branding", "use the brand colors", style a page/component on-brand, or build a Dometrain-styled visual.
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…
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…
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) …
caoxg/claude-skill-aesthetic-foundations
Skill Claude CodeCodex
Inject aesthetic principles from painting, photography, graphic design, and Eastern visual tradition into any visual/design decision. Use when reviewing UI/UX, making typography/color/layout/spacing choices, evaluating a screenshot, or when user asks "does this look good" / "how to improve this design" / "审美". Loads…
Skill Claude CodeCodex
Use when designing, reviewing, or implementing a command-palette / ⌘K layer for an Apple-platform app — keyboard-first global search, ranked and grouped results, native floating panel, and protected destructive commands.
Skill Claude CodeCodex
Quick UI/UX deficiency scan of any page. Checks touch targets, contrast, font consistency, spacing issues, empty states, loading indicators, and common UX anti-patterns. Uses Playwright MCP only — no signup.
Skill Claude CodeCodex
Use when designing, critiquing, or implementing forms, inputs, validation, checkout, registration, payment, or any data-entry flow.
yamanidev/claude-code-configuration
Skill Claude Code
Workflow for drafting a logo mark for a side project or utility, producing a self-contained HTML gallery of 4–6 concept directions per round — each rendered in SVG at large, medium, and favicon sizes on both light and dark backgrounds. The user opens the gallery in a browser, picks favorites by short letter code, and…
blockbloomer/claude-skill-stitch-design
Skill Claude CodeCodex
Automate high-fidelity UI prototyping with Google Stitch MCP. Use when the user needs to generate, iterate, or refine UI screens via Stitch prompts.
Skill Claude CodeCodex
Design, build, and critique data visualizations using Edward Tufte's principles. Use this skill WHENEVER the work involves a chart, graph, plot, dashboard, table, diagram, or any visual display of data, even if the user does not name Tufte or "data viz" explicitly. Triggers include: (1) Building a new chart, graph…
Skill Claude CodeCodex
Help designers and design engineers write portfolio case studies as markdown files. Use this skill whenever someone wants to write a case study, portfolio piece, project write-up, or craft essay about something they designed or built. Triggers on "case study," "portfolio piece," "write up what I built," "document this…
Core-Mate/Pixel-Perfect-Web-Replica
Skill Claude CodeCodex
Recreate public frontend pages locally with high visual fidelity. Use when the user asks Codex or Claude Code to pixel-perfect clone, mirror, study, sandbox, reproduce, or locally run a public website/page; capture its static assets; preserve layout, scroll animations, media, typography, and interactions; compare…
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: