English | 中文 | 日本語 | 한국어 | Español | 繁體中文
A Claude Code / Cursor marketplace plugin: a design-dna Phase 3 verification skill with browser-based visual verification. After an agent generates HTML from Design DNA JSON + content, this skill collects all page resources via console/network inspection, performs section-by-section screenshot comparison against the reference website, samples animation frames, and drives a correction loop until the output is ship-ready.
- Node.js installed
- Ability to run
npxcommands
- Playwright — used by
web-shader-extractorfor resource collection - Browser MCP tools — fallback when Playwright is unavailable
These skills provide domain expertise for deep effect verification:
npx skills add https://github.com/lixiaolin94/skills --skill web-shader-extractor
npx skills add https://github.com/greensock/gsap-skills --skill gsap-scrolltrigger
npx skills add https://github.com/sickn33/antigravity-awesome-skills --skill 3d-web-experiencenpx skills add zanwei/harness-design# Cursor only, non-interactive, global install
npx skills add zanwei/harness-design -a cursor -g -y
# Claude Code only
npx skills add zanwei/harness-design -a claude-code -g -ygit clone https://github.com/zanwei/harness-design.git
cd harness-design
npx skills add . -yInstall only the skill folder:
npx skills add ./skills/harness-design -y/plugin marketplace add zanwei/harness-design
Then install the plugin from the marketplace UI, or:
/plugin install harness-design@harness-design
npx skills add zanwei/harness-design --list| Skill | Description |
|---|---|
| harness-design | 5-pass browser-based verification, weighted scoring, screenshot evidence, fix plan vs. DNA JSON + reference URL (SKILL.md) |
References: rubric · verification checks · browser verification
flowchart LR
A["Design DNA JSON<br/>Phase 2 output<br/><br/>Immutable spec"]
B["Generated HTML<br/>Phase 3 output<br/><br/>Agent-produced design"]
R["Reference URL<br/>Original website<br/><br/>Visual ground truth"]
C["Harness Report<br/>Grade A–F · screenshots<br/><br/>Ship-ready output"]
A --> B
R --> C
B -->|"Pass 0 — Resource audit"| C
B -->|"Pass 1 — Mechanical checks"| C
B -->|"Pass 2 — Visual comparison"| C
B -->|"Pass 3 — Perceptual review"| C
B -->|"Pass 4 — Effects audit"| C
C -.->|"Score < 90 → correction loop"| B
- design-dna Phase 2 → Design DNA JSON (from reference URL)
- design-dna Phase 3 → generated HTML
- harness-design → verify against both DNA JSON and reference URL, score, correct (loop until pass or iteration cap)
The harness does not modify the DNA JSON.
| Pass | Name | Method |
|---|---|---|
| 0 | Resource Audit | Collect network requests, console messages, canvas-info from both pages via Playwright or browser MCP |
| 1 | Mechanical Checks | DNA JSON token matching enhanced with actual browser-rendered values (getComputedStyle) |
| 2 | Visual Comparison | Section-by-section screenshot comparison between generated and reference pages |
| 3 | Perceptual Review | Qualitative style assessment based on screenshot evidence |
| 4 | Effects Audit | Animation frame sampling, scroll-trigger verification, 3D/shader deep inspection, CPU profiling |
| Dimension | Weight |
|---|---|
| design_system (tokens) | 25% |
| design_style (perception) | 20% |
| visual_effects (rendering) | 20% |
| resource_integrity | 10% |
| visual_alignment | 25% |
| Effect Type | Auxiliary Skill | Role |
|---|---|---|
| WebGL / Canvas / Shader | web-shader-extractor |
Resource collection scripts + shader parameter extraction |
| GSAP ScrollTrigger | gsap-scrolltrigger |
Scroll position verification + trigger point identification |
| Three.js / R3F / 3D | 3d-web-experience |
3D rendering verification + engine analysis |
Tip
Iterative correction. If the first verification produces a grade below A, the harness automatically generates a prioritized fix plan with screenshot evidence and drives a correction loop — up to 3 iterations — before recommending accept-as-is or re-generate.
Follows the Agent Skills specification. Installable via skills CLI to all supported agents including Cursor, Claude Code, Codex, GitHub Copilot, and more.
For behavior changes, update skills/harness-design/SKILL.md, skills/harness-design/references/, and bump metadata.version in .claude-plugin/marketplace.json together.
MIT