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 UXcolorize Skill: One Accent on a 90% Neutral UIeduclopez/ui-craftThe colorize skill gives an AI coding agent a color rule: 90% neutral, one accent and a few placements per viewport. It can also strip excess color from a UI.371GitHub stars Skill · Web design and UXComponent Family Consistency Skill for Shared UI Tokensdembrandt/dembrandt-skillsThe component-family-consistency skill makes an AI coding agent give buttons, inputs, badges and pills one shared radius, border, height and state set, so a UI reads as one product.66GitHub stars Skill · Design systems and tokensComponent Spec Skill: Write Implementable Component SpecsOwl-Listener/designer-skillsThe component-spec skill makes an AI coding agent write one complete library component spec, from anatomy and props to states, accessibility notes and do and don't usage rules.2.8KGitHub stars Skill · Web design and UXConverting CSS Modules to Tailwind: Migration Skillspencerpauly/awesome-cursor-skillsThis skill walks an AI coding agent through migrating .module.css and .module.scss files to Tailwind utility classes, one component at a time, with a clean-up checklist.841GitHub stars Skill · Web design and UXCritique Affordance Skill: Review What Looks ClickableOwl-Listener/designer-skillsThe critique-affordance skill has an AI coding agent review a screen for clickability signals, state visibility, CTA clarity and action discoverability, with a fix for each problem.2.9KGitHub stars Skill · Web design and UXCritique Color Skill: Contrast and Palette ReviewOwl-Listener/designer-skillsThe critique-color skill has an AI coding agent audit a screen's contrast ratios, palette coherence, semantic color use and color accessibility, then recommend specific corrections.2.9KGitHub stars Skill · Web design and UXCritique Composition Skill: Balance, Whitespace and RhythmOwl-Listener/designer-skillsThe critique-composition skill has an AI coding agent critique a screen's balance, whitespace, rhythm and gestalt grouping, then propose a specific fix for each weakness it finds.2.9KGitHub stars Skill · Web design and UXCritique Information Density Skill: Fix Overloaded ScreensOwl-Listener/designer-skillsThe critique-information-density skill has an AI coding agent review a screen's cognitive load, content priority, scanning pattern and progressive disclosure, then propose a specific fix for each.2.9KGitHub stars Skill · Web design and UXCritique Theater Skill: Five Dimension Design Self Checknexu-io/open-designThe critique-theater skill makes an AI coding agent review its own artifact on craft, critique, brand, accessibility and copy, then fix the defects before handing it over.100.7KGitHub stars Skill · Web design and UXCritique Visual Hierarchy Skill: Entry Point and Eye FlowOwl-Listener/designer-skillsThe critique-visual-hierarchy skill has an AI coding agent review a screen's entry point, eye flow, weight and emphasis, then propose targeted fixes when attention lands in the wrong place.2.9KGitHub stars Skill · Web design and UXCSS Animation Creator Skill for Motion That Stays FastOneWave-AI/claude-skillsA seven step motion workflow for AI coding agents, backed by ten reference files on transitions, keyframes, loaders, scroll effects, reduced motion and performance.323GitHub stars Skill · Web design and UXCSS Architecture Skill: BEM, SMACSS and CSS-in-JSaj-geddes/useful-ai-promptsThe css-architecture skill gives an AI coding agent BEM naming, SMACSS, styled components, CSS variables and a utility-first pattern for organizing large stylesheets.354GitHub 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.