Design skills

Design Skills

Agent skills for design and WordPress work, each linked to its original GitHub repository.

363 entries

SortMost installed A to Z

Skill · Web design and UXDesign System Lead Skill: Tokens, Components, Governanceborghei/Claude-SkillsThe design-system-lead skill makes an AI coding agent confirm brand color, maturity and platforms, then build three-tier tokens, a component library, a governance process and adoption tracking.881GitHub stars Skill · Design systems and tokensDesign System Patterns Skill for Tokens and Themingwshobson/agentsThe design-system-patterns skill teaches an AI coding agent a three tier token hierarchy, CSS custom property theming and component architecture, with four reference files for deeper detail.40.2KGitHub stars Skill · Web design and UXDesign System Skill: Audit, Document and Extendanthropics/knowledge-work-pluginsThe design-system skill from knowledge-work-plugins audits, documents or extends a design system, with report templates for naming, token coverage, component completeness and new patterns.26.2KGitHub stars Skill · Design systems and tokensDesign System Skill: Tokens, Components and Storybookaffaan-m/ECCThe design-system skill in ECC gives an AI coding agent four building blocks, tokens, components, layout patterns and icons, plus a Figma and Storybook toolchain and a six item checklist.274.6KGitHub stars Skill · Design systems and tokensDesign System Starter Skill: Tokens and Componentssoftaworks/agent-toolkitThe design-system-starter skill turns one plain request into design tokens, an atomic component structure, dark mode theming and accessibility patterns for an AI coding agent.2.5KGitHub stars Skill · Design systems and tokensDesign System Structure Skill: Flutter Tokens, Theme and Shapeszakariaf/Flutter-SkillsThe design-system-structure skill teaches an AI coding agent to structure a Flutter design system as tokens, theme, modifiers and shapes, with a gate that rejects raw values.55GitHub stars Skill · Design systems and tokensDesign System Synthesizer Skill for WordPress Sitesrespira-press/agent-skills-wordpressThe design system synthesizer skill has your AI coding agent read 5 to 10 pages of a WordPress site, extract its brand tokens, and save a draft design direction.45GitHub stars Skill · Web design and UXDesign to Component Translator Skill: Figma to Reactpatricio0312rev/skillsIn the design-to-component-translator skill's worked example, a 40px button with 12px 24px padding and a 6px radius becomes h-10, px-6 and rounded-md, with states added.61GitHub stars Skill · Design systems and tokensDesign Token Audit Skill: Find Hard-Coded Values and DriftOwl-Listener/designer-skillsThe design-token-audit skill has an AI coding agent audit token coverage, consistency and gaps across a product, then report hard-coded values with suggested token replacements.2.9KGitHub stars Skill · Design systems and tokensDesign Token Skill: Name and Tier Your TokensOwl-Listener/designer-skillsThe design-token skill has an AI coding agent define colour, spacing, type and elevation tokens in three tiers, with a naming pattern and usage rules for each one.2.8KGitHub stars Skill · Web design and UXDesign Tokens Skill: DTCG Tokens in Three Tiersplugin87/ux-ui-agent-skillsThe design-tokens skill has an AI coding agent generate, extend or audit DTCG design tokens in three tiers, with OKLCH palettes, contrast checks and a validation script for aliases.1.5KGitHub stars Skill · Design systems and tokensDesign Tokens Skill: Math-First Scales and Contrastdylanfeltus/skillsThe design-tokens skill in dylanfeltus/skills has an AI coding agent derive type scales, color shades, spacing and dark mode from ratios, then check WCAG contrast before output.179GitHub stars

Turn what your agent designs into a real WordPress site

Use skills like this to get better HTML, CSS and JS from your agent, then publish the result as editable WordPress.

I have a Figma designTurn it into editable WordPress I built it with an AI toolLovable, v0, Bolt, Claude and more I have HTML, CSS and JSBring a build into WordPress I want to design in WordPressComposer, the AI visual editor

Browse the directory

Skills, MCP servers, comparisons, alternatives and guides for design to WordPress work.

Design Skills

Agent skills that sharpen design, layout and polish.

Explore NowDesign MCPs

MCP servers that connect your AI to design tools.

Explore NowCompare

AI and design tools side by side, with a verdict.

Explore NowAlternatives

Ranked alternatives to the tools you already know.

Explore NowSolutions

Step-by-step routes from a design or AI build to WordPress.