826 tagged design-system, measured the same way as everything else here.
Browse within: design-tokens 390claude-code-plugin 194codex-cli 182frontend-development 182accessibility 138ai-tools 126agentic 120figma 104claude-code-skills 90skills 88ai-design 87nextjs 69tailwindcss 57korea 54
natdexterra/work-with-design-systems
Skill Claude CodeCodex
Inspect, build, or extend Figma design systems — and optionally sync them to code. Two modes in one skill: inspect mode (read-only audits with WCAG checks, component scoring, detached instance detection, handoff docs) and build mode (creating components with variable bindings, slot-based composition, structured…
Skill Claude CodeCodex
PencilPlaybook is the UI Skills / Taste-Skill for Pencil.dev + Claude Code — a design playbook that gives Claude real perceptual psychology and senior-level guardrails so it stops producing averaged-out AI slop.
Skill Claude CodeCodex
Context-aware translation that preserves tone, style, and natural word order. Use when translating UI strings, documentation, marketing copy, or any multilingual content. Infers register, domain, and style from the source text and surrounding codebase context.
Skill Claude Code
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
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
Design systems, motion, mood boards, spatial layout, visual assets, Design Context profiles, and a global Inspiration Library from screenshots, website URLs, inspiration images, music, or fuzzy aesthetic intent. Classifies page archetype, explores 3 product-aware directions before locking tokens (unless exact…
Skill Claude Code
Design Copilot with two enforcement layers (Taste Guardian + Blind Spot ESLint plugin, 14 rules). Works standalone with zero dependencies. 7-phase design pipeline. Produces Awwwards-level websites with automated UI hygiene enforcement.
Skill Claude CodeCodex
Use this skill whenever the user wants to use AI agents to work with Penpot design files via the Penpot MCP Server. Triggers include: using Penpot through an AI agent, design files, design systems, design tokens, Penpot MCP, design-to-code, generating UI from design, auditing a design system, creating…
patrickkrebs/theme-factory-addon
Skill Claude CodeCodex
Expansion pack of 100 curated color and font themes for the theme-factory skill, organized into 14 categories spanning seven aesthetic families (Earthy, Feminine, Coastal, Bold, Boho, Vintage, Luxury), Iconic Brands (Facebook, Instagram, Tesla, Nike, McDonald's, Spotify, Google, Netflix, Coca-Cola)…
Skill Claude CodeCodex
Lanhu to Code workflow for Claude Code. Convert Lanhu design URLs into Vue/React frontend code with component reuse, design token mapping, TODO-safe business logic, and optional code review.
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
Complete brand development system with emotive foundation. Triggers on requests for brand identity, logos, visual systems, or design guidelines. Creates distinctive, anti-AI-slop design from strategy through delivery.
Skill Claude CodeCodex
Rules and patterns for building UI with shadcn/ui, Tailwind v4 or StyleX, and Motion against a Vois design token set. Use when building components, pages, or any UI that should conform to the workspace design system. Covers spacing, typography, color tokens, component architecture, animation, accessibility, and modern…
Skill Claude Code
Full-stack design methodology that makes any website look like a $150k agency build. Nine gated phases: positioning, research, design contract, screen spec, build, subtraction, audit, hardening, handoff. Includes illustration system, animation tiers, 12 hero patterns, 16 section layouts, UX writing guide, icon system…
Skill Claude CodeCodex
../../plugins/muriel/skills/compose/SKILL.md.
Skill Claude Code
Teaches Claude how to author variant pages for a Design Graph canvas. Design Graph is a viewer — the real work is generating many good, genuinely-different HTML page variants in parallel, wiring them as nodes+edges, and writing descriptions users will actually read. Use whenever the user asks to "add a variant"…
devPnal/design-system-is-all-you-need
Skill Claude CodeCodex
This skill provides a curated set of cross-platform design guideline prompts for building consistent, high-quality UIs. Each guideline defines common rules, component-specific guides, and an auto-derived token system — all driven by minimal user inputs.
Skill Claude Code
Official Angular v22 coding best practices — signals, standalone, native control flow, zoneless, host bindings, Signal Forms, inject(), and accessibility (WCAG AA / AXE). Use whenever writing, generating, or reviewing Angular/TypeScript code in this repo.
Xialiang98/design-visual-frontend
Skill Claude CodeCodex
Design, build, redesign, or critically review distinctive frontend interfaces with strong composition, domain authenticity, responsive behavior, component coherence, and browser-verified visual quality. Use for websites, landing pages, login and form flows, dashboards, admin tools, product pages, portfolios, visual UI…
s1gmamale1/apple-design-skills
Skill Claude CodeCodex
Use when building an apple.com-style marketing/product page — the landing-page formula (sticky translucent nav, product-as-hero, full-bleed feature sections, bento grids, fat footer), scroll-driven storytelling, plus the interaction inventory that makes a flagship page feel ALIVE (continuous damped scroll-progress…
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
An offline library of 79 UI style families, with prompts in Chinese and English. It covers styles such as glassmorphism, vaporwave, bento grids, and minimalism.
Skill Codex
Build polished, self-contained HTML artifacts. Always use for requests to create, design, improve, or validate a dashboard, report, presentation or slides, narrative document, microsite, portal, console, operational tool, webpage, quick side artifact, or any standalone HTML deliverable, even when the user does not…
Skill Claude CodeCodex
Professional UI design system that replaces generic AI aesthetics (purple gradients, neon colors) with intentional, distinctive design. Use this skill whenever generating frontend UI, web pages, landing pages, dashboards, or any visual interface. Provides concrete color palettes, typography rules, spacing systems, and…
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: