The verdict on the two Versorix docs (Rio asked 7/11)
They are NOT one competing framework. They're two different layers, and they slot in differently:
design-copy-rulebook = the design brain. Adopt it for EVERY build, including previews, starting now. It is stack-agnostic (works on static HTML, Next.js, anything). Proof it earns its spot: on the ACOST redesign v1 it would have blocked exactly what Rio caught by eye ("looks like the Costa Co site"). Its anti-clone gate bans near-black + single bright accent + centered hero + grotesque-only type as the default AI look. The divergence engine + build ledger stop every site from rhyming.
website-build-sop = the production pipeline (Claude Design → compiled static React → GitHub → Cloudflare Pages + SEO/AEO moat + tracking). It IS better than the current ad-hoc production approach for PAID client sites, because of what it adds after design: hidden per-page body-SEO (67→100 AEO score), llms.txt for AI crawlers, full schema, tracking wired as re-runnable scripts, phase gates so nothing ships half-verified. It is OVERKILL for previews and pitch demos. Cherry-pick its Phases 2-9 when there's a paying client and a real domain.
Bottom line: rulebook always, SOP when it's a production build for money.
The menu (pick per job, not per preference)
RIO'S CALL 2026-07-11: the SEO/AEO base layer is baseline on EVERY option below, previews included. Base layer = per-page meta + OG/Twitter tags + canonical, Schema.org JSON-LD, robots.txt, sitemap.xml, llms.txt, and the hidden body-SEO block (SOP §8.5). ~30-45 min per build. Only the ACCOUNT-side stack stays production-only (GA4/Pixel/Clarity wiring, Search Console, GBP) because it needs the client's accounts + a live domain.
| # | Framework | When | Time | Output you get |
|---|---|---|---|---|
| 1 | Preview build — static HTML + CSS + vanilla JS, reference-driven, + SEO/AEO base layer | Pitching / pre-close demos, ad-gap pages, teardown follow-ups | 2-5 hrs | Local or *.pages.dev link to text a prospect. Premium look AND the moat already baked in, so a closed deal graduates to production without rework |
| 2 | Production SOP stack — full website-build-sop Phases 0-9 | Signed client, real domain, site that must rank + convert | 8-16 hrs first time, 2-4 after | Production site: 100/100 AEO + account-side tracking (GA4/Pixel/Clarity, GSC, GBP), phase-gated deploy on CF Pages |
| 3 | Next.js static export + SEO/AEO base layer | Content-heavy sites: blog, many pages, CMS-fed (Dylan-style) | varies | Same CF Pages hosting, component reuse + MDX. Use only when page count / content ops demand it |
| 4 | Motion signature layer — GSAP ScrollTrigger + scroll-scrub video (SOP §4.11 + rulebook §8.4, Higgsfield for generated clips) | Premium-positioning clients (film studios, luxury, launches). Layers ON TOP of #1 or #2, not a separate stack | +2-4 hrs | The "how is this not impossible" feel: ambient video hero, pinned scroll-scrub sections, scrubbed reveals. First live use: ACOST (hero ambient + statement scrub from Higgsfield clips of the client's own assets) |
Hard rules carried from tonight's ACOST lessons (2026-07-11)
- A reference sets the SPATIAL skeleton only. Never its colors or fonts (rulebook §9.5). ACOST v1 copied the WIZE dark+blue+grotesque and instantly read as "Costa Co / generic AI dark site." v2 kept the layout, swapped to the client's real tokens (navy
#080d16, teal#20dfcf, pink#ef4d87, Playfair + Jost) and became THEIR site. - The client's existing brand wins by default. Extract real tokens from their live CSS before proposing new ones. Ask before rebranding.
- No smooth-scroll library stacked on CSS
scroll-behavior: smooth. Lenis + CSS smooth fought each other = "scrolling is fucked." Pick ONE: native CSS smooth for previews, Lenis alone (with CSS smooth removed) only when the motion budget justifies it. - Log every build in website-build-ledger so the anti-clone gate has teeth.
What still needs deciding (Rio)
- Whether preview builds (#1) get a mini-ledger row too (recommended: yes, one line, 30 seconds).
- Whether to adopt the SOP's §8.5 hidden body-SEO on ALREADY-shipped client sites (Lee, Katelyne, Lucia, Dylan) as a retroactive upgrade — it's the biggest AEO lever and it's pure add, no redesign. Good candidate for a future build night.