Pipeline Gallery

Real examples of the /ork:design-to-code pipeline transforming inputs into production components.

Every entry below was produced by OrchestKit's three-stage pipeline: Extract (Stitch MCP) → Match (21st.dev) → Adapt (project tokens).

Input (url)

https://yonatangross.dev

Extract

Extracted 8 colors (oklch), Geist font family, 4xl-6xl type scale, gradient mesh + orb background pattern, dual CTA layout

Match

Codehagen/hero from 21st.dev — 98% match. Framer Motion stagger animations, HeroBadge component, configurable props.

Adapt

Mapped to Circuit Forge tokens (oklch), replaced generic colors with --color-fd-primary ramp, added blur-3xl orb background, responsive text scale

stitch-mcp21st-dev-magicheroanimationreactframer-motion

Input (url)

https://orchestkit.vercel.app

Extract

Extracted design DNA from Vercel, Stripe, Linear docs. Identified gaps: 3 surfaces (needed 5), no color ramp, hex-only values.

Match

No component match needed — this was a token-level evolution. Used competitive analysis from 3 sites.

Adapt

Converted all 34 fd-* tokens to oklch, added surface-sunken/surface-raised, created primary/5 through primary/50 ramp, added glow + animation tokens

stitch-mcpdesign-tokensoklchcsstheme

Input (description)

Animated number counter bar showing 92 Skills, 33 Agents, 101 Hooks with circuit board aesthetic

Extract

Analyzed existing stat bar: font-mono, 40px, tabular-nums, circuit-dot pulse animation, static line connectors.

Match

21st.dev 'animated number counter' category — spring physics count-up, scroll-trigger, responsive grid.

Adapt

Added animate-count-up keyframe with translateY(12px), stagger-1/2/3 delays, kept circuit-dot pulse, used --ease-out-expo curve

21st-dev-magicanimationcounterstatscss

Built from

expandable-card21st.dev step-indicator21st.dev

Design tokens

fd-primary-10fd-primary-20fd-surface-sunkenfd-glowfd-muted

Fork this component

How It Works

Screenshot / Description / URL
  │
  ├── Stage 1: EXTRACT ──── Stitch MCP analyzes design context
  │   Colors, typography, spacing, component structure
  │
  ├── Stage 2: MATCH ────── 21st.dev searches 284+ hero components
  │   Finds production-ready React matches
  │
  └── Stage 3: ADAPT ────── Merges with project design tokens
      oklch colors, Tailwind utilities, TypeScript types

Try It Yourself

# Extract design DNA from any site
/ork:design-context-extract https://your-app.com

# Search for components
/ork:component-search animated pricing table

# Full pipeline
/ork:design-to-code screenshot of hero section

Submit Your Own

Built something with the pipeline? Submit a before/after pair:

Run /ork:design-to-code on your input
Screenshot the before (input) and after (output)
Open a PR adding your entry to docs/site/lib/generated/pipeline-gallery-data.ts

Every submission gets reviewed and added with attribution.

Pipeline Gallery

Pipeline Gallery

Portfolio Hero Redesign

Circuit Forge Token Migration

Animated Stat Counter Bar

How It Works

Try It Yourself

Submit Your Own

On this page

Portfolio Hero Redesign

Circuit Forge Token Migration

Animated Stat Counter Bar