Design skills

Design Skills

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

369 entries

SortMost installed A to Z

Skill · Web design and UXBuild Design Skill: Turn Figma or Images Into Matching UIjakubkrehel/skillsThe build-design skill builds UI from a Figma file or a design image using your project's existing tokens and components, then compares the render against the design before finishing.7.5KGitHub stars Skill · Design systems and tokensBuilding Components Skill: Composable, Accessible UIvercel/components.buildThe building-components skill from the components.build spec points an AI coding agent to 15 reference files on composition, accessibility, tokens, state and distribution.798GitHub stars Skill · Design toolscc-blender-skill: Model and Render in Blender by RequestRobLe3/cc-blender-skillcc-blender-skill turns a plain request like modeling a sword with three-point lighting into executable Blender Python, through 30 chain-loadable skills for an AI coding agent.109GitHub stars Skill · Design systems and tokensChakra UI Builder Skill: Chakra UI v3 Components and Themeschakra-ui/chakra-uiThe chakra-ui-builder skill makes an AI coding agent write Chakra UI v3 components with semantic tokens, Field.Root forms and mobile first breakpoints, and set up the provider first.40.7KGitHub stars Skill · Web design and UXCinematic Scrub Landing Skill: Mouse-Scrub Video Herohoodini/ai-agents-skillsA skill that turns a hero video and a brand into a landing page where moving the cursor scrubs the video, with opaque story sections below.281GitHub stars Skill · Web design and UXColor Contrast Skill for AI Coding Agentsmgifford/accessibility-skillsThe color-contrast skill checks text, icons and UI controls against WCAG 2.2 contrast thresholds across light, dark and forced-colors modes before shipping.56GitHub stars Skill · Design systems and tokensColor Mode and Theme Skill: Light, Dark or Bothdembrandt/dembrandt-skillsThe color-mode-and-theme skill helps an AI coding agent choose light, dark or combined mode from brand tone, decide when a theme selector is worth building, and set dark mode token...66GitHub stars Skill · Web design and UXColor System Skill: Tonal Scales and ContrastOwl-Listener/designer-skillsThe color-system skill has an AI agent build brand, neutral and semantic palettes with 50 to 950 tonal scales, plus contrast targets of 4.5 to 1 for text.2.8KGitHub stars 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

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.