/design-ship

name: design-ship
license: MIT
compatibility: "Claude Code 2.1.277+. Requires: design-import skill, claude-design-orchestrator agent. Composes: cover, expect, create-pr."
description: "Turns a claude.ai/design link into a PR: design-import, then cover, then expect, then open the PR. Use when a design should come back as a PR. For files on disk only, use design-import."
argument-hint: "<handoff-url | path-to-bundle.json>"
context: fork
# user-typed commands stay interactive; CC >= 2.1.218 backgrounds forks by default (#3093)
background: false
user-invocable: true
effort: high
model: sonnet
agent: claude-design-orchestrator
allowed-tools: "Read Write Edit Glob Grep Bash WebFetch AskUserQuestion Agent TaskCreate TaskUpdate TaskList"
skills:
  - design-import
  - cover
  - expect
  - remember
  - memory
metadata:
  category: workflow-automation
  version: "1.0.0"
  author: "OrchestKit"
  complexity: "complex"
  tags: "claude-design, design-ship, end-to-end, pr, handoff, ship-it, frontend"
triggers:
  keywords: ["design ship", "design to pr", "ship claude design", "handoff to pr", "design-ship"]
  examples:
    - "ship this Claude Design handoff: https://claude.ai/design/abc123"
    - "design URL in, PR out"
    - "design-ship /tmp/handoff.json"
  anti-triggers: [import only, scaffold only, brainstorm]
paths:
  - "src/components/**/*.{tsx,css}"
  - "**/*.stories.{ts,tsx}"
  - "tests/e2e/**"
  - ".claude/design-handoffs/**"

Design Ship

One command: Claude Design handoff URL → reviewable GitHub PR.

design-ship https://claude.ai/design/abc123     # From handoff URL
design-ship /tmp/handoff-bundle.json            # From local file

> **Standalone Claude Design closes by 2026-12-14** (CC 2.1.302 adds this notice to `/design-sync` and `/design-login`). After that date a `claude.ai/design` handoff URL may stop resolving. Export the bundle to a local file now and pass the file path, which this skill accepts.

When to use

You have a Claude Design handoff URL (or file) and want a PR opened against the current branch. No intermediate steps, no manual test generation, no manual PR drafting.

For just-the-import (no tests, no PR), use `design-import` instead.

Pipeline

Handoff bundle (URL or file)
  │
  ▼
┌──────────────────────────────┐
│ 1. design-import         │  Scaffold components, write provenance
│    (delegates to orchestrator │  Tokens reconciled
│     for parse + dedup)        │  Components written or reused
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ 2. cover                 │  Storybook stories per new component
│    (Storybook + Playwright)   │  Playwright E2E for new routes/views
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ 3. expect                │  Diff-aware browser verification
│    (CDP + ARIA-tree-first)    │  Screenshots saved for PR body
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ 4. create-pr             │  PR opened with:
│                               │   - Bundle source link
│                               │   - Before/after screenshots
│                               │   - Component scaffold list
│                               │   - Coverage delta
│                               │   - Label: claude-design
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ 5. UPDATE PROVENANCE          │  Patch .claude/design-handoffs/<id>.json
│                               │  with the opened PR number + URL
└──────────────────────────────┘

Pre-flight

Before starting the pipeline, verify the working tree is clean enough to ship:

status = Bash("git status --porcelain")
if status:
    AskUserQuestion(questions=[{
      "question": "Working tree has uncommitted changes. How to proceed?",
      "header": "Pre-flight",
      "options": [
        {"label": "Commit them first", "description": "Run commit, then proceed with ship"},
        {"label": "Stash and restore", "description": "Stash now, restore after PR opens"},
        {"label": "Include in this PR", "description": "Risky — only if changes are related"},
        {"label": "Cancel", "description": "Abort design-ship"}
      ],
      "multiSelect": False
    }])

current_branch = Bash("git branch --show-current")
if current_branch in ("main", "master", "dev"):
    AskUserQuestion(questions=[{
      "question": f"You're on {current_branch}. Create a feature branch?",
      "header": "Branch",
      "options": [
        {"label": "Yes — feat/design-ship-<bundle-id>", "description": "Recommended"},
        {"label": "Cancel", "description": "Switch branch yourself first"}
      ],
      "multiSelect": False
    }])

Phase 1 — Import

Set `bundle_source` from the argument first, so Phase 4 can link it for either input:

• URL input: `bundle_source` is the handoff URL as given.
• Local file input: `bundle_source` is the source URL the bundle file records, else the file path.

Delegate to `design-import` with the bundle argument. Capture its output (the import manifest): it includes the bundle_id, list of components written, and the provenance file path.

If import fails, **stop**. Do NOT proceed to test generation against partially-imported components.

Phase 2 — Cover

Run `cover` scoped to the components written by phase 1:

component_paths = [c["path"] for c in import_result["components"] if c["decision"] != "reuse"]

Agent(
  subagent_type="ork:test-generator",
  description="Cover the freshly-imported components",
  prompt=f"""Use the cover skill to generate tests for these components (scoped — do not regenerate suites for unrelated files):
  {component_paths}

  Tiers needed:
  - Storybook stories per component (mandatory)
  - Playwright E2E if any new route was registered (check src/app or src/pages)
  - Unit tests if the components include non-trivial logic (skip for pure-p