13,360 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
erenisci/claude-design-prompter
Skill Claude CodeCodex
DEPRECATED — use Acta (acta-design) at https://github.com/erenisci/acta. Detect the project's character from its repo (project type, audience, voice) and produce a complete brand foundation — palette, typography, mood, motion, voice, accessibility — with type-specific recommendations the user can accept or override.…
danger-English/agent-zero-to-one-cn
Skill Claude CodeCodex
Polish an existing single-file personal page after the user asks for a clearer, more readable design while preserving its content and no-build setup.
Skill Claude CodeCodex
Build modern, responsive, accessible web interfaces using pure Bootstrap 5. Use when creating layouts, components, forms, or styling with Bootstrap's utility classes and components. Covers grid system, flexbox utilities, spacing, colors, typography, forms, buttons, cards, modals, navbars, dropdowns, alerts, and best…
WCF900905/screenshot-to-design-system
Skill Claude Code
Extracts color tokens and component styles from UI screenshots by reading each control region individually (not full-page layout). Generates a complete design system demo with tokens.css and components.html. Ignores backgrounds and icons. Use when the user uploads a UI screenshot, asks for design tokens, color palette…
Skill Claude CodeCodex
MUST use when implementing UI components or frontend pages in this project. Triggers: designing UI, implement page, develop UI, write component, frontend development, create component, build interface, style page, button, form, modal, toast, card, input, styling, interface, shadcn, ant design, antd, element plus…
MagicKidd/Rokid-agentic-workflow
Skill Claude CodeCodex
The Design-vs-Implementation Audit Copilot. A universal skill for any project, any language, any design document. Before work starts, it reminds engineers what must be delivered; after code lands, it checks what was actually delivered, what drifted, and what silently went beyond the design. Feed it a design doc plus a…
timseriakov/likec4-architecture-skill
Skill Codex needs its repo
Build and maintain software architecture as code with LikeC4 DSL. Use when tasks mention architecture diagrams, C4/context/container/component views, system landscape, dependency/integration maps, or when the user wants architecture generated/evolved from code. Apply for creating new .c4/.likec4 models, updating…
Skill Claude CodeCodex
Create polished interactive flowchart visualizations for complex codebases, workflows, data flows, prompt pipelines, and system/process maps using Cytoscape.js, Chroma.js, and Prism.js. Invoke only when the user explicitly asks for "flowchart" by name or asks to build an interactive flowchart visualization.
smartbrainactivity/visual-diagramming-export
Skill Claude CodeCodex
Utiliza este skill cuando el usuario pida dibujar pizarras, diagramas de arquitectura, bocetos UI o esquemas de cajas libres que requieran geometría manual 2D y un alto grado de personalización posterior. Genera el código fuente JSON de Excalidraw (.excalidraw) para importación directa.
Skill Claude CodeCodex
A tool that creates admin and list-page prototypes from written requirements. It can produce them for supported project frameworks, as standalone HTML, or in a project-specific setup.
lsiyu241-creator/awesome-claude-cookbook
Skill Claude CodeCodex
This skill applies consistent corporate branding and styling to all generated documents including colors, fonts, layouts, and messaging.
gonzaloraknarok88/CLAUDE-HABILIDADES
Skill Claude CodeCodex
Applies Anthropic's official brand colors and typography to artifacts for consistent visual identity and professional design standards.
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…
moesuito/claude-skill-design-md
Skill Claude CodeCodex
Author a DESIGN.md file — a single markdown document that captures a brand's visual identity in tokens + prose so AI agents can build pixel-consistent UI from it. Use when the user has a website, brand guide, style guide, mood board, or existing product and wants to distill it into a DESIGN.md (a la getdesign.md /…
Skill Claude CodeCodex
A tool for turning Markdown, plain text, HTML, presentations, or a reference image into an installable PowerPoint style package. The package includes reusable style files and a preview page.
punkadillo/figma-code-composer
Skill Claude Code
Use when building complex organisms from molecules and atoms like headers, footers, product cards, and sidebars. Organisms are distinct UI sections.
Skill Claude CodeCodex
Route design-related HTML artifact tasks to the right artifact skill, reference, design system generation, or export skill.
Skill Claude CodeCodex
Retrieve, search, export, and implement Phosphor Icons with the phosphor-icons CLI. Use when a user needs icon SVG/PNG assets, icon search help, framework implementation snippets, or consistent iconography choices.
Skill Claude CodeCodex
Use when building UIKit interfaces without storyboards, setting up Auto Layout constraints with anchors, creating reusable UI components, or encountering layout constraint errors and ambiguous layout warnings.
Skill Claude CodeCodex
This skill helps you run and configure the @talhaorak/tldraw-mcp MCP server, which manages local tldraw canvas files (.tldr).
Skill Codex
Create, inspect, refine, and redesign structured FormaSpec projects through the formaspec MCP server. Use for exact triggers such as “Use FormaSpec”, “Design this with FormaSpec”, “Refine this selection with FormaSpec”, and “Redesign this with FormaSpec” whenever a user asks an agent to produce or revise an editable…
Skill Claude Code
Creates and maintains Figma Code Connect template files that map Figma components to code snippets. Use when the user mentions Code Connect, Figma component mapping, design-to-code translation, or asks to create/update .figma.ts or .figma.js files.
Skill Claude CodeCodex
Build, edit, connect, and deploy premium websites with the Sophia Stack — an AI-native full-stack framework. Use when creating or editing a site as a compact Site Model (blocks + style preset + effects + backend connections) instead of hand-writing JSX/CSS. Optimized for minimal token cost, real-time edits, and safe…
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.
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: