Skills for Designers: UI, UX and Graphic Work

Generate, extend, or audit design tokens in DTCG format with the 3-tier architecture (primitive, semantic, component).

by plugin87/ux-ui-agent-skills

• Visual design
• Design systems

Generates custom design system rules for the user's codebase. Use when user says "create design system rules", "generate rules for my project", "set up design rules", "customize design system guidelines", or wants to establish project-specific conventions for Figma-to-code workflows. Requires Figma MCP server connection.

by openai/skills

• Visual design
• Design systems

Needs (stated): MCP server

Use this skill alongside figma-use when the task involves translating an application page, view, or multi-section layout into Figma. Triggers: 'write to Figma', 'create in Figma from code', 'push page to Figma', 'take this app/page and build it in Figma', 'create a screen', 'build a landing page in Figma', 'update the Figma screen to match code'. This is the preferred workflow skill whenever the user wants to build or update a full page, screen, or view in Figma from code or a description. Discovers design system components, variables, and styles via search_design_system, imports them, and assembles screens incrementally section-by-section using design system tokens instead of hardcoded values.

by openai/skills

• Design systems

Audit a Penpot design for design-system / token GOVERNANCE issues (distinct from accessibility): hardcoded colors where a token exists, off-grid spacing, orphan/unresolved/unused tokens, duplicated values, and detached parts that should be component instances. Produces a severity report and suggests semantic-token swaps. Triggers: 'audit tokens', 'find hardcoded colors', 'token governance', 'check design system consistency', 'find off-grid spacing', 'detect raw values', 'are we using tokens correctly'.

by penpot/penpot-ai-kit

• Design systems

UI/UX design intelligence for web, mobile, and desktop. This skill should be used when designing, building, reviewing, or fixing interfaces, including pages, components, design systems, accessibility, interaction, responsive layout, typography, color, charts, and stack-specific UI implementation. Searchable local data: 79 searchable styles (50 active), 192 product palettes and reasoning profiles, 74 font pairings, 119 UX guidelines, 105 icons, 17 GSAP presets, 25 chart types, and 22 stacks.

by nextlevelbuilder/ui-ux-pro-max-skill

• Visual design
• Design systems

Designs or redesigns frontend UI, presentations, and graphics on the Superdesign canvas with multiple AI models, supporting design systems, reusable components, and multi-page flows.

by superdesigndev/superdesign-skill

• Design systems

Generate an accessible brand design system from a brief: DTCG tokens, light and dark, plus a single theme.css verified for WCAG.

by plugin87/ux-ui-agent-skills

• Design systems

Needs (stated): Python

Move an idea up the fidelity ladder (content-first to code) with a validation plan at each level, plus user-journey mapping.

by plugin87/ux-ui-agent-skills

• Prototyping
• Design systems

Use the Figma MCP server to fetch design context, screenshots, variables, and assets from Figma, and to translate Figma nodes into production code. Trigger when a task involves Figma URLs, node IDs, design-to-code implementation, or Figma MCP setup and troubleshooting.

by openai/skills

• Visual design
• Design systems

Needs (stated): Node.js

> Review and create distinctive, production-grade frontend interfaces with high design quality and design system compliance. Evaluates using three pillars: frictionless insight-to-action, quality craft, and trustworthy building. USE FOR: PR reviews, design reviews, accessibility audits, design system compliance checks, creative frontend design, UI code review, component reviews, responsive design checks, theme testing, and creating memorable UI. DO NOT USE FOR: Backend API reviews, database schema reviews, infrastructure or DevOps work, pure business logic without UI, or non-frontend code.

by microsoft/skills

• Visual design
• Design systems

Translate an existing application page, view, or component code into a Penpot screen that is bound to the existing design system — mapping code styles onto semantic tokens and reusing library components instead of raw shapes. Use when the user has real code/markup and wants it reconstructed in Penpot, section by section, on-system. Triggers: 'build this in Penpot from code', 'turn this React/HTML/CSS into a Penpot screen', 'recreate this view in Penpot', 'port this page to Penpot', 'translate this component to Penpot bound to our tokens', 'code to Penpot'.

by penpot/penpot-ai-kit

• Research & discovery
• Design systems

