Web Design Skills for AI Agents That Ship Real

Generates premium per-section website design reference images with composition variety, consistent palette, and conversion-aware art direction for landing pages and product comps.

by leonxlnx/taste-skill

Guide for creating professional UI/UX designs in Penpot via MCP tools, covering design systems, components, dashboards, forms, navigation, landing pages, and accessibility.

by github/awesome-copilot

• User experience
• Accessibility

Designs and implements microinteractions, motion design, transitions, loading states, and user feedback patterns with timing and easing guidance.

by wshobson/agents

• User experience
• Accessibility
• Interaction design

Information architecture expert skill for planning website page hierarchy, navigation, URL structure, and internal linking, with site-type templates and hierarchy design guidance.

by coreyhaines31/marketingskills

• Information architecture

Implements WCAG 2.2 compliant interfaces with ARIA patterns, keyboard navigation, focus management, screen reader support, and inclusive design practices.

by wshobson/agents

• Accessibility

Designs, implements, and audits accessible UI to WCAG 2.2 AA across web, iOS, and Android, covering ARIA roles, focus management, contrast, target size, and screen readers.

by affaan-m/ecc

• Accessibility

Conducts WCAG 2.2 accessibility audits with automated testing, manual verification, POUR principles, severity ratings, and remediation guidance.

by wshobson/agents

• Accessibility

Practical guide to selecting, pairing, and implementing web typefaces, covering readability, responsive typography, font loading, hierarchy, and performance.

by wondelai/skills

• Visual design

Builds accessible user interfaces with shadcn/ui components, Tailwind CSS utility styling, responsive layouts, theming, dark mode, and design system tokens.

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

• Visual design
• Responsive layout

Translates Apple's fluid interface design and physical motion principles to the web, covering gesture-driven UI, springs, drag/swipe/sheet interactions, materials, typography, and reduced motion.

by emilkowalski/skills

Define the structural layer of a product or site before visual design begins. Covers navigation, content hierarchy, page structure, URL patterns, and user flows. Use when user wants to plan site structure, define navigation, map user flows, organize content, or mentions "IA" or "information…

by julianoczkowski/designer-skills

• Information architecture
• Visual design

This skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design", "check the UI", "fix the layout", "find design problems". Detects issues with responsive design, accessibility, visual consistency, and…

by github/awesome-copilot

• Responsive layout
• Accessibility

Build or redesign polished browser-rendered visual artifacts with HTML/CSS/JavaScript/React: pages, dashboards, prototypes, slide decks, animations, UI mockups, and data visualizations. Use for visual front-end creation, design-system exploration, design critique, or explicit browser acceptance /…

by conardli/garden-skills

• Accessibility
• Interaction design

Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.

by leonxlnx/taste-skill

• Visual design

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

• Visual design

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

• Accessibility

> 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

• Responsive layout
• Accessibility

Extract any website's design system into an agent-ready DESIGN.md using Firecrawl scrape evidence. Use when the user wants colors, fonts, spacing, components, layout patterns, or brand/UI guidance from a website so AI agents can create new websites, clone a look, or build pages inspired by that…

by firecrawl/firecrawl-workflows

Audit a Penpot design against WCAG 2.1/2.2 AA (optionally AAA) and produce a structured severity report: color contrast, touch/target sizes, text alternatives, heading hierarchy, and keyboard/focus order. Proposes fixes — does not auto-apply. Also serves as the Evaluator in the brief-to-screen loop. Triggers: 'check accessibility', 'accessibility audit', 'WCAG check', 'contrast audit', 'a11y review', 'check color contrast', 'is this accessible'.

by penpot/penpot-ai-kit

• Accessibility

antfu-style design conventions, broadened. UnoCSS-first, class-based semantic tokens with dual light/dark for tooling and devtools UIs, plus design-read, anti-slop, and micro-interaction polish for landing pages and product surfaces. Use when building or refactoring any interface with UnoCSS.

