Plainwork / Catalogue / Looksheet
Four original site looks your AI agent can follow
Design files, CSS and finished pages that give Claude Code, Cursor and Copilot a specific look to follow instead of the default purple-gradient site, plus a checker for the common tells.
- 4 complete looks: Ledger (editorial), Field (field manual), Harbor (calm bands), Poster (loud blocks), each with a different layout skeleton
- 12 finished HTML pages (home, prices, article per look; the prices page carries a labelled contact form) and one look.css each, with no JavaScript and no external requests
- A DESIGN.md per look (theme, colour tokens, type, components, layout, do and don't, responsive, agent prompt)
- Rules files for every look as CLAUDE.md, AGENTS.md, .cursor/rules and .github/copilot-instructions.md
- slop-lint: a zero-dependency checker with 16 rules (12 AI-design tells, 4 craft checks) for HTML, CSS, Tailwind class names and .jsx/.tsx/.vue/.svelte/.astro files, with text and JSON output and exit codes for CI
- tools/test.mjs: 314 passed in the kit; in your own project it checks your look (contrast of the colour tokens, the checker, links, structure). Plus README, usage guide, licence and changelog
The kit's own slop-lint, run on a short page built the default way, then on the kit's looks. This is an excerpt of the real output: the first 3 of the 17 findings, then the summary line, both exactly as the checker prints them (the middle is cut).
$ node tools/slop-lint.mjs ai-default.html
ai-default.html:8 tell purple-gradient: Purple or indigo gradient
linear-gradient(135deg,#667eea,#764ba2)
fix: Use one flat anchor colour from your look's tokens. If you need depth, use a hairline rule or a tinted surface instead of a gradient.
ai-default.html:10 tell purple-gradient: Purple or indigo gradient
linear-gradient(90deg,#f0abfc,#818cf8)
fix: Use one flat anchor colour from your look's tokens. If you need depth, use a hairline rule or a tinted surface instead of a gradient.
ai-default.html:10 tell gradient-text: Gradient-filled headline text
-webkit-background-clip:text
fix: Set the headline in a solid colour from the tokens. Emphasis comes from size, weight or a different typeface, not from a gradient.
... (14 more findings)
1 file(s), 10 distinct tell(s), 0 craft error(s): FAIL
$ node tools/slop-lint.mjs looks
16 file(s), 0 distinct tell(s), 0 craft error(s): PASSOpen the live demo to see the Ledger look as real pages.
Made for
Who it's for
A look, not a vibe
Each look is written down and also built: colours, type and components exist as working CSS and finished pages, so the agent copies a real thing instead of guessing.
It names what to avoid
Each rules file lists the specific defaults to avoid, which is what holds up better than asking for something distinctive.
Checked, with limits stated
slop-lint runs on the agent's output and fails on the tells it finds in HTML, CSS and Tailwind class names. The four looks pass it, and 314 tests cover the kit. It is a text heuristic: it can miss a tell and cannot judge taste.
Light and accessible
Plain HTML and CSS, 9.3 KB of HTML at most per look, no scripts, no web fonts, every text colour pair at least 4.5:1, visible focus and reduced-motion guards.
What's inside
Everything you get
How it works
From checkout to done
Buy
Buy and download the zip, then copy one look's files and the tools folder into your project.
Open
Put the rules file where your tool reads it and ask your agent to fill in your content.
Use
Run node tools/slop-lint.mjs . and fix anything it lists.
Questions
Good to know
Does it work with my tool?
The rules ship in the four file formats Claude Code, Cursor, GitHub Copilot and AGENTS.md-aware tools read. They are plain instructions, so any tool that can read a project file can follow them. We have not tested every agent, and no instruction guarantees an agent obeys it; the checker is there to catch drift.
Why not use a free DESIGN.md collection?
Free collections describe a famous company's look, so every user gets the same famous look. Looksheet's looks are original, each one comes as working CSS and finished pages as well as a written file, and the checker tells you whether the output stayed on track.
Does the checker work on Tailwind and React output?
Partly, and we say where. It reads Tailwind class names in class and className (including cn() and clsx() strings), .jsx, .tsx, .vue, .svelte and .astro files, plain CSS and oklch() colours, and on our own sample Tailwind page and React component written the default way it reports 11 distinct tells each. It cannot see class names built at run time, custom colours in tailwind.config, styles imported from other files or a stylesheet you do not give it. We have not measured it on a sample of real-world AI-built sites.
Do I need Node?
Only for the checker and the tests (Node 18 or newer, nothing to install). The pages are plain HTML and CSS and open straight from your disk.
Can I use it for client sites?
Yes, on unlimited sites you or your clients publish. You may not resell the looks as templates. The licence is in the zip.
Do the fonts ship with it?
No. The looks use system font stacks, so there is nothing to download and nothing third-party loads. Poster's condensed display face depends on a condensed font being installed (Impact or Arial Narrow on most Windows and Mac machines) and falls back to a plain sans on others; the kit explains how to self-host an open-licence condensed font if you want it everywhere.
What if it doesn't work for me?
If it doesn't work as described or you can't access it, email us within 14 days and we'll fix it or refund you. See the refund policy for details.
Looksheet
Four original site looks with DESIGN.md, CSS, 12 pages, agent rules and a checker for AI-design tells in HTML, CSS and Tailwind.
More from the catalogue
Other small tools
Foliokit
Seven print-ready document templates and a zero-dependency PDF command: invoice, quote, receipt, statement, letter, certificate and report.
CI OIDC Atlas
11 CI platforms' OIDC token formats, quoted from vendor pages and live discovery documents, with a tested trust-condition builder.
Incident Letter
AI-written customer incident report from your notes. Nothing invented: missing times and causes are marked blanks.