Claude Code marketplace plugin for design-dna downstream QA. Bundles a single skill that scores generated HTML against both a Design DNA JSON spec and the original reference website using browser-based visual verification.
Root README files follow design-dna: README.md (English), README.zh-CN.md, README.ja.md, README.ko.md, README.es.md, README.zh-TW.md, with the same centered title and cross-linked language bar.
| Path | Role |
|---|---|
.claude-plugin/marketplace.json |
Plugin metadata, version, and skill paths |
skills/harness-design/ |
SKILL.md + references/ (rubric, verification checklist, browser procedures) |
The skill uses browser MCP tools (navigate, screenshot, network_requests, console_messages, profiling) and optionally the web-shader-extractor Playwright scripts for resource collection.
- design-dna Phase 2 → DNA JSON (from reference URL)
- design-dna Phase 3 → HTML output
- harness-design → 5-pass verification (resource audit + mechanical + visual comparison + perceptual + effects), weighted score, correction loop
The harness does not edit the DNA JSON; it only adjusts generated markup/CSS/JS to match the spec and reference.
| Pass | Name | Tools Used |
|---|---|---|
| 0 | Resource Audit | fetch-rendered-dom.mjs (Playwright) or browser_network_requests + browser_console_messages |
| 1 | Mechanical Checks | browser_snapshot + getComputedStyle injection + DNA JSON matching |
| 2 | Visual Comparison | browser_take_screenshot + browser_scroll (section-by-section) |
| 3 | Perceptual Review | Screenshot-informed qualitative assessment |
| 4 | Effects Audit | Frame sampling + browser_profile_start/stop + auxiliary skills |
| Effect Type | Skill | Usage |
|---|---|---|
| WebGL / Shader / Canvas | web-shader-extractor |
fetch-rendered-dom.mjs for resource collection, scan-bundle.sh for framework ID, shader param extraction |
| ScrollTrigger / GSAP | gsap-scrolltrigger |
Scroll trigger position identification, pin/scrub verification |
| Three.js / 3D | 3d-web-experience |
3D engine analysis, rendering verification |
Update skills/harness-design/SKILL.md and skills/harness-design/references/ together. Bump metadata.version in .claude-plugin/marketplace.json when releasing.
| Topic | File |
|---|---|
| Scoring weights and grades | skills/harness-design/references/rubric.md |
| Pass 0 resource + Pass 1 mechanical + Pass 2 visual checklists | skills/harness-design/references/verification-checks.md |
| Browser operation procedures | skills/harness-design/references/browser-verification.md |