Self-service

Copythis site

Build a complete, production-ready Next.js site called "Can AI Copy It?" — a public index that scores products by how much of them an AI coding agent can reproduce in a single session, and what is left over when it finishes.

## Premise

It is a compatibility table for copyability. Each entry answers one question — can an agent copy this? — with a verdict, an honest account of where the copy breaks, and a ready-to-paste prompt for attempting it. The editorial line is that the code is almost never the moat, and the index exists to show what the moat actually was.

## Stack

- Next.js (App Router, TypeScript, React Server Components), Tailwind CSS v4, no UI library.
- Static generation for every route. No database, no auth, no analytics, no cookies.
- Content is one JSON file per entry in data/targets/. Adding an entry is a pull request.
- Fonts via next/font: a tight grotesque for display, a monospace for data and labels.

## Data model

Each entry in data/targets/<slug>.json:

  slug        string, must equal the filename
  name        string
  domain      string, bare hostname
  category    string, one of the category slugs
  what        string, one line: what the product actually is
  verdict     "one-shot" | "skin-deep" | "nice-try"
  copyTime    human phrase — "an afternoon", "a long weekend", "you won't"
  copyable    string[]  what an agent genuinely nails on the first pass
  wall        string[]  where the copy stops being a copy
  moat        string[]  what actually protects them, if anything
  prompt      string    a real, pasteable one-shot prompt for building it
  priorArt    { name, url, note? }[]   optional
  invitesIt   boolean   true if the product open-sources itself or invites clones
  license     string    optional
  notes       string    optional editorial aside
  featured    boolean   optional, pins to the top

The loader reads the directory at build time and throws if a slug does not match its filename. Sort order: featured first, then by verdict rank, then alphabetically.

## Verdicts

- ONE SHOT — one prompt, one session, a copy you would actually use.
- SKIN DEEP — you will clone the interface and then meet the wall.
- NICE TRY — the moat was never the code.

Colour them consistently: one-shot cyan, skin-deep ochre, nice-try magenta. Render them as bordered monospace stamps, and as a large rotated stamp on detail pages.

## Routes

- /                    hero, a four-figure stat strip, a pinned featured entry, then the full index
- /:slug               the entry page
- /categories          all categories with their entries nested
- /category/:slug      one category
- /copy-this-site      this prompt, rendered on the site, with a copy button
- /method              how verdicts are decided, and the site's position on copying
- /submit              the JSON schema and how to open a pull request
- sitemap.xml, robots.txt, and a generated OG image per route

## The index component

A client component over the full set: a search input matching name, domain, description and category, plus verdict filter buttons. Use useDeferredValue so typing never blocks. Render as a numbered table with columns for rank, target, category, verdict and time to copy; collapse to a stacked card layout below the large breakpoint. Show a live "N of M shown" count and an empty state that links to /submit.

## Entry page structure, in order

1. Breadcrumb, "Can AI copy" eyebrow, the name as a huge display heading, the one-liner, and the verdict as a large stamp.
2. A badge when invitesIt is true, naming the licence.
3. A four-cell spec strip: verdict, time to copy, category, licence.
4. The prompt, in a bordered monospace block, with a copy button and deep links to agents.
5. Three columns: what copies cleanly, where it stops, what actually protects them.
6. Editor's note.
7. Prior art as an outbound list.
8. A panel linking to the original product, encouraging the reader to judge for themselves.
9. Related entries.

## Design direction

The visual language is reprography — the aesthetic of copying itself. Newsprint stock rather than white; near-black ink; a fixed SVG grain overlay at low opacity using multiply in light mode and screen in dark. Display headings get a misregistration effect: cyan and magenta ghost copies offset a few pixels behind the text, implemented with ::before/::after on a data-text attribute so it never touches the accessibility tree. Hairline rules everywhere, as though the page were a printed form. A registration crosshair as the logomark. Dark mode is "night shift" — the same press running after hours — driven by prefers-color-scheme with a data-theme override, a toggle, and an inline head script that applies the stored choice before first paint.

Do not use a terminal-green-on-black theme. Do not use JetBrains Mono or Space Grotesk. The point is to look like nobody else.

## Accessibility and performance

Every interactive element reachable and operable by keyboard, with a visible focus ring. A skip link. Decorative marks hidden from screen readers. Honour prefers-reduced-motion by disabling transitions. No layout shift from font loading. No client JavaScript on routes that do not need it — the entry pages are fully static.

## SEO

Question-shaped titles ("Can AI copy X? Nice try"). Canonical URLs on every route. JSON-LD: ItemList on the homepage, BreadcrumbList and FAQPage on entry pages. A generated sitemap. Per-route OG images rendered with next/og in the same print aesthetic.

## Editorial rules — these matter more than the code

- Be fair. Assess engineering scope, never the character of the people who built the thing.
- Be specific about the wall. "It's hard" is useless; "duplicate-letter resolution is where every copy fails" is the product.
- Never claim a copy is a replacement. Distinguish what an agent produces from what a business is.
- Where a product open-sources itself or invites clones, say so prominently and with respect. That is a position worth crediting, not a weakness to exploit.
- Write original prose for every entry. Do not reproduce copy, layout or brand identity from the product being assessed.

## Finally

Include this prompt on the site at /copy-this-site, and keep PROMPT.md in sync with it. A site arguing that everything is copyable has no business hiding its own source.