Extract a DESIGN.md design-documentation file from a Penpot file: a portable markdown spec (YAML frontmatter with colors/typography/rounded/spacing/components token maps + prose sections: Overview, Colors, Typography, Layout, Shapes, Components, Do's & Don'ts, Iteration Guide, Known Gaps) in the design-md format, grounded in the file's real tokens, library assets, and sampled component styles — never invented. Read-only on the canvas; writes one local markdown file. Triggers: 'generate DESIGN.md', 'create a design.md', 'document the design system as markdown', 'export design guidelines', 'extract design documentation', 'design system spec file', 'make a style guide file from this design'.

by penpot/penpot-ai-kit

• Visual design
• Design systems

Designs mobile app UI screens via the Sleek API, creating projects, describing screens in plain language, and getting back rendered screens for HTML, React Native, or SwiftUI.

by designed-by-ai/skills

Needs (stated): API key · Paid account

Anti-slop frontend skill for landing pages, portfolios, and redesigns: reads the brief, infers design direction, and ships non-templated interfaces with real design systems and audit-first redesigns.

by leonxlnx/taste-skill

• Visual design
• Design systems

Generates agent-friendly DESIGN.md files for Google Stitch enforcing premium anti-generic UI standards: strict typography, calibrated color, asymmetric layouts, and micro-motion.

by leonxlnx/taste-skill

• Visual design
• Design systems

Encodes Emil Kowalski's philosophy on UI polish, component design, animation decisions, and the invisible details that make software feel great, with a required review format.

by emilkowalski/skills

Apple's approach to interface design and fluid physical motion translated for the web: gesture-driven UI, spring animations, drag/swipe/sheet interactions, materials, typography, and reduced-motion.

by emilkowalski/skills

• Visual design

Analyze Stitch projects and synthesize a semantic design system into DESIGN.md files

by google-labs-code/stitch-skills

• Research & discovery
• Design systems

Unified design skill covering brand identity, design tokens, UI styling, logo generation, corporate identity programs, presentations, banners, social photos, and icons.

by nextlevelbuilder/ui-ux-pro-max-skill

• Define the problem
• Design systems

Generates agent-friendly DESIGN.md files for Google Stitch enforcing premium anti-generic UI standards: strict typography, calibrated color, asymmetric layouts, and micro-motion.

by google-labs-code/stitch-skills

• Visual design
• Design systems

Builds and maintains a design system inside an Expo app: reusable theme of design tokens (color, spacing, typography, radius, shadow, motion), component conventions, and drift audits.

by expo/skills

• Visual design
• Design systems

Meta-skill that generates new design-language skills from a brand or reference.

by dominikmartn/hue

• Visual design
• Design systems

Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.

by anthropics/skills

• Define the problem
• Visual design

Teaches high-end agency visual design: exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive, blocking generic defaults.

by leonxlnx/taste-skill

• Visual design

Elite UX/UI and GSAP motion engineering: Python-driven layout randomization, AIDA page structure, wide editorial typography, gapless bento grids, and strict GSAP ScrollTriggers.

by leonxlnx/taste-skill

• Visual design

Connects Figma design components to code components using Code Connect mapping tools. Use when user says "code connect", "connect this component to code", "map this component", "link component to code", "create code connect mapping", or wants to establish mappings between Figma designs and code implementations. For canvas writes via `use_figma`, use `figma-use`.

by openai/skills

Needs (stated): Node.js

Build scalable design systems with Tailwind CSS v4, design tokens, component libraries, and responsive patterns. Use when creating component libraries, implementing design systems, or standardizing UI patterns.

by wshobson/agents

• Design systems

Creates accessible UIs with shadcn/ui components, Tailwind CSS utility styling, and canvas-based visual designs, including design systems, responsive layouts, and dark mode.

by nextlevelbuilder/ui-ux-pro-max-skill

• Visual design
• Design systems

Review UI code for Web Interface Guidelines compliance. Use when asked to "review my UI", "check accessibility", "audit design", "review UX", or "check my site against best practices".

by vercel-labs/agent-skills

Image-first website design-to-code skill: generates design images, deeply analyzes them, then implements the website to match, avoiding generic card spam and weak hierarchy.

by leonxlnx/taste-skill

• Visual design

Extract design primitives from a public website and generate starter token files for your project.

by arvindrk/extract-design-system

• Design systems

Extracts a website's design system into an agent-ready DESIGN.md using Firecrawl scrape evidence: colors, fonts, spacing, components, layout patterns, and brand guidance.

by firecrawl/firecrawl-workflows

