picasso-claude-design-claude-code-bridge-loop
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
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.
๐จ 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 Orchestrator: Claude Design ๐ Claude Code [Bridge Loop]
The first gate-scored bidirectional loop between Claude Code and Claude Design.
Brief โ Design โ Implement โ Score โ Refine.
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
--wizardto 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
- Brief โ Describe your design goal in plain language (
/picasso --design-loop "hero for B2B SaaS") - ASSUMPTIONS โ Picasso surfaces inferred tokens as an explicit block before any browser call โ you correct inline
- DESIGN.md โ Structured 9-section spec is generated: colors ยท typography ยท layout ยท motion ยท responsive ยท accessibility
- Claude Design โ Picasso sends a structured prompt, captures the visual proposal via screenshot
- Implement โ Zero-context subagent applies only the changed
DESIGN.mdsections (~200 tok vs 2,000 naive) - Render โ Desktop always ยท mobile only if previous responsive score < 8.0
- Score โ Weighted gate: ฮE colors (25%) ยท typography (20%) ยท layout (20%) ยท components (15%) ยท motion (10%) ยท responsive (10%)
- Gaps โ 3 lines max ยท goal-declared format:
current โ targetยท passed to next round - 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
PAUSEDso 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.mdcross-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.mdintegration 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-loopcommand ยทpdl-conductoragent- 6 round steps ยท gate scoring ยท
pdl-autodetecthook - 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.
This project only orchestrates user-owned sessions of those tools. ยท MIT License
Reviews (0)
Sign in to leave a review.
Leave a reviewNo results found