@didap/ditto

Extract a design system from any URL. Writes DESIGN.md into your project. Includes an MCP server so agents (Claude Code, Cursor, Zed) can invoke extraction directly.

Powered by Ditto — same reverse-engineered CSS pipeline, same credits, no AI tokens needed.

Install

npm i -g @didap/ditto

Requires Node 18+.

Quick start

# 1. Get an API key from https://ditto.didap.it/settings/api-keys
ditto login
# paste your key when prompted

# 2. Extract a design into the current directory
cd my-project/
ditto https://stripe.com
# → writes ./DESIGN.md, charges 100 credits

Commands

| Command | What it does | |---|---| | ditto <url> | Extract the design system, write ./DESIGN.md. | | ditto merge <url1> <url2> ... | Blend 2–10 designs into a single hybrid DESIGN.md. | | ditto list | List designs in your Ditto library. | | ditto view <slug> | Dump a saved DESIGN.md to stdout (or --out). | | ditto login [--key KEY] | Save an API key to ~/.ditto/config.json. | | ditto logout | Remove the stored key. | | ditto whoami | Show user + remaining credits. | | ditto help | Full usage info. |

Merge (hybrid blend)

ditto merge https://stripe.com https://linear.app https://vercel.com
# → extracts each site, auto-detects its mood, blends with equal weights,
#   writes ./DESIGN.md with the hybrid result.
# Cost: N×100 + 300 credits (3 sites = 600 total).

Custom weights (e.g. Stripe contributes twice as much as the others):

ditto merge stripe.com linear.app vercel.com --weights 2,1,1 --save

ditto <url> flags

• --name "My Brand" — override the design name.
• --out docs/my-brand.md — custom output path (default: ./DESIGN.md).
• --save — also save the design to your Ditto library.
• --base-url https://... — point at a self-hosted Ditto instance.

Environment variables

• DITTO_API_KEY — overrides the config-file key (useful in CI).
• DITTO_BASE_URL — overrides the default endpoint.

MCP server

The package ships a second binary, ditto-mcp, that speaks the Model Context Protocol. Wire it into any MCP-compatible agent:

Claude Code

Add to ~/.claude.json (or project .mcp.json):

{
  "mcpServers": {
    "ditto": {
      "command": "ditto-mcp",
      "env": {
        "DITTO_API_KEY": "ditto_live_..."
      }
    }
  }
}

Then in Claude Code: /mcp → enable ditto, and ask the agent to "extract the design from stripe.com using ditto". The agent gets the DESIGN.md directly into the conversation and can use it as context for building your UI.

Cursor / Zed

Same pattern — those editors also accept MCP servers via stdio. Point them at the ditto-mcp binary.

Tools exposed

• extract_design(url, name?, save?) — returns the DESIGN.md markdown.
• whoami() — returns user email, plan, remaining credits.

How it works

1. The CLI and MCP server are thin HTTP clients. All the Puppeteer work runs on Ditto's servers.
2. Each ditto <url> call hits POST /api/extract/md at ditto.didap.it with your API key.
3. 100 credits get deducted per successful extraction (same as the web UI).
4. If the target site is WAF-protected, Ditto automatically retries via a residential proxy — you don't notice, but the first "special" extraction of each month is free and the rest cost +100 extra credits.

Security

• API keys are stored at ~/.ditto/config.json with file mode 0600 (user-only).
• Raw keys are never sent back to the server after creation — only SHA-256 hashes are stored on the Ditto backend.
• Revoke a lost key anytime from ditto.didap.it/settings/api-keys.

Troubleshooting

no API key configured → Run ditto login or export DITTO_API_KEY.

Insufficient credits → Top up at ditto.didap.it/pricing.

Site protected — proxy fallback failed → The target site blocks even residential proxies. Use the browser bookmarklet at ditto.didap.it/add.

CLI hangs? → Extractions typically take 10–30s. The server's maxDuration is 120s; if you see longer, the target site may be unreachable.

License

MIT