by antfu/skills

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

Translates Figma designs into production-ready application code with 1:1 visual fidelity. Use when implementing UI code from Figma files, when user mentions "implement design", "generate code", "implement component", provides Figma URLs, or asks to build components matching Figma specs. For Figma canvas writes via `use_figma`, use `figma-use`.

by openai/skills

Needs (stated): Node.js

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

Needs (stated): MCP server

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

Review a Penpot design against its implemented code (a source component or Storybook story) and emit a structured DRIFT report. Use when an engineer needs to confirm the build matches the design: extract HTML/CSS from a selection, map its tokens/structure/states to the code component, diff them, and list what each side is missing with severity and a reconciliation. Degrades gracefully to a design-system-token check when no code source is supplied. Triggers: 'design to code review', 'does my code match the design', 'design code parity', 'compare Penpot to my component', 'check this against Storybook', 'extract HTML/CSS from this selection', 'find design drift', 'design implementation diff'.

by penpot/penpot-ai-kit

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

• Accessibility

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

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

Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.

by anthropics/skills

Master React, Vue, and Svelte component patterns including CSS-in-JS, composition strategies, and reusable component architecture. Use when building UI component libraries, designing component APIs, or implementing frontend design systems.

by wshobson/agents

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

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

Extracts design primitives (colors, fonts, spacing, radius, shadows) from a public website and generates starter token files for a project's design system.

by arvindrk/extract-design-system

Onboarding and activation CRO skill covering first-run experience, empty states, checklists, and time-to-value optimization for post-signup user flows.

by coreyhaines31/marketingskills

Audits websites and landing pages for conversion issues and designs evidence-based A/B tests, covering funnel mapping, persuasion assets, and objection handling.

by wondelai/skills

• User experience

Evidence-led web performance optimization skill covering Core Web Vitals, critical rendering path, resource loading, and performance budgets with measurement workflows.

by addyosmani/web-quality-skills

妙搭（Spark/Miaoda）应用开发与托管：应用创建、本地全栈开发、云端生成迭代、创意设计（UI mockup / 可交互原型 / 线框图 / 落地页 / 仪表盘 / 幻灯片 deck / 视觉探索）、AI相关能力和飞书平台能力或者其他外部能力集成、日志/Trace/监控指标/PV/UV 查询、环境变量管理、应用协作者与协作权限设置、应用角色与成员管理、自动化触发器（定时/记录变更/Webhook/飞书审批）。当用户要开发/新建一个系统·工具·平台·应用，或要本地开发 / 云端开发 / 修改 / 部署 / 发布 / 上线 / 拿可分享链接，或用 HTML 做页面·网站·部署到妙搭，或要设计 / design / mockup / prototype / wireframe / 做 PPT / deck / 视觉探索，或提到妙搭/Spark/Miaoda（应用运行时域名形如 *.aiforce.cloud）、应用数据库、应用文件存储、开放 API Key、可见范围、应用协作者/开发权限、应用角色/角色成员、线上日志、接口请求量、错误量、延迟、访问量、环境变量、给妙搭应用配自动化任务/定时触发/审批通过后自动触发时使用。不负责普通云盘文件上传（lark-drive）、飞书文档编辑（lark-doc）、原生幻灯片创建（lark-slides）。

by larksuite/cli

• User experience
• Interaction design

Reverse-lookup glossary that maps vague descriptions of web motion effects to their precise animation terms, for naming effects rather than designing or building them.

by emilkowalski/skills

Outcome-focused Firecrawl workflows producing structured web-data artifacts including research reports, SEO audits, QA reports, and website design systems.

by firecrawl/firecrawl-workflows

Anti-ui-slop playbooks for building, redesigning, critiquing, and polishing web and iOS interfaces, with layout, hierarchy, and detail workflows plus optional real-product references.

by uizze.sh

• Visual design