Guide · Install a Claude Code skill

Drop the Design Agent into your Claude Code in five minutes.

A 5-phase pipeline that walks you from inspiration to shipped landing page — the same one we run internally at ColdIQ. Ships as a single Markdown file you drop in ~/.claude/commands/. Free. Hackable. Fork it for your own workflows.

11 steps · ~5 min core installClaude Code · macOS / Linux / WSLMIT — fork freely

What you will get

One slash command. Five phases. A shippable page.

01 · Trigger

Type /design-agent

Pop it open from any Claude Code session. Pass a one-liner like "B2B SaaS for cold email" and it skips straight to discovery.

02 · Pipeline

Five guided phases

Inspiration → Visual generation → Site build → Polish (micro-interactions) → Ship. The agent picks tools and writes the prompts for you.

03 · Output

A top-1% landing page

Cleaned visuals, hero animation, Lottie micro-interactions, recorded demo, ready-to-post caption. 2-3 hours end-to-end.

Preview · what shows up when you run /design-agent

terminal

> /design-agent

██████╗ ███████╗███████╗██╗ ██████╗ ███╗   ██╗
██╔══██╗██╔════╝██╔════╝██║██╔════╝ ████╗  ██║
██║  ██║█████╗  ███████╗██║██║  ███╗██╔██╗ ██║
██║  ██║██╔══╝  ╚════██║██║██║   ██║██║╚██╗██║
██████╔╝███████╗███████║██║╚██████╔╝██║ ╚████║
╚═════╝ ╚══════╝╚══════╝╚═╝ ╚═════╝ ╚═╝  ╚═══╝

╭─────────────────────────────────────────────╮
│  AI Design Pipeline · v2.0 · API-first      │
│  5 phases · ships top-1% output             │
╰─────────────────────────────────────────────╯

DESIGN AGENT online. I'll walk you through 5 phases.
Stop at any time and I resume where we left off.

What are you building? Give me 1–3 sentences:
· product or project name
· what it does, in plain language
· who it's for and the problem it solves

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
PHASE 1 / 5 · INSPIRATION                15 min
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

Prerequisites

What you need before you start

01 · Runtime

Claude Code installed

Install via the official one-liner or `npm i -g @anthropic-ai/claude-code`. Works on macOS, Linux, and Windows (WSL).

02 · Plan

Claude Pro / Max

The agent runs on Claude Sonnet 4.6 and Phase 3 hands off to claude.ai/design — both ship with Pro/Max. An Anthropic API key with credits also works for the Sonnet calls.

03 · Optional power-ups

Phase 2 APIs + Phase 4 Lottie

Steps 5–7 wire up Gemini & Kling for direct API gen, ffmpeg for watermark cleanup, and the LottieFiles MCP for micro-interactions. Skip them and the agent falls back to web tools — works, just more clicks.

Unlock the full guide

Enter your work email to read the rest of the tutorial.

11 steps, ~5-min core install. Use a professional address — we filter out free inboxes. Unlocks in your browser, so you only do this once.

Step 01

Install Claude Code

If you don't have Claude Code yet, grab it. The slash command we're about to install lives in a folder Claude Code reads at startup, so the order is: Claude Code first, slash command second.

Step 02

Create the commands directory

Claude Code looks for custom slash commands at `~/.claude/commands/`. Each Markdown file in that folder becomes a slash command — `foo.md` becomes `/foo`. The folder may already exist; `mkdir -p` is safe either way.

Unlock above to read the full guide