825 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
musabekisakov-imj/flutter-design-engineer
Skill Codex
Audit existing Flutter interfaces for product hierarchy, visual coherence, interaction quality, adaptive behavior, accessibility, and implementation risks. Use when asked to review, critique, diagnose, assess, or prioritize improvements to Flutter screens or flows; remain read-only unless implementation is explicitly…
Skill Codex
Learn, visualize, confirm, store, and apply reusable frontend visual taste from reference webpage URLs. Use when a user asks to study, learn, save, imitate, or apply a website's style, layout, UI, typography, components, art direction, motion, or responsive behavior; when prior taste cases should inform a frontend; or…
Skill Claude Code
Convert a completed grill-me session into a spec file. Captures only the task and the decisions locked during grilling — no implementation details, no invented decisions. Use when the user asks to write a spec from a grill, save grill decisions, or after a grill-me session concludes.
Skill Claude CodeCodex
Nimbuu UI/UX Skill. Logic-driven interface design distilled from Refactoring UI, Practical UI, and Fundamentals of Creating a Great UI/UX. Three uses. (1) ALWAYS when starting a new project, greenfield app, landing page, or prototype with no design system, no tokens, no brand kit, so spacing, type, colour, hierarchy…
billythekidz/apple-design-skill
Skill Claude CodeCodex
Complete Apple Human Interface Guidelines (HIG) and Apple Design System standard. Use when designing, building, or auditing UI/UX for iOS, iPadOS, macOS, watchOS, visionOS, or Apple-styled web and mobile applications.
Skill Claude CodeCodex
Map human-AI interaction journeys - trust arcs, capability discovery paths, autonomy progression, and AI-specific touchpoints. Use when: AI user journey, human-AI interaction mapping, trust arc mapping, AI capability discovery, AI adoption journey, AI experience map.
JZKK720/cubecloud-skills-bundle-kit
Skill Claude CodeCodex
Anti-AI-slop design and copy rules for any UI work (website, web app, or interface). Use whenever building, refining, or auditing user-facing UI. Holds every visual decision to a purpose test and the result to a liveliness bar so the output feels crafted by a designer, not generated by AI. Two modes: DURING (apply…
Skill Claude CodeCodex
UI/UX design intelligence with searchable database.
Skill Claude Code
Transform rough web pages into premium, polished interfaces with glassmorphism, Apple-inspired layouts, and three switchable themes.
WCF900905/screenshot-to-design-system
Skill Claude Code
Extracts color tokens and component styles from UI screenshots by reading each control region individually (not full-page layout). Generates a complete design system demo with tokens.css and components.html. Ignores backgrounds and icons. Use when the user uploads a UI screenshot, asks for design tokens, color palette…
Skill Claude CodeCodex
MUST use when implementing UI components or frontend pages in this project. Triggers: designing UI, implement page, develop UI, write component, frontend development, create component, build interface, style page, button, form, modal, toast, card, input, styling, interface, shadcn, ant design, antd, element plus…
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…
jeremidelacruz/growthlab-skills
Skill Claude CodeCodex
Use when an LLM needs to respect a brand it has never seen — or when a deliverable came back off-brand, colors were guessed, or a font was invented. Also when a brand identity lives only in a PDF manual, a website, or someone's head, and needs to become rules a model can check itself against. Triggers on: "design.md"…
brianmontanaweb/agentic-design-system
Skill Claude Code
Audits and updates an existing component — source, story, and spec doc — fixing violations, story gaps, and spec drift. Always plans changes and waits for approval before writing any files. Use when a component needs to be brought up to standard, or when asked to fix, update, or improve a specific existing component.
Skill Claude CodeCodex
TidyFactor Cinematic track — builds single-file, scroll-driven luxury landing pages (Apple x Cartier aesthetic) as one index.html with CDN-only libraries (GSAP, Lenis, Tailwind), no build step, no framework. The product "film" is a JPG frame-sequence drawn on canvas and scrubbed by scroll, not a scrubbed video…
Skill Claude CodeCodex
Automated spacing & grid QA for web UIs, inside the agent loop. Use for "design QA", "check spacing", "fix my grid/spacing", "audit UI", "design review", "show me the spacing issues", "generate a design report", "give me an audit report", and automatically after you generate or modify frontend UI. Renders the running…
Skill Claude CodeCodex
Priority-ordered rulebook of core UX/UI laws, cognitive-psychology principles, Nielsen's usability heuristics, and accessibility requirements that Claude must actively apply (not just cite) whenever it designs, builds, redesigns, reviews, or critiques any user interface — websites, web/mobile apps, dashboards, forms…
Skill Claude Code
Atelier suite — the art-direction brain. Decide the design direction BEFORE writing any frontend code: which aesthetic, which "world" (production vs award-grade), the concept, the palette mood, type voice, motion budget, layout archetype, and signature moment. Produces a Direction Doc scaled to the task (a one-line…
Skill Claude CodeCodex
A workflow for creating frontend user-interface visuals with AI, from visual reference and real materials to generated code, browser screenshots, and visual comparison. It focuses on layouts, typography, exact text, interface states, and avoiding invented content.
lexs32/ultimate-design-engineer
Skill Claude CodeCodex
The master design engineering skill encoding Emil Kowalski's polish philosophy, Apple's fluid interface principles, Anime.js 3D/timeline motion, Motion spring physics, Kokonut UI component aesthetics, and Backlit UI dark-mode charts. Use when designing, animating, or reviewing web UIs to achieve high-precision craft…
divyanshu-iitian/agent-website-design-skills
Skill Codex
Design, implement, or harden an AI website-building agent that turns natural-language requests into scoped code changes with planning, structured edits, deterministic verification, bounded repair, safe previewing, version history, and token-aware model routing.
Skill Claude CodeCodex
Use when building or styling any web UI — landing pages, hero sections, dashboards, components, marketing sites — or when the user asks for beautiful, animated, or polished design, UI animations, animated backgrounds, gradients, icons, smooth scrolling, or design inspiration. Also use before reaching for the web to…
Skill Claude CodeCodex
Design, implement, or review Material 3 and Material 3 Expressive interfaces for Android Compose, Android Views, Wear OS, and the web. Use for Material Design, M3, Material You, adaptive Material layouts, Material-focused Android UI modernization, or Material web component work; do not apply it to a non-Material…
kumbajirajkumar123/frontend-design
Skill Claude CodeCodex
Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, artifacts, posters, or applications (examples include websites, landing pages, dashboards, React components, HTML/CSS layouts, or when styling/beautifying any web UI).…
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: