120 tagged design-tokens, measured the same way as everything else here.
Browse within: design-system 198design-systems 104figma 99accessibility 67cli 63claude-code-plugin 61design-md 52nextjs 46google-stitch 45dark-mode 41contrast-checker 38cursor 33ai-tools 24dtcg 23
Skill Claude CodeCodex
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides…
Skill Claude CodeCodex
A skill that applies a project's DESIGN.md file as visual and brand guidance for interface work. It covers components, colors, fonts, layout, copy, motion, and visual assets.
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
Extract the design of a screenshot, website URL or Figma file into a design.md with tokens, components, layout and brand rules, or copy one element (navbar, card, illustration) into an element.md with a rebuild or image-generation prompt. Use when the user wants to document, replicate, audit or reverse-engineer a…
Skill Claude CodeCodex
Be a design director, grounded in OpenDesign (opendesign.cc) — a curated library of 1,400+ real, machine-readable design systems, each with an 11-layer token spec extracted from the live site and verified against actual computed styles. Use whenever someone wants to design or build a website, landing page, dashboard…
jpoindexter/design-md-extractor
Skill Claude CodeCodex
Extract and document the visual style of public websites as reusable DESIGN.md files. Use when the user asks to analyze a website's design system, extract styles, create design tokens, produce DESIGN.md, generate an agent-readable style guide, or build from a website's visual language.
Skill Claude Code
Apply a Korean brand's published DESIGN.md from the ko-design-md catalog (getdesign.kr) — colors, typography, spacing, radius, components, do's & don'ts — to the UI you are building in the CURRENT project. Use this skill whenever the user wants UI built or restyled in the style of a catalogued Korean service — "토스…
Skill Claude CodeCodex
The guided walkthrough for a codebase that has just installed montology (or has never written its vocabulary down) — phased questions served to the people who own the code as a clean one-question-at-a-time form in their browser (a local HTML file, no hosted service), answers returned to the agent on disk, each round…
Skill Claude CodeCodex
Use when a task spans interface understanding, design-system memory, UI audits, design CI, Figma, shadcn or Tailwind code generation, research, or agent design workflows and needs the correct Memi capability selected.
Skill Claude CodeCodex
Reference library of 74 real-world brand design systems (Claude, Linear, Stripe, Vercel, Figma, Apple, Tesla, Spotify, Notion, Supabase, and more) captured as DESIGN.md files — colors, typography, components, layout, elevation. Use when the user wants UI, a landing page, or a component that matches a specific brand's…
Skill Claude CodeCodex
Turn a screen recording (.mp4 / .mov / .m4v) into a production-ready DESIGN.md — 10 sections, exact hex codes, exact font weights, exact spacing, every screen folded in. Produces the Spectr gallery spec format. Use when the user has dropped a screen recording in chat and wants to clone or document the app.
Skill Claude CodeCodex
Build web UI that is accessible through the platform instead of patched with ARIA and JavaScript. Use when writing or reviewing HTML and CSS for any web interface - choosing between a native element and a hand-built component, styling focus, honouring user preferences such as reduced motion or forced colors, meeting…
Skill Claude CodeCodex
../../plugins/muriel/skills/compose/SKILL.md.
Skill Claude CodeCodex
Generate publication-quality DESIGN.md v2 files from any website URL. Analyzes CSS, typography, colors, components, layout, content, accessibility, state patterns, and iconography to produce a 17-section design system reference that AI agents can use to reproduce the website's visual style. Use when the user wants to…
Skill Claude CodeCodex
Use when building, editing, or iterating on a Figma design via the Mimic AI MCP server (mimicstatus, mimicdiscoverds, figmacreateframe, figmainsertcomponent, mimicbuildtable, mimicbuildchart, etc. are available), or when the user asks to turn HTML, a prompt, or a Claude Design/Figma Make prototype into real Figma…
Skill Claude CodeCodex
Design and visual workflow guidance for tasks involving graphics, images, typography, layout, frontend UI, rendering, animation, reference studies, design reviews, motion websites, product films, and edits. Use this skill to choose the relevant method or tool while preserving the user's project workflow and acceptance…
Skill Claude CodeCodex
Generate, parse, and compile a unified DESIGN.md (33 categories, 519 tokens) that compiles to CSS, Tailwind v4, and W3C JSON. Use when creating a new design reference, extracting tokens from an existing site (sigil design extract), switching a project's visual identity, generating compiled token output, or auditing a…
SAP/ui-theme-designer-plugins-for-coding-agents
Skill Claude Code ✓ vendor
Provides customer-facing UI theme designer help from help.sap.com (BTP / Cloud Foundry edition). Use whenever you need to check what is — or is not — documented for customers about UI theme designer: setup, user/role management, themes and theme sets (creating, editing, publishing, transporting, fallback)…
Skill Claude CodeCodex
Refactor an existing SwiftUI project into a governed UI architecture with render-state boundaries, tokenized styling, preview mocks, and a debug-only runtime tuning + writeback tool. Use when the user wants to improve UI maintainability, live-tune styles, or build a reusable UI debugging workflow without changing the…
chohra-med/claude_design_skill
Skill Claude CodeCodex
Take a UI from a one-line idea to on-brand, shippable design with Claude, in the correct order — brand foundation first, then components, screens, interactions, accessibility, and only then generation via /design. Use whenever someone wants to design, redesign, or generate a screen, page, component, or onboarding flow…
Tricholomaaurantiumknottiness355/design-dna
Skill Claude CodeCodex
Extract, define, and apply design DNA across three dimensions: design system (tokens), design style (qualitative feel), and visual effects (Canvas, WebGL, 3D, particles, shaders, scroll effects, etc.). Use this skill when: (1) a user wants to see the full 3-dimension design structure/schema, (2) a user provides…
Skill Claude Code
Generate optimal Claude Code configuration for any project. Creates CLAUDE.md, settings.json, skills, hooks, agents, and commands tailored to your stack. Run /forge to start.
Skill Cursor
A design skill for planning how websites, dashboards, mobile screens, and agent interfaces look and move, including cinematic pages with layered motion.
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…
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: