Design review loop
SDD, but for landing pages — a phased multi-agent workflow that ships modern, high-converting landings that don't look AI-generated. One-command install.
npx -y skills add propiter/landing-craft --skill design-review-loopAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Trigger: review UI design, critique screenshot, iterate on a page/component, does this look good, visual QA, polish frontend, design feedback. Drive a Playwright screenshot then critique then refine loop against a quality rubric.
The file declares its own license as Apache-2.0. That is the author’s claim about this one file, and it is not the same thing as the license GitHub reports for the repository, which is listed with the other numbers below.
SKILL.md
2.3 KB, as published. Nobody here has run it
When to Use
After building or changing any visual UI, run this loop before calling it done. It closes the gap between "the code compiles" and "this looks designed." Requires the Playwright MCP (browser_navigate, browser_take_screenshot, browser_resize).
The Loop
- Render: navigate to the running page (or open the built HTML file URL).
- Capture: screenshot at 3 widths — 390 (mobile), 768 (tablet), 1440 (desktop). Full-page for layout, viewport for above-the-fold.
- Critique: score against the rubric below. Be specific and ruthless — name the exact element and the issue, not "looks nice."
- Refine: fix the top 2–3 issues in code.
- Repeat until no rubric row scores below "good." Cap at ~3 passes; stop when returns diminish.
Rubric
| Dimension | Looking for |
|---|---|
| Hierarchy | Eye lands on the right thing first. One clear primary action. |
| Spacing rhythm | Consistent scale (4/8px). No cramped or orphaned elements. Edges aligned. |
| Typography | Distinctive, readable. Line length ~60–75ch, sane line-height, real scale contrast. |
| Color & contrast | Cohesive palette. Body text passes WCAG AA (4.5:1). |
| Composition | Intentional layout, not default stacking. Balance, alignment, negative space. |
| Responsive | No overflow or broken wrap. Touch targets ≥44px at 390. |
| Motion | Load/interaction feedback present and tasteful (see web-motion). |
| Slop check | No generic AI tells: Inter/system font, purple-on-white gradient, evenly-timid palette. |
Hard Rules
- ALWAYS look at the actual screenshot — never claim it "looks good" without rendering and viewing it.
- Compare against the stated aesthetic direction (from
frontend-design); flag any drift. - Report findings as a short prioritized list, not prose.
Output Contract
Return: screenshots taken (which widths), the rubric rows scoring below "good" with the specific fix for each, and what changed on each pass.