skill

design-pipeline-skill

Claude Code skill: 5-stage research-driven design pipeline with human feedback gates. Combines web research, SuperDesign, and Stitch Loop.

Eskapeum/design-pipeline-skillcommunitylistedunreviewed

Use skill

Set up

Skills are installed by placing their folder where your agent loads skills.

Download ZIP from GitHub Open the repository

The download comes from github.com/Eskapeum/design-pipeline-skill itself, not from our server, so what you get is exactly what its author published.

Install instructions come from the README

Skills do not use an MCP config. Follow the steps in the README below.

README

synced Oct 22, 2026

Design Pipeline — Claude Code Skill

A 5-stage design pipeline skill for Claude Code that produces world-class screen designs through research-driven exploration with human feedback gates at every stage.

What It Does

Combines three tools into one structured workflow:

Web Research — Finds 4 real-world inspiration references for each screen
SuperDesign — AI-powered design exploration and iteration
Stitch Loop — Production HTML generation from approved designs

Every stage has a human feedback gate — the pipeline never auto-advances. You stay in control of every design decision.

The Pipeline

RESEARCH → Gate 1 → EXPLORE → Gate 2 → ITERATE → Gate 3 → GENERATE → Gate 4 → INTEGRATE → Gate 5

Stage	What Happens	Gate Question
1. Research	Find 4 inspiration references	"Are these the right references?"
2. Explore	Create first design draft	"Is this the right direction?"
3. Iterate	Generate 2 variations	"Which design wins?"
4. Generate	Convert to production HTML	"Does the HTML match the design?"
5. Integrate	Add to site, wire navigation	"Ready to ship?"

Feedback Dimensions

At every gate, designs are reviewed on 5 dimensions:

LAYOUT — Structure, spacing, hierarchy, flow
COLOUR — Contrast, mood, brand alignment
TYPOGRAPHY — Readability, impact, font choices
VIBE — Energy, polish, "wow" factor
CONTENT — Completeness, relevance

Installation

Option 1: Global skill (all projects)

mkdir -p ~/.claude/skills/design-pipeline
cp SKILL.md ~/.claude/skills/design-pipeline/SKILL.md

Option 2: Project-level skill

mkdir -p .claude/skills/design-pipeline
cp SKILL.md .claude/skills/design-pipeline/SKILL.md

Prerequisites

Claude Code installed
SuperDesign CLI installed (superdesign --version)
Stitch MCP server available
.superdesign/init/ context files populated
DESIGN.md with your design system
SITE.md with your sitemap roadmap

Usage

In Claude Code, trigger the skill by saying:

"design this page"
"create a mockup for the dashboard"
"visual design for the hero section"
"design the UI for the calculator"

Or invoke directly:

/design-pipeline

How It Works

The skill enforces a structured creative process:

Never design from memory — Always starts with real-world research
Direction before details — Gate 2 checks direction before investing in variations
Human picks the winner — Gate 3 presents options, you choose (or hybrid)
Fidelity matters — Gate 4 ensures production HTML matches the approved design
Context-aware integration — Gate 5 checks the screen works within the full site

Feedback Logging

All decisions are logged to .superdesign/feedback/{screen-name}.md, enabling:

Pattern detection across screens (e.g., "user always prefers darker variants")
Design system refinement based on recurring feedback
Session continuity when designing across multiple conversations

License

MIT