Websites worth a second look. A methodical brief-to-ship pipeline for building distinctive websites with Claude Code — the website-only sibling of positronic.
positronic carries a whole product from fuzzy idea to shipped system. lookinglass carries one website — a landing page, portfolio, marketing site, blog, docs site — with the same spine (versioned artifacts, approval gates, amend mode) and a tenth of the surface area: six skills, two artifacts, one cascade.
It exists because the field's best design skills each solve a slice — animation craft, anti-slop taste, interface floors, art direction — and none of them is a process. lookinglass distills the top ten of them (verified by install counts, stars, and adversarial fact-checking; catalog in docs/learnings.md) into a pipeline that starts before the aesthetic ("what is this page's one job?") and ends after the deploy (smoke-checked, budget-measured).
brief ──▶ direction ──▶ /build ──▶ /polish ──▶ /mirror ──▶ /ship
│ │ │
│ └─ gate: you approve the └─ gate: mechanical pre-flight
│ direction before any code + screenshot critique,
│ loops until it passes
└─ definitions/briefs/<ts>.md
└─ definitions/directions/<ts>.md
| Skill | Invoked | Reads | Writes | What it does |
|---|---|---|---|---|
brief |
by the model when you describe a site | the conversation, repo, references | definitions/briefs/<ts>.md |
Reads the room: site kind, audience, the one job (falsifiable), content inventory, constraints. Declares a one-line design read. |
direction |
by the model after brief | latest brief | definitions/directions/<ts>.md |
Art direction as nine picks: lane + named reference, three feel words, signature, color strategy, type, layout families, imagery plan, motion budget, copy voice. Self-critiques against "would I make this for any similar brief?", records rejected alternatives. You approve it before code. |
/build |
you | brief + direction | the site | Stack pick (existing wins; Astro default), tokens first, section-by-section build with real content, full states, semantic HTML — verified in a real browser before any claim. |
/polish |
you | direction + site | the site | The detail pass: press/hover feedback, entrances, the one orchestrated moment, scroll discipline, typographic finish, reduced-motion variants. Reports as a Before/After/Why table. |
/mirror |
you | everything | docs/reviews/<ts>.md |
The ship gate. Two isolated assessments — a countable pre-flight (eyebrow ratios, CTA intent dedup, contrast, console, overflow, copy audit) and a screenshot critique (the one job, direction fidelity, slop tests) — merged into ship / fix-list with severities. Loops until clean. |
/ship |
you | a mirror pass | the live site | Head metadata + OG image, favicon, 404, sitemap, performance budget measured against the production build, deploy (Pages / Netlify / Vercel / Cloudflare), post-deploy smoke check. |
Six references carry the distilled craft and are loaded on demand: anti-slop (bans, 2026 tells, the reflex tests) · motion (the four-question framework with real numbers) · type-and-color (the font procedure, color strategy, OKLCH) · quality-floor (MUST/SHOULD/NEVER) · copy (words as design material — the gap no top-10 skill covered) · stacks (frameworks, scaffolds, deploys).
- Two versioned artifacts. Immutable timestamped snapshots in
definitions/; consumers read the latest; changes go through amend mode with an Amendment header and a one-edge cascade (brief → direction → affected sections → mirror). - Two uncompressible gates. Direction approval before code; mirror before ship. The model is told, in so many words, that compressing them is the known failure mode.
- Countable rules. "Max 1 eyebrow per 3 sections, fail if count > ceil(n/3)" gets enforced; "use eyebrows sparingly" does not. The pre-flight is arithmetic wherever possible, and bans are binary because "sparingly" doesn't survive contact with a model.
- Declared reads. One sentence of stated inference (the design read) before designing; recommend-then-confirm instead of open menus; rejected alternatives recorded so settled picks stay settled.
- Evidence, not vibes. Screenshots read back at three viewports, contrast measured with a tool, Lighthouse against the production build, automated output treated as defect evidence — never proof of done.
- A behavioral floor under the skills. AGENTS.md names the phase every request lands in and the rules that travel with every edit, so ad-hoc tweaks obey the same physics as full pipeline runs.
/plugin marketplace add dformoso/lookinglass
/plugin install skills@lookinglass
Then describe the site you want — brief picks it up — or start explicitly with any skill.
Works best with browser tooling available (Playwright MCP or similar) so /build and /mirror
can actually look at the page.
Optionally, copy AGENTS.md and CLAUDE.md into the site project's root
(or ~/.claude/ globally). That's the behavioral floor that holds even when no skill is
invoked: phase awareness mapped to the pipeline, browser verification before any "done" claim,
locked-direction discipline, the preserve list for live sites. It's the website layer — it
composes with positronic's universal
floor rather than repeating it, so
the two install cleanly together.
lookinglass is for pages that communicate. If the "website" grows auth, dashboards, or
multi-step product flows, that's an application — use positronic (define →
pick-ui-surfaces); the two plugins are designed to sit side by side.
The methodology is positronic's, scoped down. The craft is distilled (and conflicts arbitrated — the sources disagree more than you'd think) from the ten most-regarded web-design skills of mid-2026: Anthropic's frontend-design; Vercel's web-design-guidelines / Web Interface Guidelines; Emil Kowalski's emil-design-eng; Paul Bakaus's impeccable (flagship, critique, typeset, layout); Leon Lin's design-taste-frontend and high-end-visual-design; and ui-ux-pro-max. The full catalog with licenses, what each taught, and where every rule came from live in docs/learnings.md; design rationale in docs/DESIGN.md.
MIT. The studied skills themselves are not redistributed — the catalog with repo URLs and licenses lives in docs/learnings.md; the working copies were deleted after study. One source (emil-design-eng) has no license, which is why nothing in lookinglass copies its prose.