What do I need to use UI Design Pipeline?

Audience; Purpose; Surface; Constraints; A reference the user likes or dislikes.

Is UI Design Pipeline free to use?

Yes — run it free in the browser playground (no API key needed for the sponsored trial, or bring any provider key), or install it into Claude Code, Cursor, ChatGPT and more via npx pm-claude-skills. MIT-licensed and open source.

UI Design Pipeline

Q: How do I know the UI Design Pipeline output is good?

The skill verifies itself against its own quality checks: Stages ran in order, one at a time, with no two design skills loaded together; The direction was written and confirmed before any code; A design system file exists on disk and the page uses only its tokens; Every animation has a stated reason, and enter animations use ease-out.

🔵 Stable🕐 updated 2026-09-28 ✅ 5/5 🔷 SkillSpec L3 pm-design-taste

Run a five-stage UI design pipeline (direction, system, motion, critique, verification) so the result does not look like generic AI output. Use when asked to design or restyle a page, landing page, dashboard or app screen, to make a UI look less AI-generated, or to run the design pipeline. Detects which specialist design skills are installed, hands off to one per stage, and falls back to built-in guidance with the install command when one is missing. Produces a committed direction, a persisted design system file, a motion spec, a critique with fixes, and browser screenshots at mobile and desktop widths.

▶ Run it free — no key needed 📝 Grade your existing draft ⬇ Add to Claude (works in Duet) 📱 Use as an app View SKILL.md ↗ What changed

🗣 Say this to your agent

“Run the design pipeline on this landing page.”“This dashboard looks AI-generated. Fix it properly.”“Design the pricing page, and do not give me the usual purple gradient.”“Take this screen through direction, system, motion, critique and verification.”“Which design skills do I have installed, and what is missing for the pipeline?”

What to give it

▸Audience — who will use the page and what they already know

▸Purpose — the one thing the page must get the visitor to do or understand

▸Surface — marketing page, product screen, dashboard, docs, email

▸Constraints — existing brand, framework, component library, accessibility target

▸A reference the user likes or dislikes — , if they have one. One is enough.

✅ The bar it holds itself to

Every skill in this library self-verifies — these are this skill's own quality checks, straight from its definition.

✓Stages ran in order, one at a time, with no two design skills loaded together

✓The direction was written and confirmed before any code

✓A design system file exists on disk and the page uses only its tokens

✓Every animation has a stated reason, and enter animations use ease-out

✓Screenshots exist for both mobile and desktop widths, taken after the last fix

✓The stage log names the skill or fallback used at each stage

✓Every missing skill was reported with its install command

⚠️ What it refuses to do

**Loading all design skills at once.** Their instructions conflict and the output regresses to the average.

**Running stages in parallel.** Motion designed before the system exists has nothing to be consistent with.

**Designing by banned list.** Avoiding known tells is not a direction.

**Keeping the system in the conversation.** If it is not in a file, the next page will drift.

**Verifying by reading code.** Layout bugs live in the rendering.

Install

npx pm-claude-skills add --agent claude   # or codex · cursor · gemini · hermes
# or one-line MCP (every skill, any client):
claude mcp add pm-skills -- npx -y -p pm-claude-skills pm-claude-skills-mcp

Related skills

🔌 Embed this skill

Drop this on your blog, docs, or site — it renders a "Run this skill" card:

<div data-pm-skill="ui-design-pipeline"></div>
<script src="https://mohitagw15856.github.io/pm-claude-skills/embed.js" async></script>

💬 Discussion

UI Design Pipeline is one of 1326 open-source professional AI agent skills — all SkillSpec L3. Try them all in the browser · ⭐ Star on GitHub · Browse the full catalog