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 UXFigma Design System Handoff Skill: Tokens and Pixel Paritydancingteeth/figma-design-system-handoffThe figma-design-system-handoff skill turns a Figma frame read through Figma MCP into design tokens, primitives and page chrome with pixel parity, or an optional FigCraft canvas rebuild.Skill · Figma and design to codeFigma Expert Skill: Components, Variables and Dev Mode Handoffrightnow-ai/openfangThe figma-expert skill from OpenFang briefs an AI coding agent on Figma auto-layout, variants, variables, type scales and Dev Mode handoff, and warns against detached instances and absolute positioning.18.2KGitHub stars Skill · Figma and design to codeFigma Generate Design Skill: Code to Figma Screensopenai/skillsThe figma-generate-design skill builds or updates a full Figma screen from code or a description, reusing a published design system's components, variables and styles section by section.27.9KGitHub stars Skill · Figma and design to codeFigma Generate Library Skill: Build a Design System from Codeopenai/skillsThe figma-generate-library skill guides an AI coding agent through building a Figma design system from your codebase in phases: tokens first, then pages, then components, with checkpoints between them.27.9KGitHub stars Skill · Figma and design to codeFigma Implement Design Skill: Frames to Codeopenai/skillsThe figma-implement-design skill turns a Figma URL into code through a seven step workflow of design context, screenshot, assets, project conventions and validation against the original frame.27.9KGitHub stars Skill · Web design and UXFigma Skill: Turn Figma Frames into Code with an AI Agentopenai/skillsThe figma skill gives an AI coding agent a fixed flow for Figma MCP work: fetch design context, take a screenshot, reuse project tokens, then validate against the design.27.9KGitHub stars Skill · Web design and UXFigma Spec Extractor Skill: Wireframe to Markdown Specsxtone/ai_development_toolsThe figma-spec-extractor skill reads a Figma wireframe and writes pages, use cases, actors, a data model and components as Markdown, plus three review reports that check the result.3GitHub stars Skill · Web design and UXFigma to React Skill: Lossless Next.js Componentsmajiayu000/spellbookA rule-driven skill that turns Figma MCP output into React or Next.js components with TypeScript and Tailwind, with strict handling of positions, fonts and text heights.286GitHub stars Skill · Web design and UXForm Design Skill: Better Fields, Errors and FlowOwl-Listener/designer-skillsThe form-design skill makes an AI coding agent build forms with single-column layouts, persistent labels, matched input types, blur validation, helpful errors and clean multi-step flows.2.8KGitHub stars Skill · Web design and UXFramed Grid Layout Skill for AI Coding Agentsboraoztunc/skillsThe framed-grid-layout skill teaches an AI coding agent to build editorial page layouts with thin visible grid lines, L-shaped corner brackets and strict section alignment.414GitHub stars Skill · Web design and UXFramer Motion Skill: Disney’s 12 Principles as React Codedylantarre/animation-principlesThe framer-motion skill gives an AI coding agent one React example per Disney principle, from squash and stretch keyframes to spring exaggeration, stagger children and a seven item feature list.95GitHub stars Skill · Web design and UXFramer Motion Skill: Performance Rules for React Animationpproenca/dot-skillsThe framer-motion skill in pproenca/dot-skills ranks animation performance rules by impact, starting with LazyMotion bundle savings and motion value re-render prevention, for agents writing or reviewing React animations.214GitHub 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.