• Research & discovery
• Visual design
• Design systems

Generates premium website design reference images, one per section, with composition variety, narrative concept spine, and a consistent palette for landing pages and marketing sites.

by leonxlnx/taste-skill

• Visual design

Generates premium mobile app screen concepts and flows for iOS, Android, and cross-platform, with clean hierarchy, controlled palettes, and phone mockup framing.

by leonxlnx/taste-skill

• Prototyping

Transforms vague UI ideas into polished, Stitch-optimized prompts. Enhances specificity, adds UI/UX keywords, injects design system context, and structures output for better generation results.

by google-labs-code/stitch-skills

• Visual design
• Design systems

Converts Stitch designs into modular Vite and React components, or syncs existing React components to align with the latest Stitch designs, with AST-based validation.

by google-labs-code/stitch-skills

• Research & discovery
• Visual design
• Design systems

Landing page conversion optimization with layout rules, hero section design, CTA psychology, above-the-fold formula, social proof placement, and mobile design.

by 101-skills/superpowers

Converts frontend code (React, Angular, Vue) to a Stitch Design by chaining static HTML extraction, design system extraction, and file upload.

by google-labs-code/stitch-skills

• Design systems

Designs effective KPI dashboards with metrics selection, visualization best practices, chart selection, and real-time monitoring patterns.

by wshobson/agents

Creates professional SVG logos from descriptions and design specifications, generating multiple variations with different layouts, styles, and concepts.

by rknall/claude-skills

Create branded architecture, IT current-state, flowchart, sequence, state machine, ER/data model, timeline, swimlane, quadrant, radar/spider, polar chart (polar/radial lollipop), loop/flywheel, nested, tree, org chart, layer stack, Venn, pyramid/funnel, treemap, bar, waterfall, line, Gantt and scatter charts, high-level, process, medallion, data flow, DP integration, DP security matrix, Sankey, fishbone, Wardley map, kanban, user journey, deployment, dependency graph, UML class, story map, or database schema diagrams as standalone HTML/SVG/PNG. Redraw .drawio/.drawio.png/.drawio.svg, Mermaid .mmd, or Excalidraw .excalidraw sources at a chosen size/detail; onboard brand tokens from a website; add semantic patterns, callouts, accessible motion, or sketchy/hand-drawn styling.

by cathrynlavery/diagram-design

• Design systems

Create beautiful visual art in .png and .pdf documents using design philosophy. You should use this skill when the user asks to create a poster, piece of art, design, or other static piece. Create original visual designs, never copying existing artists' work to avoid copyright violations.

by anthropics/skills

• Visual design

Toolkit for styling artifacts with a theme. These artifacts can be slides, docs, reportings, HTML landing pages, etc. There are 10 pre-set themes with colors/fonts that you can apply to any artifact that has been creating, or can generate a new theme on-the-fly.

by anthropics/skills

Turns ideas into fully formed designs and specs through collaborative dialogue, classifying requests as spike, bounded, or architectural before implementation.

by obra/superpowers

Reverse-lookup glossary that turns a vague description of a web animation or motion effect into its exact term ("the bouncy thing when a popover opens" → Pop in; "the iOS rubber-band scroll" → Rubber-banding). Use when the user asks "what's it called when…", or describes a motion effect without knowing its name and wants the right word to prompt an AI or designer with. For naming an effect, not designing or building one.

by emilkowalski/skills

Adds interactive widget previews to a Flutter project using the previews.dart system, for consistent design and interactive testing of UI components.

by flutter/agent-plugins

Designs banners for social media, ads, website heroes, and print with multiple art direction options, safe-zone rules, and HTML/CSS composition.

by nextlevelbuilder/ui-ux-pro-max-skill

• Visual design

Power BI report visualization design consultation: chart selection, layout design, audience-specific patterns, and accessibility for effective reports.

by github/awesome-copilot

Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.

by anthropics/skills

• Visual design

Gives coding agents better UI taste with anti-ui-slop playbooks for web and iOS: layout selection, visual hierarchy, polish, and design review workflows.

by uizze.sh

• Research & discovery
• Visual design
• Design systems

Designs and reviews iOS UI/UX for iPhone apps in SwiftUI, UIKit, or React Native: navigation, typography, forms, keyboard and safe-area layout, and accessibility per Apple HIG.

by uizze.sh

• Visual design
• Design systems