385 tagged design systems, measured the same way as everything else here.
Browse within: figma 125design-tokens 110design-engineering 101product-design 61ai-design 46coding-agents 46byok 44accessibility 43npm-package 42design-system 40design 36hackathon 29commercial-slide-agent 23decision-deck 23
Skill Claude CodeCodex
One-click contribution flow for OpenDesign (nexu-io/open-design) — even for non-coders. Pick one of four cards (ship a Skill or Design System you made with OD; translate docs; fix a typo / write a blog; report a bug), the agent validates and opens a PR (or issue) for you. Trigger words contribute to open design, ship…
Skill Claude CodeCodex
Structured medical case presentation for clinical rounds, conferences, and documentation. Generates SOAP-format or narrative case reports with physiologically accurate vitals, labs, and evidence-based plans. Use when the brief mentions "case report", "case presentation", "SOAP note", "clinical case", "ward rounds"…
Skill Claude CodeCodex
Curated text animation catalog with exact JSON specs for headings, labels, counters, and text swaps. Use when an agent needs to pick or translate named effects like soft blur in, typewriter, shared axis, line reveal, stagger, crossfade, or kinetic builds into WAAPI, Motion, Framer Motion, GSAP, CSS, Lottie, Rive, or…
Skill Claude CodeCodex
Build, improve, and review production interfaces with the Better Design MCP. Use for frontend design, UI, UX, interactions, flows, forms, navigation, components, styling, design systems, accessibility, responsive layouts, motion, React Native, Expo, Shopify, Three.js, and product video work, especially when creating…
murphytrueman/design-system-ops
Skill Claude CodeCodex
Generate AI-optimised text descriptions for components, formatted for Figma's MCP server and LLM consumption. This produces prose descriptions in a six-section format (purpose, props, anti-patterns, composition, accessibility, examples), NOT JSON schemas or structured data files. Trigger when someone says: write…
murphytrueman/design-system-ops
Skill Claude CodeCodex
Write a one-page stakeholder brief translating design system health or status into business language. Trigger when someone says: stakeholder update, exec brief, leadership summary, status report for leadership, system status for non-designers, write a brief for the business, or anything about communicating design…
murphytrueman/design-system-ops
Skill Claude CodeCodex
Write a design system investment pitch with a business case and ROI framing. Trigger when someone says: pitch the design system, make the case for the system, sell this to leadership, justify the investment, business case for design systems, why should we invest in a design system, or anything about building an…
HermeticOrmus/LibreUIUX-Claude-Code
Skill Claude CodeCodex
Patterns for delegating UI work to specialized agents. Covers synthesis-master vs specialized agents, multi-agent UI generation workflows, and orchestration strategies for complex UI tasks.
HermeticOrmus/LibreUIUX-Claude-Code
Skill Claude CodeCodex
The 22 Major Arcana cards of the Tarot represent archetypal life stages and cosmic forces. Each card carries distinct energetic signatures that translate into color palettes, lighting moods, and visual atmospheres for UI/UX design.
HermeticOrmus/LibreUIUX-Claude-Code
Skill Claude CodeCodex
Design microservices architectures with service boundaries, event-driven communication, and resilience patterns. Use when building distributed systems, decomposing monoliths, or implementing microservices.
southleft/figma-console-mcp-skills
Skill Claude CodeCodex
Find which Figma version introduced a specific change — a component property or a child node — via a binary search over version history (log2(N) API calls instead of N). Answers 'who added this and when'. Use when the user wants git-blame-style attribution for a Figma design — triggers: 'when was this component…
southleft/figma-console-mcp-skills
Skill Claude CodeCodex
Extract a design system from vibe-coded production apps that never had one: inventory components, mine de-facto styling into DTCG tokens, scaffold a Storybook package, port components, and optionally round-trip tokens/components into Figma. Use when the user wants to 'extract a design system', 'create a design system…
southleft/figma-console-mcp-skills
Skill Claude CodeCodex
List a Figma file's version history, snapshot the file at any past version, and diff two versions (added/removed/renamed pages plus deep per-component changes). Use when the user wants to inspect Figma history — triggers: 'list Figma versions', 'what versions does this file have', 'show version history', 'snapshot…
Skill Claude CodeCodex
Verify GSP pipeline integrity — agent/skill contracts, installer correctness, runtime compatibility, version sync, and template coherence. Internal development tool for GSP maintainers.
Skill Claude CodeCodex
Build design system tokens and STYLE.md (technical phase — benefits from capable models) — use when: create the design system, generate tokens, finalize brand guidelines, build the component system.
Skill Claude CodeCodex
Translate designs to code (technical phase — benefits from capable models) — use when: build this, implement, code this up, build me a X, add a X to the app, make the X page.
Skill Claude CodeCodex
Use when a mobile or web product journey feels confusing, incomplete, inconsistent, or subject to taste-based redesign debate, or when a team needs evidence-backed directions and complete material states before implementation.
Skill Claude CodeCodex
Generate emotional Before/After transformation grids for products, lectures, and offers. Chainable from humane:jtbd output. Uses empathy mapping, first-person voice, somatic markers, and valence scoring to produce grids ready for landing pages, slides, and messaging. This skill should be used when the user wants to…
Skill Claude CodeCodex
Sets up, validates, resolves, and exports design tokens per the DTCG (Design Tokens Community Group) Format Module 2025.10 standard, and owns all colour contrast measurement and remediation — every text/background pair on both APCA Lc and the WCAG ratio via tokens contrast, with a fix that moves OKLCH lightness only.…
Skill Claude CodeCodex
Terminal-first JTBD engine for founders and product people. Interview fast, kill jargon, capture real switching forces (Push/Pull/Habit/Anxiety), score opportunities, and export structured artifacts (JSON + one-pager + messaging angles + GTM brief). Use when the user says "help me figure out what to build", "analyze…
Skill Claude CodeCodex
Analyze a Figma COMPONENTSET as a state machine for code generation — extract variant axes (state/size/etc.), map state variants to CSS pseudo-classes (hover→:hover, focus→:focus-visible, disabled→:disabled, error→[aria-invalid]), and compute per-variant visual diffs (only what changes per state). Use when generating…
Skill Claude CodeCodex
Extract a single Figma component (or any node) as a full recursive tree to N levels deep — every child's layout, fills/strokes/effects, typography, resolved bound variables (token names + code syntax), INSTANCE mainComponent references, prototype reactions, and annotations. Use when you need maximum-fidelity data to…
Skill Claude CodeCodex
Bootstrap a complete design-token system in Figma in one atomic step — create a variable collection, its modes (e.g. Light/Dark), and every variable with per-mode values together. Use when starting a token system from scratch: triggers 'set up design tokens in Figma', 'create a token collection with light and dark…
HermeticOrmus/design-mastery-claude-code
Skill Claude CodeCodex
Building comprehensive brand identity systems from strategy to implementation. Covers logo design, color palettes, typography pairing, voice guidelines, and system documentation. Use when creating new brands, rebranding, or systematizing existing identities.