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.
| Tell | What it looks like | |
|---|
| Purple-to-blue gradient | Background or buttons fading violet into blue | |
| Default type | An italic serif hero as the shortcut for "elegant", or Inter and Space Grotesk as the shortcut for "clean" | |
| Grid or dot background | Squares or dots filling empty space | |
| Three generic cards | Icon, title, two lines, three times in a row | |
| Emoji in the copy | Emoji as bullets, headings or menu pictures | |
| Glow on everything | Every button and border glowing | |
| The usual layout | Hero, cards, testimonials, FAQ, CTA, in that order | |
| Thin generic icons | The default line-icon set on every card | |
| Nothing moving | A page that is static from top to bottom | |
| 01 / 02 / 03 | Numbering on things that have no order | |
| Hard shadows and boxes | Offset shadows with no blur and black outlines on every block: the agent's escape from the gradient | |
| Spec-sheet dressing | Monospace labels, lot numbers, temperatures and barcodes nobody uses | |
| A default AI look | Cream with terracotta, black with one acid-green pop, the newspaper broadsheet, receipts and stamps | |
The skill checks these on full-page screenshots and on the source. A
first-screen screenshot alone can't show most of them, so the skill asks for
the rest rather than scoring what it can't see.
Avoiding the tells isn't the goal on its own. A page that runs from every
cliché can stop looking like the business: a bakery dressed as a technical
spec sheet. So the review also asks two questions: would a customer of the
niche know what this is and want it, from the first screen? And do the
edges, shadows, texture, type and motion match the feeling the business
should give?
Install
Two skills: off-template (the flow) and ai-slop-check (the audit on
its own, for any URL or screenshot). Each agent has its own command:
- Claude Code:
npx skills add JouberthAlves/off-template-skills -g -a claude-code
- Codex:
npx skills add JouberthAlves/off-template-skills -a codex
- Cursor:
npx skills add JouberthAlves/off-template-skills -a cursor
- Windsurf:
npx skills add JouberthAlves/off-template-skills -a windsurf
- Kiro:
npx skills add JouberthAlves/off-template-skills -a kiro-cli
- Qoder:
npx skills add JouberthAlves/off-template-skills -a qoder
- Antigravity:
npx skills add JouberthAlves/off-template-skills -a antigravity
- GitHub Copilot:
npx skills add JouberthAlves/off-template-skills -a github-copilot
- Any other agent: add one rule (for example
.cursor/rules/ or
AGENTS.md) that says "for any site or UI request, read
skills/off-template/SKILL.md and follow it, reading the files in
references/ when a step says so."
The Claude Code command installs for every project (-g). The others install
into the project you run them in.
The first time the skill runs in a project, it asks a few setup questions
(stack, commit convention, language, deploy, accessibility, vault) and saves
the answers in design/setup.md. For the best mockups, connect an image tool:
ChatGPT's image generation, Magnific, or any GPT-image MCP. Without one, the
mockups come as prompts you paste into the tool yourself.
Claude Code, as a plugin (both skills in one step, Claude Code 2.1.275 or
later), inside Claude Code:
/plugin install off-template --marketplace JouberthAlves/off-template-skills
Then ask for a site the way you always do: "build a website for a bakery".
The skill takes it from there.
Tools, by job
The skill asks for a job, never a specific tool. Here is what each job
uses in Claude Code, and the equivalent elsewhere. The full table, with the
manual fallback for each, is in
tool-slots.md.
| Job | Claude Code | Other agents |
|---|
| Research real sites | Web search and the built-in browser | Playwright MCP, or links you send |
| Gray skeletons | An Artifact | A local HTML file |
| Colored mockups | An image MCP (Magnific, GPT-image models) | ChatGPT, or a prompt you paste |
| Components and docs | shadcn, React Bits, Context7 | The same, through MCP |
| Animation | GSAP skills | GSAP skills, or the GSAP docs |
| Design critique | Anthropic's design plugin | The review checklist |
| Mechanical check (contrast, text size) | Impeccable's detector on the served page (npx impeccable detect) | The same CLI in any terminal |
| Video of the page (on a yes) | HyperFrames CLI (npx hyperframes), needs Node 22+ and FFmpeg | The same CLI in any terminal |
Paid tools get one rule: the agent says what it will cost, and waits for a yes.
For the most design
The skill works without any of these, and says so. With them, the results are
better. It lists the ones you're missing the first time it runs, and asks
before installing anything.
- An image tool (not a plugin): ChatGPT's image generation, Magnific, or
any GPT-image MCP, connected in your own client. It makes the colored
mockups, so it matters most.
- Design critique and accessibility: Anthropic's design plugin:
claude plugin marketplace add anthropics/knowledge-work-plugins, then
claude plugin install design@knowledge-work-plugins.
- GSAP skills (site animation):
npx skills add https://github.com/greensock/gsap-skills
- HyperFrames (a video of the page, if you want one):
npx hyperframes init my-video.
Needs Node 22 or newer and FFmpeg.
- Context7 (up-to-date library docs):
npx ctx7 setup --claude
- shadcn (components):
npx shadcn@latest mcp init
- Impeccable's detector (contrast, text size, orphans on the rendered
page):
npx impeccable detect <url>. Only that command; the review says why.
Recommended: a vault
Agents don't remember anything between sessions. The
vault/ folder is a small Obsidian vault that works as their memory:
90 System/Agent rules.md: every rule in force, one per line. The only file read every session.90 System/Mistakes.md and Wins.md: what went wrong and what got praised, each turned into a one-line rule.10 Notes/: the design brief, research, skeletons, anti-patterns and design rules.20 Projects/: one note per project, so the same style is never shipped twice.
Obsidian is recommended, not required, for three reasons:
- You can read and edit the rules by hand. Every rule is one line in a note you can open, change and search.
- The links show the history. A mistake points to the rule it became, and the rule points to the project where it was learned.
- It is plain Markdown. Any agent can read it, and it goes into git like any other folder.
It doesn't start empty: it ships with 8 real mistakes and 5 wins already
turned into rules, one researched niche (burger food trucks) and two example
projects.
You don't have to set it up. The skill offers the vault once, at the moment
something would be lost (right after it researched your niche, or when you
correct it), and one yes creates it. From then on it says what it saved at
each delivery, and when a note changed a decision ("From your vault: Halfway
already used this palette"). Install Obsidian
to see and edit it. An optional Claude Code hook re-injects the rules after
the context is compacted. Setup details are in
vault/README.md.
How it works
skills/off-template/ the flow: SKILL.md and references/ (brief, research, skeletons, review…)
skills/ai-slop-check/ the audit on its own
vault/ the starter Obsidian vault
examples/burger-2026-10/ the current comparison: agent alone against the skill, same prompt, same day
examples/burger/ the first run (older skill, brief answered by the agent), kept as it was
examples/ai-notes/ the Steno run and the caricature
design/ the showcase page's own run of the flow: brief, research, three directions, the chosen one
site/ this page: the safelight pillar, the agent window and the three looks
.claude-plugin/ the Claude Code marketplace that lists the plugin
plugin/ the Claude Code plugin: both skills (copied by scripts/sync-plugin.sh)
skills/off-template/scripts/ sloplint.mjs (the lint) and lint-hook.mjs (the edit-time check)
plugin/hooks/hooks.json runs the lint hook after every page edit in Claude Code
scripts/sync-plugin.sh copies skills/ into plugin/ after you change them
The site is static HTML, CSS and JavaScript, no libraries. The pillar of light
in the hero is one WebGL shader (site/beam.js), inspired by React Bits'
Light Pillar, with no code taken. The agent window in the hero rebuilds the
page in any of the three directions the skill made for it. The new look grows
from the clicked prompt as a circle with a liquid rim (the View Transitions
API, with polygon() keyframes built in site/app.js); browsers without it
rebuild the sections one by one. The hero follows the choice: teal, pastel green and pastel pink light on
the night for Editor at Night, a cream hero with coral and pastel pink light
for The Output Leads, and the original safelight red for Darkroom Develop.
The logo's red caret stays in every look. The developing proof sits behind
the agent window, in depth, and comes into focus while a direction develops.
The hero's proof is no longer a photographed tray: it is the print itself.
Everything that moves stands still when the visitor asks for reduced motion,
and the page is complete with scripts off. Vercel publishes it on every push
to main.
Verification
- The showcase (second version, 2026-10-26) was redone through the flow as
the skill's own test: brief answered by the owner, research on 14 dev-tool
sites, three directions with skeletons and mockups (
design/), the owner's
pick and changes. On the old page sloplint found 22 FAIL; on the new one,
0 FAIL at 375, 768, 1280, 1440 and 1920 px in all three looks, with no
horizontal scroll. Impeccable's detector reports one finding, the radial
light of the pillar behind the proof, kept on purpose. Two fresh-eyes reviews
(subagents that never saw the conversation) ran on the hero and on the full
page, and their fixes are in.
- Not run on the second version: Lighthouse, a real iOS device, a screen
reader pass.
- The skill was run end to end in the session that wrote it. A clean-room run
with a fresh agent (only the skill on disk) found and stopped at the brief,
and exposed a contradiction around the cost question, which is now fixed
(
clean-room-test.md). That run was a
subagent. A later headless run in a new Claude Code session, with only the
one-line prompt "build a website for a small bakery", triggered the skill
on its own, showed the tools table and stopped at the brief, with no code
(trigger-test.md, one run).
- The burger comparison was rerun on 2026-10-26 with the current skill
(
examples/burger-2026-10/): 20 FAIL alone, 0 with the skill, with the
caveats listed there. The first run (examples/burger/) stays as it was.
- The first run's Ember & Bun score was corrected once (a first 3 of 10 counted something
that isn't one of the tells, so it became 2 of 10). When the list grew to
13, it was re-scored on its source: its body text is set in Inter, which the
"default type" tell now covers, so it scores 3 of 13.
- Not run: Lighthouse against the deployed URL, real iOS Safari, a screen
reader pass, and an install check of the agent commands in each agent's own app (the commands were checked in empty folders).
Credits
The brief questions, the anti-convergence rules and the conversion equation
are adapted from
2389-research/landing-page-design
(MIT). The techniques reference (signature effects, surfaces without images,
compositions) comes from a study of the 48 themes of
Nutlope/hallmark (MIT): techniques
only, no theme copied. The showcase's pillar of light takes its look from
React Bits' Light Pillar (no code taken) and its fonts
from Google Fonts (OFL). Steno, MeetMind, Order 27, Halfway and Ember & Bun are fictional; the photos in
the examples were generated for this demo.
License
Released under the MIT license.
