Same prompt. Different designer.
Skills that stop coding agents from shipping the same AI-looking page.
Website · See the difference · The flow · Install · The vault
npx skills add JouberthAlves/off-template-skills -g -a claude-code
Codex, Cursor and the Claude Code plugin are in Install.
Your coding agent designs the same page for everyone: a centered hero, three
cards, a purple gradient, emoji in the copy. Off-Template is two skills
that change how it works. Before any code, the agent asks you a brief,
researches real sites in the niche, and shows you three directions. It waits
for your pick. Then it builds, and checks the result against the 13 tells of
an AI-made page, and that the look still fits the business.
The name says the job: the page comes out off the template every agent
reaches for. It used to be called Super-Webdesigner; the old GitHub links
redirect here.
See the difference
The showcase was built with the skill itself. Its agent window offers the
three directions the flow made for it; pick one and the whole page rebuilds
in that look, growing from the prompt you clicked:
The hero changes with the look you pick in the agent window. The three
looks, from the same site:
Longer videos of the same site: the switch to Output Leads,
the switch to Editor at Night,
and the pillar on its own. They are WebM
files; GitHub shows them as downloads, and they play in Chrome and Firefox.
See it live and drag the choices yourself →
The comparison is examples/burger-2026-10/:
the same prompt, Build a website for a burger restaurant, run on the same
day on both sides with the current skill. The agent alone made "Ember & Bun";
with the skill, the owner answered the brief and the flow made "Halfway".
On sloplint, the agent alone has 20 FAIL (19 colours outside tokens,
one transition: all) and the skill page 0; Impeccable's detector finds
19 issues against 0 on a phone. Read the caveats in that README before
quoting it: the skill page is a first screen only, the other a full
seven-section page, and the agent-alone page was not reviewed.
The flow
Four stops wait for you. Everything between them the agent does on its own.
| # | Step | You |
|---|
| 1 | Discover the tools. Lists the skills, MCP servers and browser the agent has, and what's missing, with the install command. | |
| 2 | The brief. Four questions, with options to click: a real object the palette comes from, one feeling, two influences to collide, what the page must never look like. The cost of any paid mockups comes in the same message. | Stop: answer |
| 3 | Research the niche. Real sites, split into what visitors expect (kept) and what everyone repeats (avoided). | |
| 4 | Three directions. Gray skeletons for phone and desktop, plus a colored mockup each: the best of the niche, one that breaks it, one from outside it. Each has its logo, favicon, motion and visual language (edges, shadows, lines, texture, type), all taken from the business's real world, plus one signature effect and a composition from a reference of solved techniques (techniques.md). | |
| 5 | You choose. One question: which of the three, or what to mix. | Stop: choose |
| 6 | Write it down. The direction becomes a file: palette, fonts, the wildcard element, the motion. It is the contract for the build. Then one short block with every decision, your last cheap chance to redirect. | Stop: ok |
| 7 | Build. The first screen alone first, checked by the lint and by a reviewer that never saw the conversation; then the rest, with the motion the direction asked for. | |
| 8 | Review. The lint at five widths, full-page screenshots, the 13 tells, the fit to the business, a fresh-eyes review, a design critique, forms, contrast. Each check has one job, and they meet in one report. | Stop: judge |
After the page exists
Short commands for one job each, without the whole flow: polish, bolder,
quieter, distill, harden, clarify, adapt and lint, as
/off-template polish. They keep the direction and show before and
after.
The lint
skills/off-template/scripts/sloplint.mjs checks the code floor (colours
and fonts only through tokens, no transition: all, no sideways scroll at
375 to 1920 px, a capped container, no card in a card, focus, reduced motion),
the tells a rule can see, and the word budget. It uses the Chrome already on
the machine, no install:
node skills/off-template/scripts/sloplint.mjs ./index.html --render
It sits next to Impeccable's detector and the screenshots, not in their place.
As a Claude Code plugin it also runs on every page file the agent saves, and
hands the failures back before it moves on.
The 13 tells
What a page looks like when the agent decides alone. Each one alone looks like
a choice. Three or more together and it reads as AI-made.
This is the beginning of the README. Read the rest at the original. Read the full README ↗
