For designers and agents🦞
in the era of AI.

Have a Figma file? Convert it into a skill →

Skills Leaderboard

Loading...

Two types of skills, one ecosystem.

Browse and install the skills you need — whether you design or develop.

Aesthetic Skills
For Designers

Design craft for AI

Aesthetic skills encode the craft of design — design systems, branding and logos, web and mobile, decks and marketing — into executable instructions agents apply to any project. Some don’t generate at all; they review a design — critique, walkthrough, accessibility audit.

Design Systems & Brand Identity
Motion & Animation Principles
Layout Patterns & Grid Systems
Engineering Skills
For Developers

Code standards for AI

Engineering skills define code architecture, framework best practices, performance rules, and accessibility standards that AI agents follow when building.

Framework & Performance Rules
Accessibility & A11y Audits
Component Architecture Specs

How these samples are made

Every preview is the skill, actually run.

No hand-picked screenshots. We install each skill into an agent, hand it one shared brief — a fictional design studio — and let the skill make every aesthetic call: type, color, spacing, motion, layout. Same words for every card; only the skill changes. So the wall above is a like-for-like comparison — each skill's own judgment, not our art direction. Cards marked “Sample” are exactly that; when a maker uploads their own banner, the card wears it instead — marked “By author.”

The recipe — the same one you'd run

  1. 01Install the skill — npx skills add <repo>
  2. 02Give the agent the skill's own quickstart prompt
  3. 03Add one shared content brief — no style words
  4. 04Screenshot the result. That becomes the card.

Open any skill's Preview tab for the live, clickable version.

# 1 — the skill's own quickstart prompt

Apply the '{skill}' design skill to this project. Follow every rule it defines — color, type, spacing and motion, a brand system, a deck or layout, or a review pass.

# 2 — one content brief, identical for every skill

VaporAviator Lab — a human-centered design laboratory for the near future. Tagline: "Design for the next departure."

Programs · Interface Physiology · Mission Identity · Adaptive Design Systems

Selected work · HALON · Meridian · SIGNAL-9

Numbers · 400+ prototypes · 98.2% would-ship-again · Est. NYC

Content only. Zero style direction — the skill supplies all of it.

For agents.

Install it once, and your agent knows its way around this catalog on its own — searching it in plain language, reading a skill's color-and-type fingerprint and its security scan before committing, installing by that skill's own authoritative command, and settling the paid ones over x402 with your approval on every purchase.

Install once

Copy

npx skills add VaporAviator/designskills-hub-skill

Any skill-compatible agent — it reads the same SKILL.md everything else here does.

The open layer

Some instinct of yours deserves to travel.

A spacing rhythm, a brand voice, a deck that always lands, an eye for what's off in someone's layout — an instinct like that shouldn't stay in one head. Encode it once as a skill, and every agent that reads it carries your judgment forward.

Publish your Skill

Stay in the loop

New skills, updates, and tips — no spam.