297 tagged design-tokens, measured the same way as everything else here.
Browse within: design-system 390codex-cli 182frontend-development 182design-systems 110figma 102accessibility 66claude-code-plugin 66design-md 42nextjs 42google-stitch 41dark-mode 40contrast-checker 38ai-coding 24shadcn-ui 24
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 design-context rule set for applying a project's visual guidelines to interface work. It uses a DESIGN.md file, or a central design authority when available, to guide components, colors, fonts, layout, copy, motion, and 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
Analyze images, websites, and Figma files to extract their design and generate a design.md with token system, component inventory, and reconstruction notes. Use this skill whenever the user wants to understand, document, replicate, or audit the design of something visual: a screenshot, a URL, a Figma link, a Pinterest…
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 CodeCodex
Crawl an entire documentation or design-system website into one LLM-ready Markdown corpus. Discovers every page from the site's sitemap.xml (with a same-origin link-following fallback when there is no sitemap), extracts each page's main content as clean Markdown, downloads each page's images (and inline base64 images)…
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
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
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
../../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
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…
Skill Claude CodeCodex
OpenSpec-style design development pipeline for visual direction, UX research, website cloning and reverse-engineering, interaction polish, frontend implementation, and evidence-backed QA. Use for product UI, marketing pages, dashboards, live-page references, pixel-accurate rebuilds, design reviews, and frontend work…
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…
Skill Claude CodeCodex
Use the Design Lazyyy Figma MCP server (this repo) to read and write Figma files via Claude — design-system analysis, token/variable CRUD, node manipulation, accessibility audits, and asset export. Trigger when working with Figma through this MCP's figma tools, when figmaexecute throws "expecting ;", when write tools…
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…
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…
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 CodeCodex
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 Claude CodeCodex
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…
SAP/ui-theme-designer-plugins-for-coding-agents
Skill Claude CodeCodex ✓ 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
Strict issue-to-PR lifecycle for GitHub issues in the Plumb Rust workspace. Investigates, plans, implements (TDD), verifies, reviews, creates PR, waits for CI, and cleans up. Supports worktree isolation and durable run state for session resumption.
truman-t3/tinted-ui-tokens-skills
Skill Claude CodeCodex
A design-token generator that turns one brand colour into coordinated colours for interface backgrounds, borders, text, shadows, semantic states, gradients, icons, and dark mode. Design tokens are named colour values reused across a product's interface.
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: