launchframe 0.1.4 → 0.1.6

package/README.md

@@ -10,10 +10,14 @@ radii, shadows), and synthesizes an original design system as
 `tailwind.config.ts` + `globals.css` + `tokens.json` + a Markdown
 report and an AI-handoff file.
 
-It is **not** a website cloning tool. It does not store HTML, JS, CSS,
-brand assets, logos, illustrations, or copywriting. Proprietary type
-families are substituted with open-source equivalents. See the
-[anti-clone policy](./rules/anti-clone-policy.md).
+It also crawls the rendered DOM into a typed `SiteLayout` and emits a
+**layout-mirror page** per source: a Next.js component that reconstructs
+the source's section tree, grid, and density from typed primitives, with
+`<TextSlot>` / `<MediaSlot>` placeholders where the source had copy,
+logos, illustrations, or product imagery. The mirror does **not** embed
+the source's copy text, brand assets, or product screenshots — fill those
+slots with your own content before shipping. Proprietary type families
+are substituted with open-source equivalents.
 
 ---
 
@@ -35,21 +39,28 @@ cd path/to/your-app-or-empty-folder
 npx launchframe@latest https://site-a.example https://site-b.example
 ```
 
-When it finishes, open **`output/<runId>/FOR_AI.md`** — it tells you
-exactly how to attach the folder in **Cursor** or **Claude Code** so
-the model follows your tokens when building UI.
+When it finishes, every source URL has produced a **layout-mirror
+page** under `output/<runId>/mirror/<host>/page.tsx`, plus a synthesized
+design system at the run root.
 
 ```txt
 output/<runId>/
 ├── FOR_AI.md            ← paste / @-attach this for your AI (handoff instructions)
-├── tokens.json          ← every value, machine-readable
+├── tokens.json          ← every aggregated value, machine-readable
 ├── tailwind.config.ts   ← drop-in Tailwind theme
 ├── globals.css          ← drop-in shadcn-compatible CSS variables
 ├── theme-preview.tsx    ← render this to eyeball the system
 ├── REPORT.md            ← what was extracted, from where, why
 ├── run.json             ← full run metadata (sources, timing, status)
 ├── screenshots/         ← captured PNGs
-└── raw/                 ← per-site raw token observations
+├── raw/                 ← per-site raw token + SiteLayout JSON
+└── mirror/
+    └── <host>/
+        ├── page.tsx         ← Next.js page reconstructed from the source's
+        │                       section tree, with <TextSlot> / <MediaSlot>
+        │                       placeholders for your own copy and assets
+        ├── layout.json      ← the typed SiteLayout the page was built from
+        └── MIRROR_NOTES.md  ← what was extracted and how to fill slots
 ```
 
 ---
@@ -57,10 +68,22 @@ output/<runId>/
 ## Hand the output to your AI
 
 1. Run the command above so `output/<runId>/` exists.
-2. Either:
-   - **Cursor:** `@`-attach the folder (or `FOR_AI.md` + `REPORT.md` + `tokens.json`) and paste the instruction block from `FOR_AI.md` into Composer, or
-   - **Claude Code:** copy the `output/<runId>/` folder into your project and attach it.
-3. The AI's authority order is **REPORT.md → tokens.json → merge tailwind.config.ts and globals.css into the app**. It must use semantic tokens (`bg-background`, `text-muted-foreground`, `bg-primary`, …) and write **original copy only**.
+2. Pick the mirror folder that matches the source whose layout you want
+   to start from: `output/<runId>/mirror/<host>/`.
+3. Either:
+   - **Cursor:** `@`-attach the mirror folder along with `FOR_AI.md` and
+     `tokens.json`, then ask the agent to fill in `<TextSlot>` /
+     `<MediaSlot>` placeholders with copy for *your* product.
+   - **Claude Code:** copy the mirror folder into your project, then ask
+     the agent the same thing.
+4. The AI's authority order is **MIRROR_NOTES.md → page.tsx → tokens.json
+   → tailwind.config.ts + globals.css**. It must:
+   - Keep the section tree, grid composition, and density of `page.tsx`
+     intact (that is the source's layout grammar, which is the point).
+   - Replace every `<TextSlot kind="…" />` placeholder with original
+     copy written for *your* product — not paraphrased from the source.
+   - Replace every `<MediaSlot kind="…" />` with your own imagery, code
+     samples, or brand marks.
 
 ---
 
@@ -148,11 +171,11 @@ launchframe/
 │   ├── capture/               # Playwright screenshot capture (lower level)
 │   ├── analysis/              # Layout-tree extraction & section classifier
 │   ├── patterns/              # Typed pattern schemas + atlas registry loader
-│   ├── blocks/                # Original shadcn/ui blocks across families
-│   └── evaluation/            # Coherence / clone-risk / a11y evaluator
-├── pattern-atlas/             # Formalized pattern catalog per category
+│   ├── blocks/                # Shadcn/ui blocks + TextSlot / MediaSlot primitives
+│   └── evaluation/            # Coherence + responsiveness/a11y evaluator
+├── pattern-atlas/             # Pattern catalog per category (block-composition mode)
 ├── prompts/                   # Markdown prompts for AI agents
-├── rules/                     # Design / copy / anti-clone / a11y policy
+├── rules/                     # Design / copy / a11y rules
 ├── registry/                  # shadcn-compatible custom registry manifest
 └── output/                    # ← every `extract` run lands here
 ```
@@ -164,7 +187,7 @@ npm run studio         # Next.js dashboard at localhost:3000
 npm run capture        # Lower-level Playwright capture pipeline
 npm run analyze        # Run section classifier on captured screenshots
 npm run formalize      # Validate the pattern-atlas/*.json files
-npm run evaluate       # Grade a generated page (coherence/clone/a11y)
+npm run evaluate       # Grade a generated page (coherence + a11y)
 npm run typecheck      # Project-wide TypeScript check
 ```
 
@@ -172,26 +195,30 @@ npm run typecheck      # Project-wide TypeScript check
 
 ## What this is not
 
-- **Not a scraper.** It captures only what is publicly rendered, stores
-  no HTML, and never republishes site content.
-- **Not a clone tool.** Anti-clone policy is enforced by capture-side
-  policy and synthesis-side normalization.
+- **Not a verbatim site downloader.** The crawler builds a typed
+  `SiteLayout` model from the rendered DOM — section tree, geometry,
+  computed style tokens, content kinds — and emits code generated from
+  that model. It does not save the source's HTML/CSS to disk.
+- **Not a content lift.** Heading text, body copy, logos, illustrations,
+  and product imagery become `<TextSlot>` / `<MediaSlot>` placeholders in
+  the mirror page. You fill them with your own copy and assets before
+  shipping.
 - **Not a component library replacement.** It sits *on top* of
-  shadcn/ui and produces theme files for it.
+  shadcn/ui and produces theme files plus slot-driven page templates.
 
 ---
 
-## Anti-clone policy in one paragraph
-
-Launchframe captures publicly rendered pages, reads the **computed
-appearance** of those pages, and synthesizes an original design system
-from aggregate signals. It never stores HTML, JS, CSS, brand assets,
-illustrations, logos, or copy. Proprietary type families are
-substituted with open-source equivalents. Generated pages and design
-systems are checked against captured corpora for structural and
-token-level overlap; anything above the configured threshold fails the
-build. Full policy:
-[`rules/anti-clone-policy.md`](./rules/anti-clone-policy.md).
+## Responsible use in one paragraph
+
+Launchframe is intended for layout research and design-system seeding
+against pages you have permission to analyze (your own products, sites
+where the operator has permission, or pages where structural analysis is
+permitted by `robots.txt`). The crawler respects `robots.txt` by default
+and rate-limits per domain. The output is generated code derived from a
+normalized typed model and slot placeholders — not a verbatim copy of
+the source's markup, copy, or assets. Operators are responsible for the
+content they paste into those slots and for honoring third-party
+trademarks, terms of service, and licenses.
 
 ---
 

package/package.json

@@ -1,64 +1,64 @@
-{
-  "name": "launchframe",
-  "version": "0.1.4",
-  "description": "Point Launchframe at SaaS sites you admire and get back a drop-in shadcn/ui design system (tokens, Tailwind theme, CSS variables, AI handoff) you can build your own UI on top of.",
-  "license": "MIT",
-  "author": "Evan Gruhlkey",
-  "homepage": "https://github.com/evangruhlkey/launchframe#readme",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/evangruhlkey/launchframe.git"
-  },
-  "bugs": {
-    "url": "https://github.com/evangruhlkey/launchframe/issues"
-  },
-  "keywords": [
-    "launchframe",
-    "shadcn",
-    "shadcn-ui",
-    "tailwind",
-    "design-system",
-    "design-tokens",
-    "playwright",
-    "cursor",
-    "claude-code",
-    "ai",
-    "cli"
-  ],
-  "bin": {
-    "launchframe": "bin/launchframe.mjs"
-  },
-  "files": [
-    "bin",
-    "packages/extract",
-    "README.md",
-    "LICENSE"
-  ],
-  "workspaces": [
-    "apps/*",
-    "packages/*"
-  ],
-  "scripts": {
-    "extract": "tsx packages/extract/extract.ts",
-    "studio": "npm run dev --workspace apps/studio",
-    "studio:build": "npm run build --workspace apps/studio",
-    "capture": "tsx packages/capture/screenshot-site.ts",
-    "analyze": "tsx packages/analysis/analyze-screenshot.ts",
-    "formalize": "tsx packages/patterns/pattern-registry.ts",
-    "evaluate": "tsx packages/evaluation/evaluate-page.ts",
-    "typecheck": "tsc -p tsconfig.json --noEmit",
-    "format:check": "prettier --check ."
-  },
-  "dependencies": {
-    "playwright": "^1.48.0",
-    "tsx": "^4.19.0"
-  },
-  "devDependencies": {
-    "@types/node": "^22.7.0",
-    "prettier": "^3.3.3",
-    "typescript": "^5.6.0"
-  },
-  "engines": {
-    "node": ">=20.0.0"
-  }
-}
+{
+  "name": "launchframe",
+  "version": "0.1.6",
+  "description": "Point Launchframe at SaaS sites you admire and get back a drop-in shadcn/ui design system (tokens, Tailwind theme, CSS variables, AI handoff) you can build your own UI on top of.",
+  "license": "MIT",
+  "author": "Evan Gruhlkey",
+  "homepage": "https://github.com/evangruhlkey/launchframe#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/evangruhlkey/launchframe.git"
+  },
+  "bugs": {
+    "url": "https://github.com/evangruhlkey/launchframe/issues"
+  },
+  "keywords": [
+    "launchframe",
+    "shadcn",
+    "shadcn-ui",
+    "tailwind",
+    "design-system",
+    "design-tokens",
+    "playwright",
+    "cursor",
+    "claude-code",
+    "ai",
+    "cli"
+  ],
+  "bin": {
+    "launchframe": "bin/launchframe.mjs"
+  },
+  "files": [
+    "bin",
+    "packages/extract",
+    "README.md",
+    "LICENSE"
+  ],
+  "workspaces": [
+    "apps/*",
+    "packages/*"
+  ],
+  "scripts": {
+    "extract": "tsx packages/extract/extract.ts",
+    "studio": "npm run dev --workspace apps/studio",
+    "studio:build": "npm run build --workspace apps/studio",
+    "capture": "tsx packages/capture/screenshot-site.ts",
+    "analyze": "tsx packages/analysis/analyze-screenshot.ts",
+    "formalize": "tsx packages/patterns/pattern-registry.ts",
+    "evaluate": "tsx packages/evaluation/evaluate-page.ts",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "format:check": "prettier --check ."
+  },
+  "dependencies": {
+    "playwright": "^1.48.0",
+    "tsx": "^4.19.0"
+  },
+  "devDependencies": {
+    "@types/node": "^22.7.0",
+    "prettier": "^3.3.3",
+    "typescript": "^5.6.0"
+  },
+  "engines": {
+    "node": ">=20.0.0"
+  }
+}