Design & Media
Design agent skills guide AI agents through visual and UX work: UI mockups, design systems, image and asset workflows, and design reviews. A skill keeps the agent aligned with your design language instead of improvising a new style each session.
-
dragoon0x Skill Component CheckVerify component consistency. Same component type should use same spacing, typography, and color patterns everywhere.
- dragoon0x Skill Export Tailwind
Export the current design system as a Tailwind CSS configuration. Generates theme.extend with colors, fonts, spacing, shadows, and custom screens.
-
40rty-ai Skill Shopify Admin Agentic Organization SchemaInject an Organization JSON-LD block (name, logo, sameAs social links, contactPoint) into the theme so AI agents can verify the store is a real, trusted brand and link it to its public identity.
-
aradotso Skill Figma Use CLIControl Figma from command line with 100+ commands for AI agents to create shapes, text, components, set styles, and export designs
- aradotso Skill Figma Boost MCP
AI-powered Figma enhancement toolkit with MCP integration for design automation, icon management, and creative workflows
- aradotso Skill Figma Pilot MCP
Control Figma through code execution with MCP - create, modify, and query design elements programmatically via AI agents
- aradotso Skill Figma MCP Cached
Cache-enabled Figma Context MCP server with persistent disk caching to reduce API rate limits and improve performance for AI-powered design workflows
- aradotso Skill Anydesign Analyzer
Analyze images, websites, and Figma files to generate structured design.md with DTCG tokens, component inventory, and reconstruction notes
- aradotso Skill Figma UI MCP Bridge
Bridge AI assistants to Figma Desktop via MCP — draw UI with JavaScript, read designs as structured data, extract screenshots and tokens
- aradotso Skill Awesome Design Md Jp
Generate accurate Japanese UI with proper CJK typography using DESIGN.md specifications for 186+ Japanese web services
- aradotso Skill Esther Design System
AI-driven personal brand design system that converts content into consistent, brand-aligned HTML pages with predefined colors, fonts, layouts, and components
- aradotso Skill Figma Make Extractor
Extract source code, design tokens, and assets from Figma Make (.make) files into runnable React applications
- aradotso Skill Figma To AI Prompter
Generate optimized prompts from Figma designs for AI prototyping tools like Lovable, Figma Make, Pencil.dev, Paper.design and Google Stitch
- aradotso Skill Nothing Design Skill
Generate UI components in Nothing's monochrome, typographic, industrial design language with Swiss typography and OLED aesthetics
- aradotso Skill Awesome Claude Design
Use ready-to-use DESIGN.md files to scaffold complete design systems in Claude Design with colors, typography, components, and UI kits
- aradotso Skill Figma Cracked Desktop
Unofficial Figma desktop client for collaborative interface design, prototyping, and FigJam whiteboarding
- aradotso Skill Figma MCP Integration
Enable AI agents to read and modify Figma designs programmatically through Model Context Protocol integration
- aradotso Skill Figma Design Md Plugin
Figma plugin that extracts local styles and generates DESIGN.md and SKILL.md files for AI-driven design system implementation
- aradotso Skill Figma Portfolio Nextjs
Build and customize a modern developer/designer portfolio with Next.js, TypeScript, and TailwindCSS featuring animated typing effects and responsive layouts.
- aradotso Skill Vibe Nothing UI Design
Zero-dependency Nothing-inspired UI design system with monochrome styling, dot-matrix typography, and signal-red accents for web interfaces
- aradotso Skill Figma Capture Extension
Chrome extension that captures webpages into Figma's clipboard format with font fixes and DOM cleanup
- aradotso Skill Figma Make Local Runner
Run and build Figma Make exported code locally with automatic dependency resolution and asset handling
- aradotso Skill Nothing Design UI Skill
Generate UI components in Nothing's monochrome, typographic, industrial design language with Swiss typography and OLED-optimized aesthetics
- aradotso Skill Opencode MCP Figma Auth
Authenticate OpenCode with Figma MCP server to enable Figma design integration
- aradotso Skill Talktofigma Desktop MCP
Bridge Figma designs with AI assistants using TalkToFigma Desktop via Model Context Protocol
- aradotso Skill Cursor Talk To Figma MCP
MCP server enabling AI agents to read and modify Figma designs programmatically through WebSocket communication
- aradotso Skill Figma Bridge HTML Export
Transform Figma designs into LLM-friendly HTML/CSS for AI-assisted development
- aradotso Skill Figma Console MCP Skills
Use powerful Figma Console MCP capabilities as Markdown skills for design tokens, variables, components, WCAG lint, a11y audits, version history, FigJam & Slides
- aradotso Skill Figma Context MCP Cached
Cache-enabled Figma Context MCP server for AI agents to fetch and analyze Figma designs with persistent disk caching
- aradotso Skill Prototype To Figma Skill
Convert Claude Code prototypes into structured Figma design files with component mapping, state flows, and interaction annotations
- aradotso Skill Vibefigma Figma To React
Convert Figma designs to production-ready React components with Tailwind CSS using VibeFigma
- aradotso Skill Figma Design Md Generator
Generate DESIGN.md and SKILL.md files from Figma design systems for AI-assisted development
- aradotso Skill Huolala Figma To Code MCP
Convert Figma designs to high-fidelity UI code via MCP service with AI-powered layout processing
- aradotso Skill Figma Kiwi Protocol Decode
Decode Figma's binary Kiwi wire protocol to extract scenegraph, SVGs, and CSS from WebSocket frames, and write mutations back to live files.
- aradotso Skill Qiaomu Mondo Poster Design
AI-powered poster and cover design tool that generates master-level artwork from natural language prompts using 20+ legendary designer styles
- aradotso Skill Claude Design System Prompt
Install and customize the reverse-engineered Claude Design system prompt to turn any LLM into an opinionated, accessibility-aware design collaborator
Frequently asked questions
What are Design & Media agent skills?
Design agent skills guide AI agents through visual and UX work: UI mockups, design systems, image and asset workflows, and design reviews. A skill keeps the agent aligned with your design language instead of improvising a new style each session.
Which Design & Media skills are most installed?
Popular Design & Media skills on SkillMD right now include component-check, export-tailwind, shopify-admin-agentic-organization-schema. Rankings shift as installs change; sort this page by "Most installs" for the live list.
Do Design & Media skills work with Claude Code and Cursor?
Yes. Every skill here ships as a SKILL.md file, an open format that works in Claude Code, Claude.ai, Cursor, Codex, Windsurf, and 60+ other agents. Install one with npx skillmds@latest add <owner>/<name>, or copy the file into your agent's skills directory.