13,265 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
Skill Claude CodeCodex
Creates interactive, animated web presentations viewable in any browser — not PowerPoint files. Use this skill when the user wants a web-based or browser-viewable presentation, an interactive slide deck, or something more engaging than a static slide file. Perfect for pitches, proposals, data stories, reports, and…
devPnal/design-system-is-all-you-need
Skill Claude CodeCodex
This skill provides a curated set of cross-platform design guideline prompts for building consistent, high-quality UIs. Each guideline defines common rules, component-specific guides, and an auto-derived token system — all driven by minimal user inputs.
Skill Claude CodeCodex
Use this skill whenever building, reviewing, or auditing any product surface — a mobile app screen, a web app (in-product) screen, a marketing website page, or a cross-screen interaction flow — especially right before calling it done or shipping it. Start here to identify which section (mobile app, web app, website…
Skill Claude CodeCodex
Build crafted, intentional UI for dashboards, admin panels, SaaS apps, tools, settings pages, and data interfaces. Use when building an interactive product — NOT marketing pages, landing pages, or campaigns (redirect those to frontend-design). Triggers on: dashboard, admin panel, app UI, settings page, data table…
Skill Claude CodeCodex
Apply design engineer judgment, the role that owns the shipped result rather than a handoff: decide the intent before the pixels, name the defaults you are rejecting, build hierarchy from space and weight before size, treat copy and accessibility as part of the interface, ask whether something should animate before…
Skill Claude CodeCodex
Operate Argos visual testing from the terminal with the argos CLI — inspect builds and snapshot diffs, submit reviews, request reviewers, post comments, inspect a test's flakiness and its recurring changes, ignore flaky test changes, configure a project and its contributors, manage a team's members, invites and email…
Skill Claude CodeCodex
Run a heuristic UX audit of a customer journey from screenshots. Use when the user asks for a UX audit, heuristic evaluation, usability review, design teardown, or expert review of screens, mockups, or a flow, whether your own product or a competitor's. Evaluates against named frameworks (Nielsen, Shneiderman…
s1gmamale1/apple-design-skills
Skill Claude CodeCodex
Use when building an apple.com-style marketing/product page — the landing-page formula (sticky translucent nav, product-as-hero, full-bleed feature sections, bento grids, fat footer), scroll-driven storytelling, plus the interaction inventory that makes a flagship page feel ALIVE (continuous damped scroll-progress…
Skill Claude Code
Create distinctive, production-grade frontend interfaces with high design quality. Generates creative, polished code that avoids generic AI aesthetics. Use when the user asks to build web components, pages, artifacts, posters, or applications, or when any design skill requires project context. Call with 'craft' for…
Skill Claude Code
Mathematical spacing, sizing, weight, line-height, letter-spacing, radius, and padding rules for "productive" SaaS interfaces, across density regimes: Dense (Linear / Doppler / Raycast / Vercel), Comfortable/roomier (Cal.com style), and anything in between. Use this whenever you are building OR refining any such UI …
rastian/interaction-design-skills
Skill Claude CodeCodex
Apply interaction design (IxD) principles and frameworks to product and service design work. Use this skill when designing or evaluating interaction flows, micro-interactions, feedback mechanisms, affordances, mental models, component states, response time, animation and transitions, error recovery, input validation…
Skill Claude CodeCodex
Work with Figma .fig design files and the running OpenPencil editor — inspect structure, query nodes, analyze design tokens, export PNG/SVG/PDF/JSX, and modify designs programmatically. Use when asked to open, inspect, export, analyze, or edit .fig files, or to control the running OpenPencil app.
ferdinandobons/diagram-creator-skill
Skill Claude CodeCodex
Generate beautiful, production-ready architecture diagrams as self-contained HTML files from any input. Use this skill whenever the user wants to create a diagram, schema, flowchart, network diagram, system visualization, timeline, org chart, or any visual representation of concepts — technical or non-technical.…
Skill Codex
Guides the design, layout, styling, and interactivity of kernel.chat editorial spreads and standalone artifact editions. Use this skill when editing or creating pages, React components, CSS files, or single-file HTML artifacts in the kernel.chat project to enforce the POPEYE-inspired bilingual design grammar and the…
Skill Claude CodeCodex
@thedotmack's personal landing page design system. Use this skill whenever building landing pages, marketing sites, product pages, or conversion-focused web experiences. Covers visual hierarchy, UX patterns, marketing copy, messaging strategy, and conversion optimization based on proven preferences and successful…
Skill Claude CodeCodex
Create award-winning, cinematic frontend interfaces that feel ALIVE. Combines 10+ years of creative frontend experience with technical excellence. Specializes in WebGL, custom shaders, premium animations, and distinctive aesthetics that would win on Awwwards. Use when building landing pages, dashboards, platforms, or…
Xialiang98/design-visual-frontend
Skill Claude CodeCodex
Design, build, redesign, or critically review distinctive frontend interfaces with strong composition, domain authenticity, responsive behavior, component coherence, and browser-verified visual quality. Use for websites, landing pages, login and form flows, dashboards, admin tools, product pages, portfolios, visual UI…
OLDyade/animated-sketch-diagram
Skill Claude CodeCodex
A skill for generating animated technical diagrams in a hand-drawn sketch style. It produces a self-contained HTML file with an SVG diagram, animated connections and icons, and an option to export a looping GIF.
Skill Claude CodeCodex
An image-analysis aid that studies an uploaded photo, works out its visual structure, and recreates its main elements as a flat composition without a background. It also derives a colour palette from the image.
cis2042/product-design-harness
Skill Claude CodeCodex
Use when a product direction, feature, workflow, experiment, launch, feedback signal, automation, or scale decision needs judgment before execution or the next iteration.
Skill Codex
Review an implemented product UI or public prose surface for hard visual defects, design-system incoherence, repeated template patterns, and AI-writing tells without treating subjective taste as universal law. Use for pre-ship screenshots, browser review, README/tool-page copy, launch notes, guide prose, or redesigns…
Skill Claude Code needs its repo
Help users add icons to their projects using the Unicon icon library. Unicon provides 19,000+ icons from Lucide, Phosphor, Hugeicons, Heroicons, Tabler, Feather, Remix, and Simple Icons. Use when adding icons to React, Vue, Svelte, or any web project; using the unicon CLI to search, get, or bundle icons; setting up…
Skill Claude CodeCodex
Interactive component wizard with step-by-step guidance and enforced quality gates.
OutlineDriven/odin-codex-plugin
Skill Claude CodeCodex
Set visual and interaction direction for any UI surface (web, React, TUI, CLI, desktop, Qt, design-system tokens) before any UI code. Direction-first: generates 3-4 distinct directions via verbalized sampling, picks one via per-axis single-select, then derives palette, typography, spacing, motion budget. Loads when…
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: