Anthropic launched Claude Design on April 17, 2026, a conversational tool designed for producing prototypes, slides, and marketing collateral. Its workflow incorporates a design-system import step, a refinement loop, and concludes with a Claude Code handoff bundle.
Just three days later, we shipped open-claude-design, an open-source replica implemented as a built-in Atomic workflow. This project replicated the core functionality through five deterministic phases, porting the same pipeline across three different coding agents: Claude Agent SDK, Copilot CLI, and opencode. Each provider required approximately 500 lines of TypeScript orchestration. The full source code is available at src/sdk/workflows/builtin/open-claude-design.
Crucially, our approach did not involve rebuilding Claude Code itself. Instead, we constructed a thin harness around it. This distinction is central to understanding the project's innovation.
The Underlying Pipeline
While Claude Design's user experience is conversational, its foundation is a structured pipeline. We reverse-engineered its phases from the official announcement and partner testimonials, such as the observation that a process was reduced from "20+ prompts to 2 prompts," indicating a deterministic skeleton beneath the chat interface.
The pipeline flow consists of five distinct phases:
- Phase 1: Design System Onboarding: Involves parallel headless fan-out coupled with Human-in-the-Loop (HIL) approval.
- Phase 2: Import: Captures data from URLs, files, or codebases, executed in a headless manner.
- Phase 3: Generation: Produces the first design version, which is visible to the user.
- Phase 4: Refinement Loop: Consists of up to five iterations, integrating HIL and parallel critique. This loop either recurses for further refinement or proceeds to the next phase upon approval or a "ship it" signal.
- Phase 5: Export + Handoff: Generates the final output, compatible with Claude Code, Copilot CLI, or opencode.
Headless stages (e.g., Phase 1 and 2) leveraging the Claude provider execute on the Sonnet model with bypassPermissions for efficiency and cost-effectiveness, as the Agent SDK allows per-stage model pinning. However, Copilot CLI and opencode providers do not expose this control, so their headless stages inherit the orchestrator model used to invoke the workflow. Visible stages (e.g., Phase 3 and 4) consistently inherit the Opus orchestrator model across all three providers and are presented to the user. The refinement loop is a bounded HIL cycle with an early exit mechanism triggered by completion signal phrases such as "approved," "ship it," or "done."
Within Phase 4, the quality of refinement is driven by pairing two critical tools: expert skill for creative passes (focusing on taste, hierarchy, and distinctive aesthetics over generic AI defaults), and the Playwright CLI to capture screenshots of the rendered output. This allows a critique sub-agent to inspect what was actually shipped, not merely what the model perceived was shipped. This visual grounding, combined with structured critique, closes the loop that a text-only refinement would leave open, enabling the agent to identify its own mistakes rather than hallucinating past them. The full topology, including the three parallel codebase-analysis sub-agents in Phase 1 and the parallel critique with screenshot validation in Phase 4, is detailed in the workflow source.
The Workflow SDK: The Core Innovation
The entire trick behind this rapid replication lies in the workflow SDK. Below is a trimmed version of the Claude provider implementation for Phase 1, demonstrating the parallel fan-out (specific code omitted as per original article's truncation).
