Key Takeaways
- Adopt Secret MCP's one-reference-per-request pattern with includeContext:none.
- Tile long screenshots, measure colors, label claims (OBSERVED/MEASURED/INFERRED/UNKNOWN), and generate separate DESIGN_INDEX files for traceable design specs.
What Changed — Evidence-Isolated Design Analysis with MCP
Most screenshot-to-code workflows dump multiple references into one prompt and hope the model synthesizes something coherent. The result? A spec that borrows navigation from site A, colors from site B, and a component from site C — with zero attribution.
Secret MCP (v0.6.0) enforces a stricter invariant: one reference, one sampling/createMessage request, one DESIGN_INDEX document. It's a local, open-source MCP server that searches GDWEB for design references, prepares visual evidence per work, and analyzes each independently.
What It Means For You — Traceability as an Operational Invariant
The core pattern is deceptively simple. For each reference r_i, the server builds evidence E_i (image tiles, crop geometry, color measurements, metadata) and sends it with includeContext: none. The model never sees another reference in the same request.
q_i = sampling/createMessage(C, E_i; includeContext = none)
D_i = G_theta(q_i)
References(q_i) = { r_i }
This isn't just about prompt hygiene. It means every design decision in your output document can be traced back to a specific source. When a client asks "why this color?", you point to the exact reference, tile, and coordinate.
Preparing Evidence: Tiling Long Screenshots
Full-page captures can be 7,000+ pixels tall. Sending them as one base64 blob wastes tokens and loses detail. Secret MCP:
- Resizes desktop evidence to max 1,200px width
- Splits long pages into overlapping 1,600px vertical tiles
- Keeps mobile evidence separate
- Records source-space coordinates for every tile via
x_source = (cropLeft + x_tile) / scaleX - Measures 8 representative colors per tile in HEX, RGB, HSL
Results from a 3-reference test run: 12 evidence images totaling 816.9 KB, 96 color measurements, and 3 documents at ~9,000 tokens each. All 19 required headings present.
The 19-Section Output Contract
Every DESIGN_INDEX file covers: reconstruction goals, evidence coordinates, site map, navigation, per-page geometry, component abstraction, design tokens, typography, responsive behavior, accessibility, data states, frontend architecture, implementation tasks, acceptance criteria, and uncertainties.
Crucially, claims are labeled OBSERVED, MEASURED, INFERRED, or UNKNOWN. This prevents the classic failure where a model invents DOM structure from a static screenshot.
Try It Now — Running Secret MCP
Requires Node.js 20.19+:
npx -y secret-design-mcp
MCP client config:
{
"mcpServers": {
"secret-design": {
"command": "npx",
"args": ["-y", "secret-design-mcp"]
}
}
}
Apply the pattern to your own workflows: even without installing Secret MCP, you can replicate its core discipline. When doing multi-reference design analysis in Claude Code, don't paste three screenshots into one prompt. Instead:
- Create a
design-refs/directory with one subfolder per reference - Tile long screenshots into 1,600px slices with ImageMagick
- Send one request per reference with a fixed 19-section contract
- Save each output as a separate markdown file
- Label every claim with its certainty level
Honest Limits
The current evaluation is small: 2 smoke-test references and 3 preserved runs. There's no control group, human rating, or confidence intervals. A 19/19 heading score measures structural completeness, not design quality. The AEROFLOW case study (Korean Air reference → new Godot aviation site) proves the pipeline works end-to-end but isn't a controlled fidelity study.
Still, the pattern is sound. If you've ever struggled to answer "which reference did that come from?", evidence isolation is the fix.
Source: dev.to
[Updated 23 Aug via medium_claude]
A separate security analysis of MCP tool calls reveals a related attack class: compromised upstreams can inject forged receipt fields at nested depths in JSON-RPC responses, surviving top-level sanitization. The fix: recursively strip all _ccs* keys at any depth, then JCS-canonicalize (RFC 8785), SHA-256 hash, and Ed25519 sign — in that order. The authors packaged this as npx ccs-lint, a 7.5KB zero-dependency CLI that detects nested field injection and missing 22-field receipts. This complements Secret MCP's evidence isolation by hardening the verification layer itself. [per Medium]
