workflow-design

name

workflow-design

description

Run the full design pipeline for a brand or one-off artifact — design-plan (strategy) → design-system (tokens + showcase) → an artifact skill (linkedin / blog-hero / etc.) → screenshot-html (PNG export). Use when the user says "design a brand", "I need the full design system + assets", "set up a new brand from scratch", "design pipeline for X", or when starting visual work on a brand that has no DESIGN.md yet. Do NOT use when the brand already exists and you just need one artifact — call the artifact skill directly.

Skill: /workflow-design

Orchestrates the four-stage design pipeline. Replaces the "which design skill comes first" question with a single invocation.

When to use

• Brand has no ./design/<slug>/DESIGN.md yet AND user wants one or more artifacts.
• User explicitly asks for "the full pipeline" / "set up the brand from scratch".

When NOT to use

• Brand already has a design system; just need one artifact → call the artifact skill directly.
• User wants to iterate on existing tokens → call design-system directly.

Steps

Step name	Stage	Invokes
plan	Strategic intent	design-plan
system	Token system	design-system
artifacts	Artifact generation	design-<artifact> (varies)
screenshots	PNG export	screenshot-html

Stage 1: Strategic intent — step plan — invokes design-plan

Asks the brand-strategy questions (audience, voice, hard NOs, mood references) and writes ./design/<slug>/DESIGN-PLAN.md.

Output: ./design/<slug>/DESIGN-PLAN.md exists. Checkpoint: confirm DESIGN-PLAN.md before generating tokens.

Stage 2: Token system — step system — invokes design-system

Reads DESIGN-PLAN.md and produces DESIGN.md (Google design.md spec format), tokens.css, and showcase.html.

Output: three files in ./design/<slug>/. Checkpoint: confirm showcase.html renders correctly in a browser before generating any artifacts.

Stage 3: Artifact generation — step artifacts — invokes the artifact skill the user named

Asks: "Which artifact(s) do you want to generate? (linkedin-post / instagram-post / blog-hero / quote-card / business-card / podcast-cover / youtube-thumbnail / twitter-card / newsletter-header / talk-slide / speaker-bio-card / twitch-panels / obs-alert-overlay / obs-scene-pack / stream-overlay / link-in-bio / landing-page / ui-components / carousel-slide / youtube-channel-art / audit-report)"

For each chosen artifact, invokes the matching design-<artifact> skill with the brand slug. Produces an HTML file in ./design/<slug>/artifacts/.

Output: one or more .html files in artifacts/. Checkpoint: confirm artifacts before screenshotting.

Stage 4: PNG export — step screenshots — invokes screenshot-html

Runs the screenshot-html script against ./design/<slug>/artifacts with output to ./design/<slug>/screenshots.

Output: PNG files matching the artifact set.

Resume protocol

Default: run plan → system → artifacts → screenshots in order, with checkpoints between each.

--resume-from <step>: skip every step before <step> and begin from <step>. The named step itself runs.

If <step> is not in {plan, system, artifacts, screenshots}, print:

Invalid resume-from step: <step>
Valid steps: plan, system, artifacts, screenshots

…and stop.

Required state when resuming

Before running the resume step, confirm the listed inputs exist. If anything is missing, prompt the user for it (paste, file path, or re-run from an earlier step).

• --resume-from plan — same as a fresh run; needs only the brand slug.
• --resume-from system — needs ./design/<slug>/DESIGN-PLAN.md. If absent, ask the user to paste the plan or run from plan.
• --resume-from artifacts — needs ./design/<slug>/DESIGN.md, ./design/<slug>/tokens.css, and ./design/<slug>/showcase.html. Ask the user which artifact(s) to generate before proceeding.
• --resume-from screenshots — needs at least one .html file in ./design/<slug>/artifacts/. List the files found and confirm before screenshotting.

Examples:

/workflow-design --resume-from system     # already have a DESIGN-PLAN.md, generate tokens
/workflow-design --resume-from artifacts  # tokens look good, generate the LinkedIn post
/workflow-design --resume-from screenshots --no-pause  # batch the PNG export

Other flags

• --skip <step> to skip a step (e.g. --skip screenshots if user only wants HTML).
• --no-pause to run end-to-end without checkpoints.

Failure handling

If any stage errors, stop and print: which step failed, the underlying skill's error, and the resume command (/workflow-design --resume-from <step>).