13,366 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
humbleteam/audit-design-tokens
Skill Claude CodeCodex
Scans a codebase for design token drift - raw hex colors, off-scale spacing, near-duplicate colors, font sprawl, hardcoded z-index. Use when asked to "audit my design tokens", "find hardcoded colors in this codebase", "check for design token drift", or "clean up our CSS variables". Returns a severity-ranked report…
Skill Claude CodeCodex
Builds a pixel-faithful single-file HTML mockup from a reference screenshot by counting colors, photos, items, and states before writing markup. Use when a user says "turn this screenshot into HTML", "build a mockup that matches this design", "code this screen exactly", or pastes an image and asks for a coded version.…
Skill Codex
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states.…
irSodeh/AI-Interaction-Pattern-Advisor
Skill Claude CodeCodex
Advises WHICH AI interaction pattern fits a product, service, or workflow — at what level of automation, with what trust mechanics and what organizational change. Acts as a senior Service Designer and AI Transformation specialist. Use whenever the user is deciding how AI should show up in an experience, or is…
Skill Claude CodeCodex
A code review for making websites and mobile apps easier for older people to use, based on Chinese government accessibility guidelines.
salawi45/skill-wcag-accessibility
Skill Claude CodeCodex
Apply and audit WCAG 2.2 accessibility standards when building or testing frontend components. ALWAYS use this skill when: building any UI component, page, or layout (even if the user doesn't mention accessibility); running accessibility audits or tests; asked to "check a11y", "test accessibility", "audit WCAG…
Skill Claude Code
Build or edit Figma designs and components using the ( ) design system. Load alongside figma-use whenever a task targets / / products — reusing the published Variables, UI Kit, and Icons libraries (semantic tokens, text styles, effect/elevation styles, components) instead of hardcoding colors, spacing, type, or…
Skill Claude CodeCodex
An intelligent component management assistant that automatically determines whether to create new components, reuse existing ones, or ask users for decisions based on their instructions. Ensures component consistency and compliance based on design system specifications. |…
Ingramradical235/anty-framework
Skill Claude CodeCodex
Nudge-based choice architecture for 3-option selection UI — smart default vs active choice, outcome mapping, channel factors, RECAP, operational transparency with source attribution, post-decision reinforcement, error-forgiving undo, peak-end session design, user contribution acknowledgment. Use when presenting…
capsrock/reid-miles-design-skill
Skill Claude CodeCodex
A Claude Skill for reproducing Reid Miles' (1927-1993) Blue Note Records typography-led design style in layouts that cannot use large photography (app UI, splash screens, cards, banners, slides). No large portrait photography is used; instead, typographic contrast, flat color blocks, asymmetric composition, and…
Skill Claude CodeCodex
Turn a codebase into interactive architecture diagram as a single HTML file: four levels of drill-down, hover a port to see what the interface actually carries, hover an inventory row to see the real source snippet, and play back representative end-to-end scenarios. File/class/function inventories are extracted from…
Skill Claude Code
Use when the user wants to design, redesign, build, critique, audit, polish, theme, animate, adapt, or otherwise improve a Flutter app's UI or UX. Covers full apps, screens, widgets, components, forms, onboarding, empty states, navigation, dashboards, and settings. Handles Material 3 theming, Cupertino/iOS adaptation…
Skill Claude Code
Create distinctive, production-grade web interfaces with high design quality using Tailwind CSS. Use for building UI components, pages, dashboards, apps, and web applications. Generates crafted, polished code that avoids generic AI aesthetics.
Skill Codex needs its repo
Create, customize, validate, locally install, and test theme packs for Codex Desktop from generated background artwork, a landscape image, brand palette, or style brief. Use when a user asks to make a Codex theme, generate or convert artwork into a Codex background/theme pack, prepare free or branded theme assets…
Skill Claude Code
Generate and deploy a complete brand asset pack for a Next.js App Router project. Scans the project, prints what to generate with exact specs, then imports and wires everything correctly.
josephbartlett/windows-appshot-codex
Skill Codex
Use when the user invokes $windows-appshot or asks to create a Windows appshot bundle, including foreground-window screenshots, UI Automation text, metadata.json, prompt.md, or appshots generated by scripts/New-Appshot.ps1.
Skill Claude CodeCodex needs its repo
Extract design information from Figma files. Pull design tokens, component structure, colors, typography, spacing, and export assets. Use when the user asks about their Figma designs, needs to extract design tokens, or wants to convert Figma designs to code. Triggers on: "figma", "design tokens", "get colors from…
rancy777/warm-humanist-editorial-art
Skill Claude Code
Design or generate original warm humanist editorial illustrations built from sparse hand-drawn near-black gestures, warm off-white abstract systems, and one flat muted background; or semantically redraw a user-uploaded image into the same visual language. Text-only generation retains the v2.1.0 workflow unchanged.…
XINGANLIU/design-system-generator-skill
Skill Claude Code
Generate a complete, production-ready design system from a single brand color. Outputs OKLCH color palettes, W3C Design Tokens (JSON), CSS custom properties, component styles (Button, Card, Input, Badge, Alert, Modal, etc.), and a live preview HTML page with Light/Dark theme toggle. Trigger this skill when the user…
Skill Claude CodeCodex
Plans, designs, builds, validates, and prepares polished responsive websites and lightweight web apps from brief through hosting handoff. Use when creating or redesigning a landing page, portfolio, editorial site, knowledge hub, directory, dashboard, portal, tracker, internal tool, microsite, or small web app…
Skill Claude CodeCodex
Aggregate aestheticfindings, automatedfindings, and alignmentmeasurements into a single 1.0-10.0 beautyscore plus 7 weighted sub-scores and a 0.0-1.0 consistencyScore. Pure calculation step — never fails. Use during ui-specialist Phase 7 (Aggregation) AFTER all other ui- skills have completed and BEFORE writing the…
lubluniky/awesome-agent-blueprints
Skill Claude Code
UI/UX expert for design systems, accessibility, and avoiding generic AI-generated design patterns.
ada33-arch/awesome-claude-skills
Skill Claude CodeCodex
Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.
Skill Claude CodeCodex
Curated collection of DESIGN.md files from real websites. Each DESIGN.md contains complete design system specifications including color palette, typography, component styles, spacing, and visual guidelines that AI agents can use to generate pixel-perfect UI matching the source website's design. Use when: user wants to…
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: