agentsclimarketplace
Sign in

Shelves Design & frontend

Design systems

1,424 rows from 572 repositories

Tokens, themes and the rules that keep a product looking like one product.

What Design systems skills agree on

503 skill files read, by 501 of the 520 authors on this shelf whose files we hold, 2026-09-06

The middle one of the 70 measured here is ~1.6k tokens long, counted with cl100k_base

Counted by distinct author, so one author publishing three of these counts once. Where a claim sits in fewer files than authors, that is said: a claim held by forty authors across three files is one file people copied, not forty people who agreed. Near-identical wordings are grouped and the other wordings are shown, so the grouping is yours to check.

What they tell the agent to do

  1. Extract colors, typography, spacing, radii, shadows, breakpoints20 of 501 in 10 filesalso worded as extract colors, typography, spacing, shadows, and breakpoints; extract colors, typography, spacing, shadows, breakpoints
  2. Create a self-contained dependency-free HTML preview page20 of 501 in 10 filesalso worded as create a self-contained interactive HTML preview page; create a self-contained HTML preview page
  3. Keep touch targets at least 44x44px20 of 501also worded as Keep touch targets at least 44 pixels; Keep touch targets at least 44pt
  4. Score the UI across ten dimensions18 of 501 in 8 filesalso worded as Score UI across ten dimensions; Score UI across ten dimensions from zero to ten
  5. Animate exclusively via transform and opacity18 of 501 in 15 filesalso worded as Animate only transform and opacity; Animate only via transform and opacity
  6. Ensure WCAG AA color contrast18 of 501 in 13 filesalso worded as Meet WCAG AA color contrast; Check color contrast meets WCAG AA
  7. Generate DESIGN.md with rationale for each decision17 of 501 in 7 filesalso worded as Document the rationale for each design decision; generate DESIGN.md with decision rationale
  8. Ensure proper contrast and readability15 of 501 in 10 filesalso worded as Ensure foreground-background contrast for readability; ensure appropriate contrast and readability
  9. Scan the codebase for existing style patterns15 of 501 in 6 filesalso worded as scan the codebase for existing styling patterns; scan stylesheets for existing patterns
  10. Give every interactive element a visible focus indicator15 of 501 in 13 filesalso worded as Add visible focus indicators to interactive elements; Show visible focus rings on interactive elements
  11. Propose a design token set14 of 501 in 5 files
  12. Create a custom theme when none fit14 of 501 in 9 filesalso worded as create a custom theme when none fits
  13. Maintain the theme's visual identity across all slides14 of 501 in 9 filesalso worded as Maintain the theme's visual identity across slides; Maintain the theme's identity across all slides
  14. Respect prefers-reduced-motion14 of 501also worded as Respect reduced motion; Respect the prefers-reduced-motion media query
  15. Give each score a fix with file and line14 of 501 in 4 filesalso worded as provide a score, examples, and file:line fix per dimension; Give score, examples, and fix with exact file:line

What they tell it not to do

  1. Never use pure black21 of 501 in 17 filesalso worded as Never use pure black or pure white; Use pure black or pure white on surfaces
  2. Never use emojis19 of 501 in 16 filesalso worded as Never use emojis as UI icons; Never use emoji as icons
  3. Never hardcode colors17 of 501also worded as Hardcoding hex or rgb color values; Never hardcode color, spacing, or typography values
  4. No horizontal scroll on mobile16 of 501 in 12 filesalso worded as Never allow horizontal scroll on mobile; Horizontal scrolling on pages
  5. Do not modify the theme showcase file14 of 501 in 9 filesalso worded as Modifying the theme showcase file
  6. Never use three-column equal card rows12 of 501 in 8 filesalso worded as Never use three equal cards in a row; No three-equal-column feature card rows
  7. Never convey information by color alone12 of 501also worded as Never rely solely on color to convey information; Never rely on color alone to convey information
  8. Never hardcode hexes in components12 of 501also worded as Never hardcode hex colors in components; No hardcoded hex colors in components
  9. Never use primitive tokens directly in components11 of 501also worded as Never use raw hex or primitive tokens in components; never use primitive tokens in component code
  10. Do not add dependencies to the preview page10 of 501 in 5 filesalso worded as Do not add dependencies to the preview page; Do not add dependencies

What they expect to be installed

  1. grep36 of 501
  2. Tailwind CSS25 of 501 in 22 files
  3. Figma22 of 501 in 20 files
  4. Google Fonts22 of 501
  5. npm21 of 501 in 16 files
  6. node20 of 501
  7. AskUserQuestion20 of 501
  8. Tailwind20 of 501 in 19 files
  9. browser MCP19 of 501 in 9 files
  10. python318 of 501 in 17 files

What they ask it to produce

  1. DESIGN.md48 of 501 in 34 filesalso worded as *-design-language.md; DESIGN_SYSTEM.md
  2. design-tokens.json28 of 501 in 17 filesalso worded as *-design-tokens.json; W3C design-tokens.json
  3. design-preview.html21 of 501 in 10 filesalso worded as *-preview.html; .design/design-preview.html
  4. DESIGN.md design system file15 of 501 in 14 filesalso worded as DESIGN.md design system document; DESIGN.md file
  5. PRODUCT.md11 of 501also worded as BRAND.md
  6. tokens.json11 of 501also worded as tokens.css; tokens.json (DTCG format)
  7. CSS custom properties10 of 501also worded as Font CSS custom properties; CSS custom properties files
  8. Single self-contained HTML file10 of 501also worded as self-contained explainer HTML file; Single self-contained HTML file with inline SVG

When Design systems authors say to reach for one

The situations these authors wrote into their own files, counted out of the same 501 authors, with the skills that name each one

How Design systems skills are built

1,328 skill directories by 527 authors, read from their repositories’ own file trees 2026-08-05

The middle bundle among those shipping files is 5 files, 34.0 KB beside SKILL.md

Counted by distinct author, same as above, so one author publishing forty template copies counts once. SKILL.md itself is not counted as a file, so a single-file skill is one where that file is the whole skill.

The shape

  1. SKILL.md is the whole skill131 of 527 authors, 472 of 1,328 skills
  2. files ship beside it396 of 527 authors, 856 of 1,328 skills
  3. executable scripts ship inside148 of 527 authors, 232 of 1,328 skills

