13,171 tagged Design and UX, measured the same way as everything else here.
Browse within: design-system 183agentic-ai 158agentic 152ai-tools 131skills 128ai-design 112byok 106agent 101desktop-app 93coding-agents 92ai-ppt 88ai-ppt-generator 87aippt 87html-ppt 87
Skill Claude CodeCodex
A design skill for creating macOS interface prototypes and visual designs for Starcat, a GitHub star-management and AI knowledge-organising app. It follows Apple’s Liquid Glass design language for macOS 26.
Skill Claude CodeCodex
Design Apple-style iOS/macOS interfaces following Human Interface Guidelines. Creates HIG-compliant components with SF Symbols, San Francisco typography, and proper accessibility. Supports optional modern effects. Use when designing Apple-style UI, iOS/macOS interfaces, HIG-compliant components, or implementing design…
BV-Venky/excalidraw-architect-mcp
Skill Claude CodeCodex
Choose and compose the right Excalidraw diagram - architecture, flowchart, sequence, state, ER, swimlane, process, timeline, quadrant, pyramid, venn, loop, gantt, bar, line, scatter, and more - using the excalidraw-architect-mcp server. Use whenever a reader would learn more from a picture than from prose, or when…
Skill Codex
Generate new raster assets that must contain native pixel transparency, then verify the untouched PNG or WebP before delivery. Use for transparent stickers, sprites, character cutouts, product assets, and furry or fine-edged subjects where background removal would be unacceptable. Do not use to remove a background…
Skill Claude CodeCodex
A collection of 118 single-page HTML design references, including a Chinese Traditional Colors swatch page and 96 examples of marketing websites.
Skill Claude Code
A design-production guide for creating high-fidelity visual work in HTML, including prototypes, slide decks, animations, mobile mockups, and visualisations.
Skill Claude CodeCodex
Create presentation slides using Material You (Material Design 3) style. Generates 1280x720 HTML slides with M3 color tokens, Roboto typography, rounded cards, flow diagrams, metric cards, code blocks, and structured layouts. Use when the user asks to create slides, presentations, or decks and wants a clean, modern…
cmb211087/azure-diagrams-skill
Skill Claude CodeCodex
Comprehensive technical diagramming toolkit for solutions architects, presales, and developers. Creates Azure architecture diagrams (800+ Azure service icons), business process flows (swimlanes, workflows), ERD diagrams (database schemas), project timelines, UI wireframes, and network topology diagrams. Perfect for…
Skill Claude Code
Turn rich agent answers and any file, folder, URL, or export into a polished single-file HTML page. Auto-picks a default route plus 17 concrete design systems (teaching, dashboard, atlas, timeline-story, document, …).
Skill Claude CodeCodex
Produce a self-contained HTML artifact instead of a markdown document when the request is for content that benefits from spatial layout, color, real diagrams, interactivity, or a round-trip editor. Use this skill aggressively whenever the user asks for a "doc," "writeup," "plan," "spec," "report," "explainer,"…
Skill Claude CodeCodex
Write to (or read) the user's BonsAI board — the spatial idea canvas in the BonsAI macOS app. Use when the user asks to put / drop / add / send something to their BonsAI board, capture an idea or note on the board, sketch a diagram or architecture onto the canvas, evolve an idea already on the board, or read what's…
Skill Claude CodeCodex
Anti-slop frontend skill for landing pages, portfolios, and redesigns. The agent reads the brief, infers the right design direction, and ships interfaces that do not look templated. Real design systems when applicable, audit-first on redesigns, strict pre-flight check.
Skill Claude CodeCodex
Use when building any web page, HTML artifact, landing page, dashboard, slide deck, report, email, or UI component the user will look at. A taste-first design system that makes generated pages look intentional and crafted instead of generic "AI-made". Provides an aesthetic-direction process, design tokens, a starter…
Skill Claude CodeCodex
Author app-like designs in React/JSX and bundle them in-sandbox into the same single self-contained HTML artifact Design Studio delivers. Use when the design needs real state, complex interactivity, or component reuse beyond what vanilla JS comfortably handles.
Skill Claude CodeCodex
Turn any system architecture into an interactive, pannable/zoomable canvas diagram (dark by default with a light switcher, JetBrains Mono, plane-coloured bands, click-to-isolate focus, PNG export) — the "architecture canvas" style — and optionally publish it to artifact.cafe for review. Use whenever the user asks for…
Skill Claude CodeCodex
Reconstruct a single raster image as a standalone, visually faithful, structurally editable SVG using the DrawAI Simple Baseline protocol.
maquina-app/maquina_components
Skill Claude CodeCodex
Build consistent, accessible UIs in Rails using maquinacomponents. Use this skill when implementing UI for features, creating views, building forms, or reviewing UI specs. Triggers on view creation, UI implementation, form building, layout design, or mentions of maquinacomponents usage.
alima-max/prototype-to-figma-skill
Skill Claude CodeCodex
Converts a working Claude Code prototype into a structured Figma design file — exploding each interaction flow into separate frames, using the target file's design system components, and annotating interaction details natively in Figma. Use this skill whenever the user asks to turn a prototype into Figma frames…
Skill Claude CodeCodex
Apply a Swiss International Style design system using Tailwind CSS. Use when asked to style a webpage, clean up a UI, apply a design system, make something look great, or when the user references Swiss design, grotesque fonts, Helvetica, grid systems, modernist typography, or 1960s/1950s design aesthetics. Implements…
Skill Claude Code
Audit a design portfolio website against what top design leaders actually look for when hiring. Use with /portfolio-audit .
Skill Claude Code
Use this skill to generate well-branded interfaces and assets for beava (beava.dev, an open-source single-binary feature server for stream processing), either for production or throwaway prototypes/mocks/etc. Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping.
Skill Claude CodeCodex
A guide for creating standalone HTML visualisations from question data, using a project's design files and rendering scripts. It also defines how to preserve answers when the visualisation is updated.
Skill Claude CodeCodex ✓ vendor
Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for…
Skill Claude CodeCodex
Create Framer Code Components and Code Overrides. Use when building custom React components for Framer, writing Code Overrides (HOCs) to modify canvas elements, implementing property controls, working with Framer Motion animations, handling WebGL/shaders in Framer, or debugging Framer-specific issues like hydration…
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: