picasso-claude-design-claude-code-bridge-loop

agent
Security Audit
Fail
Health Pass
  • License รขโ‚ฌโ€ License: MIT
  • Description รขโ‚ฌโ€ Repository has a description
  • Active repo รขโ‚ฌโ€ Last push 0 days ago
  • Community trust รขโ‚ฌโ€ 10 GitHub stars
Code Fail
  • rm -rf รขโ‚ฌโ€ Recursive force deletion command in hooks/pdl-pre-round.sh
  • rm -rf รขโ‚ฌโ€ Recursive force deletion command in scripts/install-oneliner.sh
Permissions Pass
  • Permissions รขโ‚ฌโ€ No dangerous permissions requested
Purpose

This tool acts as an orchestration bridge that connects Claude Code with Claude Design. It automates a closed feedback loop to ensure that generated code matches the intended UI design, using an automated scoring and refinement process until a high fidelity score is achieved.

Security Assessment

The overall security risk is Medium. The tool relies heavily on shell execution by design, acting as an orchestrator that runs development processes. The primary security concern is the presence of recursive force deletion commands (`rm -rf`) found in the installation script (`scripts/install-oneliner.sh`) and a pre-round hook (`hooks/pdl-pre-round.sh`). While often used for standard cleanup during software execution, `rm -rf` is inherently dangerous. Blindly running the provided `curl | bash` installation method gives these scripts immediate root or user-level execution privileges, meaning any malicious `rm -rf` could delete critical system files. No hardcoded secrets were found, and the tool does not request inherently dangerous OAuth permissions, though it inherently makes network requests to interact with Claude APIs.

Quality Assessment

The project appears to be actively maintained with recent repository pushes. It uses the permissive and standard MIT license. However, community trust is currently very low; it only has 10 GitHub stars, suggesting it has not been widely vetted or adopted by the broader developer community yet.

Verdict

Use with caution: although the project is active and actively licensed, the presence of recursive force deletions combined with a `curl | bash` install script and a lack of widespread community vetting warrants a thorough manual review of the shell scripts before executing.
SUMMARY

๐ŸŽจ Picasso Orchestrator: Claude Design ๐Ÿ”„ Claude Code [Bridge Loop] The first gate-scored bidirectional loop between Claude Code and Claude Design. Brief โ†’ Design โ†’ Implement โ†’ Score โ†’ Refine.

README.md

๐ŸŽจ Picasso Orchestrator: Claude Design ๐Ÿ”„ Claude Code [Bridge Loop]

The first gate-scored bidirectional loop between Claude Code and Claude Design.
Brief โ†’ Design โ†’ Implement โ†’ Score โ†’ Refine.


Picasso ยท Claude Design โ†” Claude Code Bridge Loop



GitHub
Visual Docs


Stars
Gate Score
Patterns
License


Claude Code
Claude Design
Karpathy
Modes


Stop guessing if your implementation matches the design. Let the loop prove it.

Picasso connects Claude Code to Claude Design in a closed feedback loop โ€” structured brief in, verified code out, with a mathematically scored fidelity gate between them. No more "looks close enough." Either the score hits 9.0 / 10 or the loop keeps going.


โšก Quick start โ€” 3 steps, 30 seconds

# 01 ยท Install (one-liner โ€” patches ~/.claude automatically)
curl -fsSL https://cdn.jsdelivr.net/gh/RazvanGabrielNiculae/picasso-claude-design-claude-code-bridge-loop@main/scripts/install-oneliner.sh | bash

# 02 ยท Verify everything is wired correctly
picasso-bridge verify --smoke

# 03 ยท Run your first bridge loop
/picasso --design-loop "hero cinematic for B2B SaaS" --scope complex

๐Ÿ’ก Need a guided setup? Add --wizard to the install command. It walks you through gate, max rounds, and hook wiring interactively.


๐Ÿ” How it works

flowchart LR
    A([picasso]) --> B[ASSUMPTIONS] --> C[DESIGN.md] --> D[Claude Design] --> E[Implement] --> F[Render] --> G[Score] --> H{Gate 9.0}
    H -- "โœ…" --> I([APPROVED])
    H -- "๐Ÿ“‰" --> J([STAGNATED])
    H -- "๐Ÿ”„ refine" --> D

    style A fill:#ff2d95,stroke:#ff4fa8,color:#fff
    style B fill:#2a1420,stroke:#ff2d95,color:#ffa2cf
    style C fill:#0d1f2d,stroke:#5ce1ff,color:#8eecff
    style D fill:#0d1f2d,stroke:#5ce1ff,color:#8eecff
    style E fill:#1a1a2e,stroke:#7cf0a0,color:#7cf0a0
    style F fill:#1a1a2e,stroke:#7cf0a0,color:#7cf0a0
    style G fill:#2a2000,stroke:#ffd83d,color:#ffd83d
    style H fill:#2a2000,stroke:#ffd83d,color:#fff59d
    style I fill:#0d2e1a,stroke:#4caf50,color:#7cf0a0
    style J fill:#2e1a0d,stroke:#ff9800,color:#ffb14a
  1. Brief โ†’ Describe your design goal in plain language (/picasso --design-loop "hero for B2B SaaS")
  2. ASSUMPTIONS โ†’ Picasso surfaces inferred tokens as an explicit block before any browser call โ€” you correct inline
  3. DESIGN.md โ†’ Structured 9-section spec is generated: colors ยท typography ยท layout ยท motion ยท responsive ยท accessibility
  4. Claude Design โ†’ Picasso sends a structured prompt, captures the visual proposal via screenshot
  5. Implement โ†’ Zero-context subagent applies only the changed DESIGN.md sections (~200 tok vs 2,000 naive)
  6. Render โ†’ Desktop always ยท mobile only if previous responsive score < 8.0
  7. Score โ†’ Weighted gate: ฮ”E colors (25%) ยท typography (20%) ยท layout (20%) ยท components (15%) ยท motion (10%) ยท responsive (10%)
  8. Gaps โ†’ 3 lines max ยท goal-declared format: current โ†’ target ยท passed to next round
  9. Gate โ†’ score โ‰ฅ 9.0 โ†’ โœ… APPROVED ยท plateau โ†’ STAGNATED ยท else โ†’ refine and repeat from step 4

๐Ÿ“Š By the numbers

Metric Value What it means
๐ŸŽฏ Default gate 9.0 / 10 Weighted fidelity across 6 visual criteria
๐Ÿ”„ Loop modes 5 loop ยท solo ยท critique ยท reference ยท iterate
๐Ÿ“ Steps per round 7 request โ†’ extract โ†’ implement โ†’ render โ†’ score โ†’ gaps โ†’ gate
๐Ÿงฉ Orchestration patterns 9+ Token-aware, stagnation-proof by design
๐Ÿง  Karpathy principles 4 Baked into the conductor โ€” not optional extras
โšก Token savings 3ร— vs. naive full-context loop (zero-context subagent + lazy reads)

๐Ÿ”ง Prerequisites

Tool Version Role
๐Ÿค– Claude Code โ‰ฅ 0.2.0 CLI host โ€” custom commands + subagents + hooks
๐ŸŽจ Claude plan Pro ยท Max ยท Team ยท Enterprise Required for claude.ai/design access
๐ŸŒ Chrome latest Authenticated session on claude.ai
๐Ÿ”Œ chrome-mcp latest MCP browser transport โ€” navigate, click, screenshot
๐Ÿ“ webdesign-mcp latest Scrape tokens ยท render previews ยท compute score
๐Ÿ“ฆ Node โ‰ฅ 18 MCP server runtimes
๐Ÿ› ๏ธ jq ยท bash any Used by hooks and install scripts

๐Ÿ”„ The loop โ€” 7 steps per round

flowchart LR
    S1[Request] --> S2[Extract] --> S3[Implement] --> S4[Render] --> S5[Score] --> S6[Gaps] --> S7{Gate}
    S7 -- "โœ… โ‰ฅ9.0" --> AP([APPROVED])
    S7 -- "๐Ÿ“‰ plateau" --> ST([STAGNATED])
    S7 -- "๐Ÿ”„ retry" --> S1

    style S1 fill:#0d1f2d,stroke:#5ce1ff,color:#8eecff
    style S2 fill:#0d1f2d,stroke:#5ce1ff,color:#8eecff
    style S3 fill:#1a1a2e,stroke:#7cf0a0,color:#7cf0a0
    style S4 fill:#1a1a2e,stroke:#7cf0a0,color:#7cf0a0
    style S5 fill:#2a2000,stroke:#ffd83d,color:#ffd83d
    style S6 fill:#2a2000,stroke:#ffd83d,color:#ffd83d
    style S7 fill:#2a1420,stroke:#ff2d95,color:#ffa2cf
    style AP fill:#0d2e1a,stroke:#4caf50,color:#7cf0a0
    style ST fill:#2e1a0d,stroke:#ff9800,color:#ffb14a
Step Name What happens
01 ๐Ÿ“ก Request browser_batch: navigate โ†’ form_input โ†’ wait โ†’ screenshot(800px) โ†’ get_text
02 ๐Ÿ” Extract scrape_reference with SHA-256 hash cache โ€” skipped entirely if HTML unchanged
03 ๐Ÿ”จ Implement Zero-context subagent. Only changed DESIGN.md sections. ~200 tok vs 2,000 naive.
04 ๐Ÿ“ธ Render Desktop always. Mobile only if previous responsive score < 8.0.
05 ๐ŸŽฏ Score Fast model: ฮ”E colors + grid pixels + token match. Standard: gap synthesis.
06 ๐Ÿ“‹ Gaps 3 lines max ยท goal-declared format: current โ†’ target ยท 15 words each.
07 ๐Ÿšช Gate total โ‰ฅ gate โ†’ โœ… APPROVED ยท plateau โ†’ STAGNATED ยท else โ†’ next round

๐Ÿ—๏ธ Architecture โ€” component map

flowchart LR
    subgraph CC["Claude Code"]
        PC[picasso] --> PDL[pdl-conductor]
        HK[6 hooks] --> PDL
        PDL --> DM["DESIGN.md"]
    end
    subgraph MCP["MCP"]
        CMCP[chrome-mcp]
        WMCP[webdesign-mcp]
    end
    CD[Claude Design]

    PDL --> CMCP --> CD
    CD --> CMCP --> PDL
    PDL --> WMCP

    style CC fill:#1b0d14,stroke:#ff2d95,color:#ffa2cf
    style MCP fill:#0a1520,stroke:#5ce1ff,color:#8eecff
    style PC fill:#2a1420,stroke:#ff2d95,color:#ffa2cf
    style PDL fill:#ff2d95,stroke:#ff4fa8,color:#fff
    style HK fill:#2a1420,stroke:#ff2d95,color:#ffa2cf
    style DM fill:#0d1f2d,stroke:#5ce1ff,color:#8eecff
    style CMCP fill:#0a1520,stroke:#5ce1ff,color:#8eecff
    style WMCP fill:#0a1520,stroke:#5ce1ff,color:#8eecff
    style CD fill:#0d2e1a,stroke:#7cf0a0,color:#7cf0a0
    linkStyle 0 stroke:#ffd83d,stroke-width:2px
    linkStyle 1 stroke:#ffd83d,stroke-width:2px
    linkStyle 2 stroke:#ffd83d,stroke-width:2px
    linkStyle 3 stroke:#ffd83d,stroke-width:2px
    linkStyle 4 stroke:#ffd83d,stroke-width:2px
    linkStyle 5 stroke:#ffd83d,stroke-width:2px
    linkStyle 6 stroke:#ffd83d,stroke-width:2px
    linkStyle 7 stroke:#ffd83d,stroke-width:2px
Tag Component Role
CORE ยท ORCHESTRATOR Claude Code CLI Hosts /picasso, pdl-conductor subagent, six lifecycle hooks
CORE ยท DESIGN SIDE Claude Design (web) Visual proposal engine driven through authenticated browser tab
TRANSPORT chrome-mcp MCP browser transport โ€” navigate, click, type, upload, screenshot
MEASUREMENT webdesign-mcp Extracts tokens, renders candidate previews, returns weighted fidelity score
PROTOCOL Model Context Protocol Wire format for both MCP servers โ€” any MCP client can swap in
CONVENTION DESIGN.md (9 sections) Single-source design contract: colors ยท typography ยท components ยท layout ยท motion ยท depth ยท brand ยท responsive ยท accessibility

๐ŸŽ›๏ธ Modes โ€” 5 ways to use the bridge

flowchart LR
    S([picasso]) --> LOOP[design-loop]
    S --> SOLO[design-solo]
    S --> CRIT[design-critique]
    S --> REF[design-reference]
    S --> SRC[from-site or from-figma]
    LOOP --> AP{APPROVED}
    AP -- "polish" --> ITER[design-iterate]
    AP -- "ship" --> DONE([Done])
    ITER --> DONE

    style S fill:#ff2d95,stroke:#ff4fa8,color:#fff
    style LOOP fill:#0d1f2d,stroke:#5ce1ff,color:#8eecff
    style SOLO fill:#1a1a2e,stroke:#7cf0a0,color:#7cf0a0
    style CRIT fill:#1a1a2e,stroke:#7cf0a0,color:#7cf0a0
    style REF fill:#1a1a2e,stroke:#7cf0a0,color:#7cf0a0
    style SRC fill:#1a1a2e,stroke:#7cf0a0,color:#7cf0a0
    style ITER fill:#2a2000,stroke:#ffd83d,color:#ffd83d
    style AP fill:#2a1420,stroke:#ff2d95,color:#ffa2cf
    style DONE fill:#0d2e1a,stroke:#4caf50,color:#7cf0a0
Flag Name Description Best for
--design-loop ๐Ÿ”„ Loop โญ Full bidirectional loop. Rounds until gate is met. Default mode. Any front-end feature from scratch
--design-solo โšก Solo Single pass: one Claude Design turn โ†’ implement โ†’ stop. Quick exploration / prototypes
--design-critique <path> ๐Ÿ”ฌ Critique Claude Design audits your existing implementation and scores it. Design-debt audit on existing code
--design-reference <url> ๐ŸŒ Reference Reverse-engineer design tokens from any live site. Seeds DESIGN.md. "Make it feel like linear.app"
--design-iterate โœจ Iterate Polish pass after APPROVED. Gate auto-set to prior score + 0.3. Motion + micro-interaction polish

๐Ÿ†• Design source flags (v0.2)

Flag Description When to use
--from-site <url> Extract DESIGN.md tokens from any live site โ†’ seed round-0 "Build something with stripe.com's design system"
--from-figma --figma <key> Use Figma MCP as design source instead of Claude Design You have Figma designs ready
--feedback drawbridge Import Drawbridge browser annotations as pre-populated gaps Designer annotated the preview
--multi-page Enable SITE.md cross-page consistency contract Multi-page sites
# Seed from live site (no Claude Design Pro needed for the design foundation)
/picasso --from-site https://stripe.com "pricing page for fintech"

# Use Figma as source
/picasso --from-figma --figma ABC123xyz "implement hero from Figma"

# Include designer browser annotations in the loop
/picasso --design-loop --feedback drawbridge "hero for B2B SaaS"

# Multi-page site with cross-page consistency
/picasso --design-loop --multi-page --scope mega "5-page marketing site"

๐Ÿ“ Scope presets โ€” complexity-based auto-routing

Scope Gate Rounds Fallback manual Example
--scope simple 8.0 3 no pricing toggle
--scope medium 8.5 5 no pricing section
--scope complex 9.0 7 yes full landing page
--scope mega 9.0 10 yes 5-page site
/picasso --design-loop "hero cinematic for a B2B SaaS, dark elite"
/picasso --design-solo "sticky promo banner, warm palette"
/picasso --design-critique ./src/components/hero
/picasso --design-reference https://linear.app
/picasso --design-iterate "tighten motion choreography"
/picasso --scope complex "full marketing landing"

๐Ÿ† Gate scoring โ€” mathematically verified fidelity

pie title Gate Score Weights
    "Colors - ฮ”E CIE2000" : 25
    "Typography" : 20
    "Layout and Spacing" : 20
    "Components" : 15
    "Motion" : 10
    "Responsive" : 10
Criterion Weight How it's measured
๐ŸŽจ Colors 25% ฮ”E CIE2000 palette comparison per design token
๐Ÿ”ค Typography 20% Font family ยท scale ratio ยท weight ยท line-height
๐Ÿ“ Layout & spacing 20% Grid alignment ยท margin/padding ยท ยฑ2px tolerance
๐Ÿงฉ Components 15% Structural match: presence, hierarchy, nesting
๐ŸŽฌ Motion 10% Duration ยท easing ยท transition type
๐Ÿ“ฑ Responsive 10% 8 breakpoints tested: 320px โ†’ 1920px

๐ŸŽฏ Default gate: 9.0 / 10. Raise to 9.5 for critical landings (increases stagnation risk). Lower to 8.5 for fast prototypes.


๐Ÿง  Context backpressure โ€” graceful degradation, never silent failure

The loop degrades gracefully as context fills. It never crashes silently โ€” it checkpoints and exits PAUSED so you can resume in a fresh session.

flowchart LR
    N([NORMAL]) -- "60pct" --> W([WARN]) -- "75pct" --> D([DEGRADE]) -- "85pct" --> SW([SWITCH]) -- "95pct" --> P([PAUSED])

    style N fill:#0d2e1a,stroke:#4caf50,color:#7cf0a0
    style W fill:#2a2000,stroke:#ffd83d,color:#ffd83d
    style D fill:#2a1800,stroke:#ff9800,color:#ffb14a
    style SW fill:#2e0d0d,stroke:#f44336,color:#ff8a80
    style P fill:#1a1a2e,stroke:#7cf0a0,color:#7cf0a0
Context used State What happens
< 60% โœ… NORMAL All steps enabled โ€” full fidelity
60โ€“75% โš ๏ธ WARN Skip mobile render if responsive โ‰ฅ 8.5
75โ€“85% ๐Ÿ”ถ DEGRADE Cache-only extraction ยท lazy section reads
85โ€“95% ๐Ÿ”ด SWITCH Fast model everywhere ยท 2-line gaps max
> 95% ๐Ÿ’พ PAUSED checkpoint.json saved โ†’ exit โ†’ resumable next session

๐Ÿงฌ Four Karpathy principles โ€” baked into every round

Not guidelines. Mechanisms. Every one maps to a concrete component in the conductor.
Inspired by Andrej Karpathy's public notes on LLM coding pitfalls โ€” specifically his observations on silent assumptions, minimal code, surgical edits, and goal-declared targets.

flowchart LR
    K1[Think First] --> K2[Simplicity] --> K3[Surgical Edits] --> K4[Goal-Led State]

    style K1 fill:#2a1420,stroke:#ff2d95,color:#ffa2cf
    style K2 fill:#0d1f2d,stroke:#5ce1ff,color:#8eecff
    style K3 fill:#1a1a2e,stroke:#7cf0a0,color:#7cf0a0
    style K4 fill:#2a2000,stroke:#ffd83d,color:#ffd83d
    linkStyle 0 stroke:#ffd83d,stroke-width:2px
    linkStyle 1 stroke:#ffd83d,stroke-width:2px
    linkStyle 2 stroke:#ffd83d,stroke-width:2px
# Principle What the loop does
01 ๐Ÿค” Think First Inferred tokens surface as an explicit ASSUMPTIONS: block before the first browser call. You correct inline โ€” zero silent assumptions. โ†’ ASSUMPTIONS: colors ยท typography ยท components ยท brand
02 ๐Ÿชถ Simplicity The implementation subagent is hard-constrained: minimum code to close the gap. No refactors. No speculative features. No drive-by cleanups. โ†’ CONSTRAINTS: no refactor ยท no new features ยท no noise
03 ๐Ÿ”ฌ Surgical Edits Subagent touches only files tied to changed DESIGN.md sections. sha256 idempotency check blocks spurious git diffs. โ†’ idempotent writes ยท changed sections only
04 ๐ŸŽฏ Goal-Led State Gaps are state declarations, not imperatives. The gate score is the objective function. โ†’ motion: 400ms โ†’ 600ms not "increase duration"

๐Ÿงฉ Nine orchestration patterns

Every pattern exists to solve a specific failure mode in naive "loop and hope" approaches.

flowchart TD
    subgraph TOK["Token Efficiency"]
        direction LR
        P01[Structured] --> P04[Lazy reads] --> P05[Model route] --> P06[Adaptive] --> P07[Zero-ctx]
    end
    subgraph DED["Dedup and Cache"]
        direction LR
        P02[Hash cache] --> P03[Fingerprint] --> P08[Idempotent]
    end
    subgraph RES["Resilience"]
        direction LR
        P09[Backpressure]
    end

    style P01 fill:#0d1f2d,stroke:#5ce1ff,color:#8eecff
    style P04 fill:#0d1f2d,stroke:#5ce1ff,color:#8eecff
    style P05 fill:#0d1f2d,stroke:#5ce1ff,color:#8eecff
    style P06 fill:#0d1f2d,stroke:#5ce1ff,color:#8eecff
    style P07 fill:#0d1f2d,stroke:#5ce1ff,color:#8eecff
    style P02 fill:#2a1420,stroke:#ff2d95,color:#ffa2cf
    style P03 fill:#2a1420,stroke:#ff2d95,color:#ffa2cf
    style P08 fill:#2a1420,stroke:#ff2d95,color:#ffa2cf
    style P09 fill:#0d2e1a,stroke:#7cf0a0,color:#7cf0a0
    linkStyle 0 stroke:#ffd83d,stroke-width:1.5px
    linkStyle 1 stroke:#ffd83d,stroke-width:1.5px
    linkStyle 2 stroke:#ffd83d,stroke-width:1.5px
    linkStyle 3 stroke:#ffd83d,stroke-width:1.5px
    linkStyle 4 stroke:#ffd83d,stroke-width:1.5px
    linkStyle 5 stroke:#ffd83d,stroke-width:1.5px
# Pattern Problem it solves Impact
01 ๐Ÿ“ Structured prompts Prose prompts are verbose and inconsistent 5ร— compression on Round-N prompts
02 #๏ธโƒฃ Content-hash cache scrape_reference called even on identical output Saves 1 MCP call/round on average
03 ๐Ÿ” Fingerprint dedup Same visual output, different HTML โ†’ infinite loop Instant STAGNATED exit โ€” no wasted rounds
04 ๐Ÿ“– Lazy section reads Reading all 9 DESIGN.md sections every round ~50 tok vs 450 tok after round 1
05 ๐Ÿšฆ Model routing Large model used for simple arithmetic scoring ~40% cost reduction per round
06 ๐Ÿ“ฑ Adaptive rendering Mobile render every round even when stable Saves 1 render call in most rounds after round 2
07 ๐Ÿงน Zero-context subagent Implementer inherits full 2,000 tok loop history ~200 tok vs ~2,000 tok โ€” 10ร— cleaner context
08 โœ… Idempotency check Files re-written with no actual change โ†’ git noise Clean diffs โ€” unchanged files never touched
09 ๐Ÿ›ก๏ธ Context backpressure Loop crashes or degrades silently at context limit Resumable sessions via checkpoint

๐Ÿช Lifecycle hooks โ€” full control over every event

Six hooks. Drop them in ~/.claude/hooks/. Edit a stub to activate. Delete to disable.

flowchart LR
    AD([autodetect]) --> PRE[pre-round] --> LOOP([round]) --> POST[post-round]
    LOOP -- plateau --> STAG[stagnation]
    LOOP -- pass --> APP[approved]
    LOOP -- fail --> FAIL[failed]

    style AD fill:#2a1420,stroke:#ff2d95,color:#ffa2cf
    style PRE fill:#0d1f2d,stroke:#5ce1ff,color:#8eecff
    style LOOP fill:#ff2d95,stroke:#ff4fa8,color:#fff
    style POST fill:#0d1f2d,stroke:#5ce1ff,color:#8eecff
    style STAG fill:#2a2000,stroke:#ffd83d,color:#ffd83d
    style APP fill:#0d2e1a,stroke:#4caf50,color:#7cf0a0
    style FAIL fill:#2e0d0d,stroke:#f44336,color:#ff8a80
Hook Fires on What it does
pdl-autodetect ๐Ÿ”” UserPromptSubmit Detects handoff phrases ("claude.ai/design", "export") and auto-suggests /picasso
pdl-pre-round โฑ๏ธ Pre-round Budget guard โ€” aborts if .pdl/ > 50 MB or remaining budget < round estimate
pdl-post-round ๐Ÿ“Š Post-round Cache report + economy.jsonl append ยท exit 2 = force APPROVED ยท exit 3 = force abort
pdl-stagnation ๐Ÿ“‰ Stagnation Customizable โ€” lower gate, switch mode, or send alert on score plateau
pdl-approved โœ… Approved Customizable โ€” auto-commit, open PR, send Slack/Discord notification
pdl-failed โŒ Failed Customizable โ€” alert, cleanup, save trajectory log for post-mortem

See docs/HOOKS.md for full reference.


๐Ÿ“ฆ Install

One-liner (macOS / Linux / WSL / Git-Bash)

curl -fsSL https://cdn.jsdelivr.net/gh/RazvanGabrielNiculae/picasso-claude-design-claude-code-bridge-loop@main/scripts/install-oneliner.sh | bash

Wizard mode (prompts for gate, rounds, hook wiring):

... | bash -s -- --wizard

Manual clone

git clone https://github.com/RazvanGabrielNiculae/picasso-claude-design-claude-code-bridge-loop.git
cd picasso-claude-design-claude-code-bridge-loop
bash scripts/install.sh --wizard
bash scripts/verify.sh --smoke

Windows (PowerShell)

git clone https://github.com/RazvanGabrielNiculae/picasso-claude-design-claude-code-bridge-loop.git
cd picasso-claude-design-claude-code-bridge-loop
pwsh -File scripts\install.ps1
pwsh -File scripts\verify.ps1

The installer patches ~/.claude/settings.json automatically (timestamped backup). Use --no-hook to skip auto-wiring.


๐Ÿ“ Output structure

.pdl/
โ”œโ”€โ”€ round-0/
โ”‚   โ”œโ”€โ”€ DESIGN.md        โ† inferred tokens + ASSUMPTIONS block
โ”‚   โ””โ”€โ”€ prompt.md        โ† Round-0 brief (~250 tok)
โ”œโ”€โ”€ round-1/
โ”‚   โ”œโ”€โ”€ prompt.md        โ† Round-N delta (~100 tok)
โ”‚   โ”œโ”€โ”€ design-output.png
โ”‚   โ”œโ”€โ”€ tokens.json
โ”‚   โ”œโ”€โ”€ impl-desktop.png
โ”‚   โ”œโ”€โ”€ impl-mobile.png  โ† only if responsive < 8.0
โ”‚   โ”œโ”€โ”€ score.json
โ”‚   โ””โ”€โ”€ gaps.md
โ””โ”€โ”€ APPROVED.md          โ† or FAILED.md

๐Ÿšฆ Exit codes

Code Meaning
โœ… APPROVED score โ‰ฅ gate โ€” code implemented, .pdl/APPROVED.md written
๐Ÿ“‰ STAGNATED 2 rounds without progress, or fingerprint dedup match
๐Ÿ”š EXHAUSTED rounds_max reached without hitting gate
โ›” EARLY_ABORT trajectory analysis: gate mathematically unreachable
๐Ÿ’พ PAUSED context > 95% โ€” checkpoint saved, resumable in new session
๐Ÿ”’ BLOCKED prerequisite missing (Chrome MCP / Claude Design / plan)
โŒ ERROR technical failure โ€” see .pdl/error.log

๐Ÿ”Œ Companion tools

Picasso handles the loop. These tools extend it at the input, feedback, and scale layers.

Tool Layer What it adds
bergside/design-md-chrome โญ542 Input Extract DESIGN.md from any live site โ†’ --from-site
Figma MCP Input Figma designs as design source โ†’ --from-figma
breschio/drawbridge Feedback Browser annotations โ†’ DOM-anchored gaps โ†’ --feedback drawbridge
HermeticOrmus/LibreUIUX-Claude-Code Scale 152 UI/UX agents for complex builds
wilwaldon/Frontend-Design-Toolkit Scale Curated toolkit: tokens, Playwright, accessibility
hemangjoshi37a/claude-code-frontend-dev Visual QA Post-APPROVED visual testing with closed-loop fixes

See docs/companion-tools.md for integration guides.


๐Ÿ“‹ Changelog

v0.2.0 โ€” 2026-04 ยท Design sources + feedback

  • Adds: --from-site (design-md-chrome pattern), --from-figma (Figma MCP source)
  • Adds: --feedback drawbridge (browser annotation integration)
  • Adds: --multi-page + SITE.md cross-page consistency (jezweb/design-loop pattern)
  • Adds: visual scoring tiers (PASS / PASS WITH NOTES / ITERATE / FAIL)
  • Adds: expanded fallback matrix for all new input modes
  • Docs: docs/companion-tools.md integration guide

v0.1.0 โ€” 2026-04 ยท First public release

  • Unified public repo: v0.1 narrative + v0.2 operator additions
  • Adds: context backpressure ยท 10 token-optimizations ยท Karpathy principles ยท 5 modes + 4 scope presets
  • Adds: model routing ยท zero-context subagent ยท trajectory abort ยท idempotent writes
  • Adds: 6 lifecycle hooks ยท wizard installer ยท economy.jsonl tracking
  • Adds: reference mode ยท iterate mode ยท critique mode

v0.2 โ€” operator-grade internals

  • Conductor phases 1โ†’4 ยท ASSUMPTIONS surfacing ยท DESIGN.md delta reads
  • STAGNATED ยท EARLY_ABORT ยท PAUSED states ยท fingerprint deduplication
  • Budget preflight ยท economy.jsonl ยท daily cap enforcement

v0.1 โ€” initial bridge

  • /picasso --design-loop command ยท pdl-conductor agent
  • 6 round steps ยท gate scoring ยท pdl-autodetect hook
  • One-liner installer (macOS / Linux / WSL / PowerShell)

๐Ÿ“š Docs

Architecture System overview and component map
Bridge loop walkthrough Phase-by-phase execution
Modes & scope presets 5 loop variants
Gate scoring Weighted criteria + tuning guide
Design patterns 9 orchestration patterns + Karpathy
Token optimization 3ร— overhead reduction
Lifecycle hooks Hook system reference
Prompt templates Round-0 and Round-N formats
Installation Full install guide
Troubleshooting Common issues + fixes

๐Ÿ—‘๏ธ Uninstall

bash scripts/uninstall.sh

Then remove the hook block from ~/.claude/settings.json manually.


Not affiliated with Anthropic. "Claude", "Claude Code", and "Claude Design" are trademarks of Anthropic.
This project only orchestrates user-owned sessions of those tools. ยท MIT License

Reviews (0)

No results found