The folders they converge on

  1. references/242 of 527 authors, 416 of 1,328 skills
  2. scripts/129 of 527 authors, 202 of 1,328 skills
  3. assets/63 of 527 authors, 99 of 1,328 skills
  4. themes/62 of 527 authors, 87 of 1,328 skills
  5. agents/60 of 527 authors, 77 of 1,328 skills
  6. templates/52 of 527 authors, 69 of 1,328 skills

  • Theme generator

    htmlstreamofficial/preline/skills/theme-generator Skill

    no license6,380★ repo

    Preline UI is an open-source set of prebuilt UI components based on the utility-first Tailwind CSS framework.

  • Impeccable

    silverstein/minutes/.agents/skills/impeccable Skill

    1,426★ repo

    Every meeting, every idea, every voice note — searchable by your AI. Open-source, privacy-first conversation memory layer.

  • Design dna

    zanwei/design-dna Skill

    1,329★

    Turn reference UIs (images, screenshots, URLs) into quantified Design DNA JSON—tokens, qualitative style, visual effects—then generate matching UI from your content.

  • Color palette generator

    AlpacaLabsLLC/skills-for-architects/skills/color-palette-generator Skill

    303★ repo

    Claude Code skills for architecture, real estate, and workplace strategy. Type /skill-name and go.

  • Extract design system

    arvindrk/extract-design-system/skills/extract-design-system Skill

    180★ repo

    Extract design tokens (colors, typography, spacing, border radius, shadows) from any public website. Generates JSON and CSS custom properties for local projects. Available as an AI agent skill (Claude, Cursor, Codex) and standalone CLI.

  • Frontend design system

    oikon48/cc-frontend-skills/skills/frontend-design-system Skill

    69★ repo

    Claude Code plugin for creating frontend UIs that avoid generic AI aesthetics. (Claude Skills is written in Japanese)

  • Getdesign

    MohtashamMurshid/getdesign/skills/getdesign Skill

    45★ repo

    On-demand design systems from any URL. Five surfaces, one agent: web, API, CLI, TypeScript SDK, and a portable agent skill that runs inside Claude Code, Codex, and Cursor.

  • Wp block theme converter

    siddik-web/wp-block-theme-converter Skill

    41★

    A Claude skill for converting any HTML/CSS/JavaScript project into a production-ready WordPress Block Theme (Full Site Editing).

  • Algorithmic color palette

    dembrandt/dembrandt-skills/skills/algorithmic-color-palette Skill

    36★ repo

    Senior-level UX and design-system knowledge, packaged so your AI agent applies it automatically.

  • Go style guide

    madflojo/go-style-agent-skill/skills/go-style-guide Skill

    35★ repo

    Agent Skill for writing Golang code

  • Angular material developer

    mofirojean/angular-ui-skills/skills/angular-material-developer Skill

    28★ repo

    Agent skills that teach AI coding assistants how to build Angular apps with popular UI component libraries.

  • Theme factory addon

    patrickkrebs/theme-factory-addon Skill

    22★

    Expansion pack of 100 curated color/font themes for Anthropic's theme-factory skill — 14 categories (aesthetic, brands, code-editor, painters, film directors). Apache-2.0.

  • Build startup brand

    Kappaemme-git/build-startup-brand Skill

    20★

    Build a distinctive startup brand identity with Codex and receive an openable visual report.

  • Design system is all you need

    devPnal/design-system-is-all-you-need/design-system-is-all-you-need Skill

    18★ repo

    A collection of guideline prompts created to refine the often awkward design traits of generative AI by applying a modern design system, intended for use in Claude, Codex or other vibe coding tools

  • Forge

    Webba-Creative-Technologies/forge/skills/forge Skill

    17★ repo

    A React component library with built-in motion, themeable tokens, and AI skill packs for Claude Code and Cursor.

  • HTML to Figma — Design System

    miapre/html-to-figma-design-system/io.github.miapre/html-to-figma-design-system MCP server

    13★ repo

    Translate HTML prototypes into Figma using your design system's real components and tokens.

  • Brand design

    pivyme/suiperpower/core/skills/build/brand-design Skill

    12★ repo

    Build something meaningful, on Sui. A superpower for AI coding agents (Claude Code, Codex, Cursor, Grok Build) to ship real products on Sui.

  • Orchard core theming

    Lombiq/Orchard-Core-Agent-Skills/skills/orchard-core-theming Skill

    8★ repo

    Reusable, agent-agnostic knowledge packs for Orchard Core development, focused on theming, shapes, content modeling, and evidence-first workflows.

  • Brand consistency ai skill

    piaoyinghuang/brand-consistency-ai-skill Skill

    7★

    Keep every marketing deliverable perfectly on-brand — works with Claude, GPT-4, Gemini, and any LLM

  • Suanfish design system

    SuanFishXYY/suanfish-design-system Skill

    no license7★

    🐟 Suanfish Design System — 33 specialized AI design agents across 7 tiers with REJECT mechanism. Multi-agent design language SKILL for Claude Code / Codex CLI / Copilot CLI. v2.5 adds AI-native Path G (streaming · tool-calls · reasoning · citations · artifacts).

  • Ron draper

    DTM-repo/skills/plugins/ron-draper/skills/ron-draper Skill

    no license6★ repo

    An incisive, source-available brand-distillation skill for Claude, Codex & any SKILL.md tool. Finds the kernel hiding in your product's name, then builds a full brand kit to hand to the coding agent of your choice. You can't be Don (or afford him). But Ron's available.

  • Terminal ui design system

    chyinan/terminal-ui-design-system Skill

    no license6★

    A complete terminal-style UI design system for IDE Skills

  • Bold typography ig post skill

    software-ai-life/Awesome-IG-Design-Skills/bold-typography-ig-post-skill Skill

    no license5★ repo

    Reusable Instagram design skills for AI agents, focused on high-quality 4:5 social post aesthetics, style systems, cover references, and visual QA.

  • Color font skill

    martgueritainaccurate875/skills/plugins/pptx-plugin/skills/color-font-skill Skill

    5★ repo

    Power AI coding agents with structured skills for frontend, fullstack, mobile, and shader development

  • Design token bridge mcp

    kenneives/design-token-bridge-mcp/io.github.kenneives/design-token-bridge-mcp MCP server

    5★ repo

    Translate design tokens between Tailwind, Figma, CSS, Material 3, and SwiftUI

  • Brand design

    rfxlamia/pocketto/skills/brand-design Skill

    4★ repo

    A middleweight workflow for serious AI-coded features: less ceremony than BMAD, more accountability than Superpowers. Source : Trust Me Bro.

  • Design auditor

    billhector/design-skills/skills/design-auditor Skill

    4★ repo

    Claude Code skills for extracting design systems from websites and auditing existing projects — with Tailwind v4 theme generation and WCAG accessibility checks

  • Ckw design skill

    connerkward/ckw-design-skill Skill

    4★

    ckw-design — Conner K. Ward's frontend design skill for Claude Code: direction, design system, visual philosophy.

  • Design system skill

    Cash4478/design-system-skill Skill

    4★

  • Style guide

    khshanovskyi/custom-agent-skills/agent_demo/_skills/style-guide Skill

    no license4★ repo

    Project to demonstrate custom implementation of agent skills

  • Atai design system

    archetypeai/agent-skills/skills/atai-design-system Skill

    4★ repo

    Agent skills for building with Archetype AI's Newton — sensor intelligence via /query (fusion, Omega embeddings, data prep, design system)

  • Agentic Design System

    aa-on-ai/agentic-design-system/io.github.aa-on-ai/agentic-design-system MCP server

    4★ repo

    Render web and SwiftUI evidence, run explicit visual judgment, and trace ADS UI decisions.

  • Specimen

    LoserLab/specimen Skill

    2★

    Specimen is a Claude skill that generates structured typography systems from configuration.

  • Design dna

    Tricholomaaurantiumknottiness355/design-dna Skill

    2★

    Extract, structure, and apply visual design identity as machine-readable Design DNA across tokens, style, and effects

  • Claude design brand

    erenisci/claude-design-prompter/claude-design-brand Skill

    2★ repo

    Two Claude Code skills that turn your repo into paste-ready Claude Design prompts — brand-aware, project-type-tuned, language-aware, file-persisted.

  • Pbi theme

    gusbavia/pbi-theme Skill

    2★

    Agent skill that generates production-ready Power BI themes from 3 brand colors: ~5,800-line theme JSON, branded SVG canvas, design-system PDF, CSS tokens and DAX HTML visual examples. WCAG-aware, light and dark.

  • Netresearch branding

    netresearch/netresearch-branding-skill/skills/netresearch-branding Skill

    no license2★ repo

    Agent Skill for implementing Netresearch brand guidelines - colors, typography, components | Claude Code compatible

  • Mdbook ai skill

    marceloeatworld/mdbook-ai-skill Skill

    no license2★

    Auto-updated mdBook documentation for AI coding assistants — works with 33+ tools via the Agent Skills standard (SKILL.md)

  • Screenshot to design system

    WCF900905/screenshot-to-design-system Skill

    2★

    Agent Skill for Cursor, Claude Code & Codex: turn UI screenshots into design tokens and a 24-category component library demo.

  • Lovable design system

    Mine77/lovable-design-skills/skills/lovable-design-system Skill

    no license2★ repo

    A Lovable-inspired design skill for AI coding agents to create distinctive, production-grade frontend UI.

  • Design system

    ethan-ngai/skills/skills/design-system Skill

    2★ repo

    Practical, composable agent skills for engineering work and personal development.

  • Design md skill

    s-a-s-k-i-a/design-md-skill Skill

    no license2★

    Auto-generate a spec-conformant DESIGN.md from your existing design tokens (theme.json, Tailwind, CSS variables, DTCG). The Claude Code skill that makes your design system AI-readable in one command.

  • Design system extraction

    maiconlara/design-system-extraction Skill

    1★

    Extract design tokens (colors, typography, spacing, border radius, shadows, component states, motion) from any public website by reading its real CSS. WCAG-validates every contrast pair and outputs an implementation guide for coding agents. Agent skill for Claude Code, Cursor and claude.ai, plus a standalone contrast CLI.

  • Ios color palette

    skullninja/skills/ios-design/skills/ios-color-palette Skill

    1★ repo

    Skills and agents for Claude Code

  • Roman cyber garage

    roman-rr/roman-cyber-garage Skill

    no license1★

    Dark cyberpunk design system skill for Claude Code, Codex & AI agents — production-tested theme with 30+ colors, 15+ components, copy-paste CSS

  • Devourer

    LoserLab/devourer Skill

    1★

    Devourer is a Claude skill that transforms color palettes into complete production-ready UI components.

  • Html theme

    dradis/dradis-claude/plugins/dradis-core/skills/html-theme Skill

    1★ repo

    Official, Dradis-managed directory of high quality Claude Code Plugins for Dradis Framework.

  • Atelier components

    luminary19/atelier/skills/atelier-components Skill

    no license1★ repo

    Atelier - a premium, anti-slop frontend design skill suite for Claude Code: 11 skills + a deepdive knowledge base.

  • Design md to shadcn

    douinc/agent-skills/skills/design-md-to-shadcn Skill

    1★ repo

    Agent skills for Claude Code, Copilot, Codex, and Gemini CLI — Figma icons (Iconify), logos (SVGL), Korean UX Writing, and more.

  • Shapediver appbuilder fork

    shapediver/agent-skills/skills/shapediver-appbuilder-fork Skill

    no license1★ repo

    Agent skills for ShapeDiver

  • Design token audit

    dillonschultz93/quieto-skills/design-token-audit Skill

    1★ repo

    Agentic agent skills for the Quieto Tokens design token CLI. Each skill wraps a CLI command into a conversational workflow invocable via slash command.

  • Web typography skill

    simongonzalezdc/web-typography-skill Skill

    1★

    Apache-2.0 AI-agent skill for readable, accessible, high-performance web typography.

  • Design system generator

    XINGANLIU/design-system-generator-skill/skills/design-system-generator Skill

    1★ repo

    🎨 One color in → Full design system out. AI agent skill for generating production-ready design systems.

  • Apple design system

    Joe-Simo/skills/skills/apple-design-system Skill

    1★ repo

    Community Agent Skills by joe-simo, including a Vercel Geist design-system skill for polished UI and companion routing.

  • Visual design system extractor

    srinitude/visual-design-system-extractor/skills/visual-design-system-extractor Skill

    1★ repo

    Agent Skill for extracting visual design systems from reference imagery

  • Design system extractor

    KunalKumarkkr01/design-system-extractor/skills/design-system-extractor Skill

    1★ repo

    Reverse-engineer any live website's design system into an implementation-ready design.md + screenshots, by driving a real browser with the Chrome DevTools MCP. Ships as an agent skill, a Claude Code plugin, and an npx installer.

  • Mm atlassian design

    m2kky/mm-design-systems/skills/mm-atlassian-design Skill

    1★ repo

    MM Design Systems: Premium Agent Skills for UI/UX, System Design, Apple HIG, Material 3, and Frontend architecture.

  • Lazyway io design

    jpbaking/lazyway-io-design/skills/shared/lazyway-io-design Skill

    no license1★ repo

    The lazyway.io design system as a portable kit: tokens, component classes, zero-dependency JS, favicon tooling, and an Agent Skill that keeps AI-generated UI on-brand

  • Remember design system

    sarveshsea/remember-design-system Skill

    1★

    Compact repository design-system memory Agent Skill for AI coding agents

  • Web desg skill

    Mr-DS-ML-85/web-desg-skill Skill

    1★

    The first full visual reverse-engineering skill for AI agents — screenshots, runtime debugging, design tokens, and cloning.

All 1,424 in the catalog