App Design Skills for AI Agents

Design production-grade screens in Penpot from a brief, as a senior visual designer — reusing the existing design system (tokens + components) and assembling section by section, never one-shot. Use to create a screen/page/landing/dashboard from a description. NOT for translating existing code (use penpot-build-from-code). Triggers: 'design a dashboard', 'create a landing page', 'design this app screen', 'build a UI from this brief', 'design a settings page', 'mock up a screen in Penpot'.

by penpot/penpot-ai-kit

• Handoff & system

Document a Penpot design for handoff by building a clean annotation layer BESIDE the design (never on top of it): a left context card (the 'How might we' goal, business rules, links, status, feedback wanted/not), numbered pin markers on the UI, matching observation/recommendation note cards on the right, and optional tooltips — all wrapped in a single hideable group so the clean design can be revealed. Reuses an annotation component kit + tokens if present; proposes and creates a minimal one if missing. NOT for auditing (use penpot-audit-*) or renaming layers (use penpot-rename-layers). Triggers: 'document this design', 'annotate this screen', 'prepare this for handoff', 'add design annotations', 'explain this flow for devs', 'add observation notes', 'create a critique card', 'spec this screen for handoff'.

by penpot/penpot-ai-kit

• Handoff & system

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

• Flows
• Usability

Review a design/UI across 6 weighted dimensions with Nielsen's 10 heuristics and a prioritized findings table.

by plugin87/ux-ui-agent-skills

Manages shadcn components and projects — adding, searching, fixing, debugging, styling, and composing UI, including chat interfaces. Provides project context, component docs, and usage examples. Applies when working with shadcn/ui, component registries, presets, --preset codes, or any project with a components.json file. Also triggers for "shadcn init", "create an app with --preset", or "switch to --preset".

by shadcn/ui

Anti-AI-slop design skill for greenfield pages, audits, redesigns, and design extraction from URLs or screenshots, emphasizing structural variety. Strong for app/landing UI design quality.

by nutlope/hallmark

Teaches high-end agency-style visual design: fonts, spacing, shadows, card structures, and animations, with anti-generic rules and layout archetypes. Strong for premium UI visual direction.

by leonxlnx/taste-skill

• UI

Elite UX/UI and GSAP motion engineering: enforces layout variance, AIDA page structure, editorial typography, gapless bento grids, and scroll animations. Strong for high-end web UI design and motion.

by leonxlnx/taste-skill

• Flows

Generates DESIGN.md design-system files for Google Stitch, encoding typography, color, layout, motion, and anti-pattern rules for premium non-generic UI. Useful for app design systems and screen generation.

by leonxlnx/taste-skill

• Handoff & system

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

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

• Prototype
• Handoff & system

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

• Handoff & system

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

• Handoff & system

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

by plugin87/ux-ui-agent-skills

Image-first website design-to-code workflow: generates design images, analyzes them, then implements frontend to match. Supports visual design and prototyping for web, not native app UI.

by leonxlnx/taste-skill

• UI

Optimizes post-signup onboarding, activation, first-run experience, and time-to-value, including empty states and onboarding checklists. Relevant to app onboarding flow design.

by coreyhaines31/marketingskills

Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.

by leonxlnx/taste-skill

Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.

by leonxlnx/taste-skill

• Flows
• Handoff & system

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

Build dark-themed React applications using Tailwind CSS with custom theming, glassmorphism effects, and Framer Motion animations. Use when creating dashboards, admin panels, or data-rich interfaces with a refined dark aesthetic.

by microsoft/skills

Guides implementing smooth native-feeling animations with React's View Transition API: page transitions, shared elements, route changes, and list reorder. Relevant to app UI motion and interaction design.

by vercel-labs/agent-skills

• Flows
• UI

Curated, opinionated lookup for picking the right frontend library for a task: UI primitives, motion, charts, drag-and-drop, state, and styling. Helps app UI implementation choices.

by emilkowalski/skills

• UI

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

Builds, edits, and deploys full-stack websites, apps, and games via the Higgsfield CLI, with design briefs and app layouts. App building is in scope but design is secondary to deployment.

by higgsfield-ai/skills

• Flows

Custom authentication flows and component appearance - hooks (useSignIn,

by clerk/skills

Browser automation CLI for AI agents: navigating pages, filling forms, clicking, screenshots, and exploratory testing/QA of web apps. Supports usability testing and app QA rather than design itself.

by vercel-labs/agent-browser

• Prototype
• Usability

Toolkit for interacting with and testing local web apps using Playwright: verifying frontend functionality, debugging UI behavior, capturing screenshots, and viewing logs. Supports usability/QA testing of app UI.

by anthropics/skills

• UI

Comprehensive Playwright testing guidance: E2E, component, API, visual, accessibility, and security testing, plus flaky-test debugging. Supports usability/QA testing of app UI.

by currents-dev/playwright-best-practices-skill

• UI

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

by uizze.sh

• Flows

Gives coding agents better UI taste: anti-ui-slop playbooks for building, redesigning, critiquing, and polishing web and iOS interfaces, with optional real-product references. Directly targets UI design quality.

by uizze.sh

• Handoff & system