Preview
What it is.
You hand it the URL of a page that already looks right. It reads that page's stylesheets, writes the colors, fonts, radii and spacing to a token file, then builds the page you asked for as one self-contained HTML file.
The token file is the part that earns its keep on run two. A page built a month later reads the same file, so the two match without anyone comparing screenshots.
Then a script reads the built file and refuses to pass it while a defect is in it: text contrast under the WCAG minimum, tap targets below 24 pixels, grids that scroll sideways on a phone, hexes typed into rules, and two primary buttons where the page needs one.
What you get.
- A token file holding your colors, fonts, radii and spacing, read by every later run
- One self-contained HTML file, built for the platform you name up front
- A check that fails the page while a defect is in it, so nothing gets handed over broken
- Nine page anatomies, from a paid landing page to an HTML email
- A review note saying what a developer still has to look at
How to set it up.
Unzip it so the folder sits at ~/.claude/skills/frontend-design with SKILL.md at its root. On a paid Claude plan you can upload the zip under Settings, Capabilities, Skills.
Hand it the URL of a page whose look you want carried over. extract_tokens.py reads that page's stylesheets and writes tokens.json and brand.css.
Confirm the accent and the two fonts before anything gets built. Frequency picks the wrong accent on a site that uses one mid-gray everywhere, and the accent is the color on the buttons.
Pick the page type before the layout. Each of the nine carries a section order and the one failure mode that gets that page rebuilt.
Read the copy outline it shows you and react to it. Layout work spent on thin copy is the most common way a page comes back.
Run design_gate.py until it reports no failures. A FAIL is a defect, and a WARN needs a sentence of reasoning if it stays.
Pricing Plans
Free. MIT licensed.
Downloads as a zip from this page. Nothing to sign up for.
Use cases
The page the design queue can't take
A campaign goes live this week and design is booked. Hand over the offer and the URL of your best-looking page, and one HTML file comes back with the brand tokens already pulled off your own site.
A calculator other sites cite
You want a tool page that earns links. Pick the calculator anatomy and the result comes back ungated with its assumptions listed underneath, because an email wall in front of the number is what stops the links.
Four microsite pages that read as one brand
The set keeps drifting apart because each page was built from taste. Run extraction once, keep tokens.json, and every later page reads the same file.
The contractor page nobody can review
A freelancer sent HTML and no one on the team reads CSS. Run design_gate.py on the file and a defect list comes back with line numbers, which is a review a marketer can act on.
Best for
A go-to-market team with no front-end developer
The gate stands in for the review nobody on the team can do.
Brand consistency across a set of pages
The token file is the constant, and it's why page four matches page one.
Anything going on paid traffic
A strict flag promotes every warning to a failure, which is the setting for a page you're paying to send people to.
Reviewing a page somebody else built
Running the gate on an inherited file gives a defect list with line numbers.