Design skills
Design Skills
Agent skills for design and WordPress work, each linked to its original GitHub repository.
363 entries
Skill · Web design and UXDesigning Beautiful Websites Skill: UX and UI Guidetristanmanchester/agent-skillsThe designing-beautiful-websites skill guides an AI coding agent through website UX and UI work, from structure and visual direction to states, accessibility and rendered checks.3GitHub starsSkill · Web design and UXDisney Animation Rules Skill for Procedural Motionvibe-motion/skillsThe disney-animation-rules skill gives an AI coding agent a phase-by-phase method for code-driven motion, applying Disney's 12 principles selectively to fix stiff, weightless or mechanical animation.1.3KGitHub starsSkill · Web design and UXDoherty Threshold Skill: Keep UI Response Under 400msOwl-Listener/designer-skillsThe doherty-threshold skill has an AI coding agent find where latency breaks user flow and apply response time targets and feedback patterns to keep interactions feeling immediate.2.9KGitHub starsSkill · Web design and UXDramatic 2000ms Plus Skill: Cinematic Web Animationdylantarre/animation-principlesThe dramatic-2000ms-plus skill has an AI coding agent build cinematic animation sequences over 2000ms, with the 12 principles at full scale, easing curves, requirements and production costs.102GitHub starsSkill · Web design and UXEnterprise B2B Animation Skill: Motion for Dashboardsdylantarre/animation-principlesThe enterprise-b2b skill applies Disney's 12 animation principles to B2B software and admin dashboards, favoring 150 to 250ms timing, minimal deformation and motion that serves clarity.102GitHub starsSkill · Web design and UXExplain Interface Skill: How Was That Effect Built?jakubkrehel/skillsThe explain-interface skill answers how a website, visual effect or animation was built from a live URL or screenshot, reporting the layer stack with measured, derived and inferred tiers.7.5KGitHub starsSkill · Web design and UXExpo Design System Skill for AI Coding Agentsexpo/skillsA skill that teaches an AI coding agent to build one token theme for color, spacing, typography, radius, shadow and motion inside an Expo app.2.9KGitHub starsSkill · Web design and UXExtract Design Skill: Real Tokens From Any Live Sitedembrandt/dembrandt-skillsThe extract-design skill has an AI coding agent run Dembrandt against a live URL and return real colors, typography, spacing, components and W3C design tokens.66GitHub starsSkill · Figma and design to codeFigma Code Connect Components Skill: Map Design to Codeopenai/skillsThe figma-code-connect-components skill has an AI coding agent link published Figma components to the matching components in your codebase, using Code Connect suggestion and mapping tools.27.9KGitHub starsSkill · Web design and UXFigma Component Audit Skill: Naming, Gaps, Variantsmohitagw15856/pm-claude-skillsThe figma-component-audit skill has an AI coding agent review a pasted list of Figma components for naming problems, missing components and incomplete variants, then rank the fixes.1.4KGitHub starsSkill · Figma and design to codeFigma Create Design System Rules Skill: Set Up Agent Rulesopenai/skillsThe figma-create-design-system-rules skill has an AI coding agent study your codebase and write project rules, so Figma designs get built with your components, tokens and conventions.27.9KGitHub starsSkill · Web design and UXFigma Design Sync Skill: Match Code to Your Figma Fileratacat/claude-skillsThe figma-design-sync skill has an AI coding agent compare a Figma node with a screenshot of your page, list each difference by severity, fix the code and repeat.56GitHub 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 WordPressI built it with an AI toolLovable, v0, Bolt, Claude and moreI have HTML, CSS and JSBring a build into WordPressI want to design in WordPressComposer, the AI visual editor
Get StartedBrowse 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 MCPsMCP servers that connect your AI to design tools.
Explore NowCompareAI and design tools side by side, with a verdict.
Explore NowAlternativesRanked alternatives to the tools you already know.
Explore NowSolutionsStep-by-step routes from a design or AI build to WordPress.
Explore Now