13,357 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 this skill to generate well-branded interfaces and assets for Bobi, Moda Labs' open-source framework for agent teams — either for production or throwaway prototypes/mocks. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
sudharsank/spfx-enterprise-skills
Skill Claude CodeCodex
Core design guidance for SPFx web parts and extensions. Use for layout, hierarchy, commanding, text, empty states, and responsive behavior when building or reviewing SPFx UX.
Skill Claude CodeCodex
Opinionated app components building on top of ./ui primitives.
Skill Claude Code
Frontend design partner. Kills AI-slop by teaching 10 tells with positive direction. Five commands: detect, audit, deslop, shape, craft. Model-invoked: flag tells, run detect. User-invoked: grill first.
howardz27/poster-generator-skill
Skill Claude CodeCodex
Generates professional designer-grade posters, flyers, campaign visuals, event posters, and product posters. Use when the user asks for 海报, poster, flyer, campaign visual, event poster, product poster, promotional visual, or high-end marketing key visual.
Skill Claude CodeCodex
Product animation, UI motion, portfolio videos — Apple-grade reveals, motion tokens, full production pipelines.
Skill Claude Code
Build or update a reusable UI component in src/components/ — primitives, composites, landmarks, content components. Trigger whenever the user wants to create or modify any .astro file under src/components/, add a variant or state to an existing component, do a visual refactor (spacing, hover lift, type), or build a…
Skill Claude CodeCodex
Comprehensive toolkit for creating consistent, cognitively-optimized Mermaid diagrams following the Mermaid Diagram Guidelines (MDG) v1.0 standard. Use for creating flowcharts, system architectures, process flows, sequence diagrams, ERDs, state diagrams, Gantt charts, mindmaps, class diagrams, and conceptual maps.…
Skill Claude CodeCodex
Create polished, validated architecture, workflow, sequence, data-flow, and lifecycle/state diagrams as explorable standalone HTML with inline SVG, dark/light themes, semantic navigation, optional trace motion, an optional 1200×630 Share Card PNG, and PNG/JPEG/WebP/SVG/WebM export. Accept plain-language requirements…
jinshiqwq/image-first-frontend
Skill Claude CodeCodex
Generate a polished frontend reference screenshot through a configurable GPT-image-2-compatible generations endpoint, save and show versioned previews inside the project, revise selected previews through a configurable /images/edits endpoint, and reproduce only the user-approved design as functional frontend code with…
Daaaaave/agentic-workspace-core
Skill Claude CodeCodex
Use for frontend/UI build, change, redesign, polish, review, or Figma/screenshot implementation when visual quality, product-appropriate design taste, UX, responsive behavior, accessibility, component composition, or design-system consistency matters. Pair with software-development-workflow for code changes. Do not…
BESSER-PEARL/uml-drawing-skill
Skill Claude CodeCodex
Put a correct UML class diagram — as an embeddable image — into your docs. Use this skill whenever the user wants to add, draw, embed, or export a UML class diagram for a README, design doc, wiki, slide, or .md spec: it builds a structurally-correct model (classes, attributes, associations, inheritance…
mhrsdev/AI-Agent-Skills-Library
Skill Claude CodeCodex
Audit designs against 19 rules across Figma files and code (HTML/CSS/React/Vue/Tailwind). Auto-detects framework and design system (MUI, Chakra, shadcn/ui, Ant Design, Radix, Bootstrap). Runs code superpowers across all 19 categories: aria, focus, contrast, tokens, responsive, motion, forms, navigation, spacing…
Skill Codex
Use when converting approved design sources, handoff packages, mockups, visual contracts, or UI blueprints into implementation code and visual parity evidence; also when visual implementation feels rough, stretched, under-specified, or needs section-level high-fidelity repair.
Skill Codex
Reconstruct an authorized reference website from a supplied URL with high visual, responsive, interaction, asset, and observable behavior fidelity. Use only when the user explicitly invokes $fetch or $codex-chef-workflows:fetch for site reconstruction; do not use for JavaScript Fetch API help, generic scraping or…
Skill Claude CodeCodex
Reconstruct a geometric PNG (logo, icon, monogram) as a clean native SVG with exact geometry and gradients, using an analyse -> measure -> model -> check -> residuals iteration loop scored by perceptual metrics. Use when asked to vectorise, trace or convert a PNG/WebP logo to SVG, recreate a logo's geometry, rebuild a…
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.…
Skill Claude CodeCodex
A Figma design parser, where Figma is a tool for creating interface designs. It reads a design and lists its interface structure, visual styles, and required image files.
karlng279/ai-ready-product-workflow-v2
Skill Claude CodeCodex
Produces COMP-XXX component specifications from wireframes. Enforces COMP-XXX/COMP-XXX-EL-YYY ID format, ShadCN component mapping with variants and states, Tanstack Table full configuration, accessibility requirements, and AC traceability. Triggers on: component spec, COMP-XXX, ShadCN component, design to code…
Skill Codex
Direct, design, implement, animate, critique, audit, polish, and deploy distinctive production frontend interfaces for websites, landing pages, web apps, dashboards, mobile concepts, and desktop shells. Use for new frontend builds, redesigns, bland or visually generic UI, messy interfaces, design systems, Vue Bits or…
Skill Claude CodeCodex
A skill for turning video or presentation scripts into clear Excalidraw whiteboard diagrams. Excalidraw is a drawing tool for hand-drawn-style diagrams.
Skill Codex needs its repo
Transform existing or new websites, web apps, landing pages, dashboards, and UI prototypes into a refined modern Chinese ink-wash / guse-guoxiang visual style. Use when Codex is asked to make a site water-ink, sumi-e, Chinese classical, oriental, guofeng, ancient elegant, xuan paper, ink brush, or to apply the bundled…
Skill Claude CodeCodex
A guide for building React interfaces with the React Bits component framework. React is a JavaScript library for making web interfaces, and components are reusable pieces of a page.
AmroJSawan/figma-design-system-skill
Skill Claude Code
Use this skill for ANY Figma design work executed via the Figma MCP Console plugin — including creating new design systems AND auditing, evaluating, and modernizing existing ones. Triggers: "create design tokens", "build a component", "set up a design system", "add variables to Figma", "build token foundation"…
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: