Design Skills Hub
All skills About Publish Sign in

About · Design Skills Hub

The Protocol
for Portable Design.

The open registry of design skills for AI agents — authored by humans, not scraped from the web.

↓ scroll  ·  or press →

01 — Why this exists

When everything is generated,
everything looks the same.

AI made design free to generate — interfaces, brands, decks, posts are a prompt away. But when everyone draws from the same models, output converges. The web fills with competent, forgettable "AI slop."

So the scarce thing flips: not making a design, but having a point of view worth keeping. And here's the catch — even a brilliant agent can't supply that. It has to be told whose design: "make it Nike, not generic."

one of these has a point of view.

Design isn't a capability an agent has. It's a specification you give it.

02 — What makes us different

Authored, not scraped.

There are two ways to hand an AI a design. Only one of them carries a point of view.

What we list

Authored design systems

A designer sat down and encoded the whole thing — color, type, spacing, motion, voice, and the boundaries of what not to do.

The why is built in. Every choice carries its reason, and the alternatives it turned down.

Coherent. Meant to be applied, not guessed at.

shadcn · Nothing · Emil Kowalski · op7418
The other tools

Scraped tokens

A tool points at any website and infers tokens from the page's markup.

You get the surface — a few colors, a few fonts. Not the intent, not the edges, not the why.

A snapshot of how something looks — prone to the very slop it set out to fix.

url → tokens generators

A scraper copies what a site already is. A designer encodes what it may become.

03 — Aesthetic & Engineering skills

One registry, the whole surface of design.

Skills span UI/UX, design systems, websites & landing, mobile, branding, logos, decks, and marketing & social — and skills that review a design (critique, UX walkthrough, accessibility audit), not only generate one.

Aesthetic

The look — color, type, spacing, motion, brand, layout. The taste a designer chose to encode.

Engineering

The rules — component architecture, standards, accessibility, performance. The how a design holds up.

Every skill installs into any agent that reads a skill file.

04 — How the samples are made

Every preview is the skill, actually run.

The sample on each card isn't art we directed. We install the skill, hand the agent one shared brief — a fictional design studio — and let the skill make every call: type, color, spacing, motion, layout. Same words for every skill; only the skill changes. So the wall is a like-for-like read of judgment, not our styling. Cards marked “Sample” are exactly that; a maker can upload their own banner instead — those wear “By author.”

The recipe — the same one you'd run

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

Open any skill and the Preview tab shows the live, clickable version.

# the prompt, made public

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

# one content brief, identical for every skill

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

Programs · Interface Physiology · Mission Identity · Adaptive Design Systems

Work · HALON · Meridian · SIGNAL-9 · 400+ prototypes · Est. NYC

Content only — the skill supplies all the style.

05 — How it works

Install one. Or publish your own.

Install

Browse the registry, copy a skill's install command (or run npx design-skills-hub), and your agent — Claude Code, Cursor, Codex, Gemini — reads it and ships on-brand instead of generic.

Publish

Bring a repo with a SKILL.md, or convert a Figma file at /convert. It's listed, attributed to you, and any agent can install it.

06 — Why now

Three layers of the agent stack.
One is still open.

Layer 01

Vertical Packs

Industry workflows, big-co built. Industrializing fast.

Layer 02

Horizontal Eng

Generic engineer skills, MIT-licensed abundance. Industrializing fast.

We're here

Layer 03

Portable Design

A designer's system as a portable skill — for your brand, on every agent you use. No incumbent yet.

Portable design is the layer no one has industrialized. That's the one we're building — vendor-neutral, user-owned, portable.

VaporAviator Labs

07 — Who's behind it · New York

A VaporAviator Labs project.

Design Skills Hub is built by VaporAviator Labs, a New York design studio working at the seam of design and AI — we build the tools we wish existed for designers in the agent age.

Frequently asked

Questions about portable design.

What is Design Skills Hub?

+

The open registry of portable design skills for AI agents. Designers encode their design — UI/UX, design systems, branding, logos, decks, marketing, mobile, even design review — as a portable SKILL.md bundle any agent can install and run.

What is a portable design skill?

+

A skill file (SKILL.md, plus DESIGN.md / .cursorrules / CLAUDE.md / AGENTS.md adapters) that encodes how good design gets made or judged — a UI/UX system, a website, branding, a logo, a deck, a marketing piece, or a design-review pass — so any agent applies it the same way across Claude Code, Cursor, Codex, and more.

How is it different from vertical packs or pattern libraries like Mobbin?

+

Vertical packs cover industry workflows. Pattern libraries catalog the industry-average shipped screen. Design Skills Hub covers portable design judgment — which can't be bundled into a vertical or averaged from screenshots, because it belongs to the designer, not the industry.

How is it different from tools that scrape a site's design tokens?

+

Scrapers read an existing site and hand the agent its colors and fonts — the average of what already exists, with no intent. Every skill here is authored: a human encodes the rules, the refusals, the voice, and the why. A scraper copies what a site already is; a designer encodes what it may become.

Which AI agents work with it?

+

Any agent that reads a skill file: Claude Code, Cursor, Codex (AGENTS.md), Gemini, ChatGPT, Windsurf, v0, GitHub Copilot, and OpenClaw — or install from your terminal with npx design-skills-hub.

Who creates the skills, and is it free?

+

Human designers and design engineers. Free to browse, install, and publish your own (log in with GitHub and it's attributed to you).

Built by VaporAviator Labs, New York · designskills.xyz