launchframe 0.2.2 → 0.2.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (26) hide show
  1. package/README.md +147 -144
  2. package/bin/launchframe.mjs +315 -279
  3. package/package.json +1 -1
  4. package/template/.amazonq/cli-agents/clone-website.json +1 -1
  5. package/template/.amazonq/rules/project.md +130 -80
  6. package/template/.augment/commands/clone-website.md +30 -13
  7. package/template/.claude/skills/clone-website/SKILL.md +534 -517
  8. package/template/.clinerules +130 -80
  9. package/template/.codex/skills/clone-website/SKILL.md +31 -14
  10. package/template/.continue/commands/clone-website.md +30 -13
  11. package/template/.continue/rules/project.md +130 -80
  12. package/template/.cursor/commands/clone-website.md +30 -13
  13. package/template/.cursor/rules/project.mdc +22 -20
  14. package/template/.gemini/commands/clone-website.toml +30 -13
  15. package/template/.github/copilot-instructions.md +130 -80
  16. package/template/.github/skills/clone-website/SKILL.md +31 -14
  17. package/template/.opencode/commands/clone-website.md +30 -13
  18. package/template/.windsurf/workflows/clone-website.md +30 -13
  19. package/template/AGENTS.md +100 -79
  20. package/template/README.md +121 -118
  21. package/template/START_HERE.md +15 -15
  22. package/template/docs/design-references/playwright-example.com-1440px.png +0 -0
  23. package/template/docs/design-references/playwright-example.com-390px.png +0 -0
  24. package/template/docs/research/INSPECTION_GUIDE.md +109 -80
  25. package/template/package.json +63 -59
  26. package/template/scripts/recon-playwright.mjs +323 -0
package/README.md CHANGED
@@ -1,144 +1,147 @@
1
- # Launchframe
2
-
3
- > **Scaffold a SaaS-ready Next.js codebase from any URL — in one command.**
4
-
5
- ```bash
6
- npx launchframe@latest <url> "<saas idea>"
7
- ```
8
-
9
- Launchframe drops an [AI-cloner template](https://github.com/JCodesMore/ai-website-cloner-template) into your filesystem, pre-wired with the URL you want to clone and the SaaS you want to build. It **runs `npm install` for you**. Open the new folder in [Cursor](https://cursor.com/) (or any AI editor) and tell your AI **Build it** — they'll follow `launchframe.config.json` + `AGENTS.md` and run the full clone + rebrand pipeline (same as `/clone-website`).
10
-
11
- ## Why Launchframe
12
-
13
- Cloning a website is a solved problem if you have a great AI agent and a great template. What's missing is **a one-command entrypoint that wires those together with your specific intent**.
14
-
15
- - ✅ Pick a real, beautiful, production-tested landing page
16
- - ✅ Pick the SaaS you want to ship
17
- - ✅ Get a buildable Next.js codebase in seconds, ready for your AI agent to clone + rebrand
18
-
19
- You spend your time on product, not on translating Figma boxes into Tailwind.
20
-
21
- ## Quick Start
22
-
23
- ```bash
24
- npx launchframe@latest https://linear.app "AI-powered customer feedback platform"
25
- ```
26
-
27
- Then open **`launchframe-app`** in Cursor and chat: **Build it.**
28
-
29
- That's the whole loop: no manual `npm install`, no pasting the URL again — the CLI installs deps and writes `launchframe.config.json`. Cursor rules treat **Build it** as “run the full clone + rebrand workflow.”
30
-
31
- Optional: **`/clone-website`** in Cursor, or **`--skip-install`** if you only want the files (CI / debugging).
32
-
33
- ```bash
34
- npx launchframe@latest https://linear.app "My idea" --skip-install
35
- ```
36
-
37
- ## What gets generated
38
-
39
- ```
40
- launchframe-app/
41
- ├─ START_HERE.md ← "open Cursor, say Build it"
42
- ├─ launchframe.config.json ← url + saas idea (the directive)
43
- ├─ AGENTS.md ← agent instructions (read by every supported agent)
44
- ├─ .claude/ ← Claude Code skill: /clone-website
45
- ├─ .cursor/ ← Cursor command: /clone-website
46
- ├─ .codex/ .gemini/ .opencode/ .windsurf/ .github/ .augment/
47
- │ .continue/ .amazonq/ ← every other agent gets the same skill, format-adapted
48
- ├─ src/ ← Next.js 16 + shadcn/ui + Tailwind v4 scaffold
49
- ├─ public/ ← becomes populated by the cloner with real assets
50
- ├─ docs/research/ ← extraction artifacts the cloner writes during the run
51
- └─ scripts/ ← asset download + sync scripts
52
- ```
53
-
54
- ## CLI Reference
55
-
56
- ```
57
- npx launchframe@latest <url> "<saas idea>" [options]
58
-
59
- Arguments:
60
- <url> URL of the site you want to clone (e.g. https://linear.app)
61
- <saas idea> One-line description of the SaaS you're building
62
-
63
- Options:
64
- --dir <name> Target directory (default: launchframe-app)
65
- --force Overwrite the target if it already exists
66
- --skip-install Skip npm install (for CI / debugging only)
67
- --help, -h Show this message
68
- --version, -v Show the version
69
- ```
70
-
71
- ### Examples
72
-
73
- ```bash
74
- npx launchframe@latest https://linear.app "AI-powered customer feedback platform"
75
-
76
- npx launchframe@latest https://vercel.com "DevOps platform for ML teams" --dir my-startup
77
-
78
- # Hostname-only — launchframe will prepend https://
79
- npx launchframe@latest stripe.com "B2B billing for AI agent companies"
80
- ```
81
-
82
- ## Supported AI Agents
83
-
84
- | Agent | Status |
85
- | ------------------------------------------------------------- | -------------------------- |
86
- | [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | **Recommended** — Opus 4.7 |
87
- | [Codex CLI](https://github.com/openai/codex) | Supported |
88
- | [Cursor](https://cursor.com/) | Supported |
89
- | [Gemini CLI](https://github.com/google-gemini/gemini-cli) | Supported |
90
- | [GitHub Copilot](https://github.com/features/copilot) | Supported |
91
- | [OpenCode](https://opencode.ai/) | Supported |
92
- | [Windsurf](https://codeium.com/windsurf) | Supported |
93
- | [Cline](https://github.com/cline/cline) / Roo Code | Supported |
94
- | [Continue](https://continue.dev/) | Supported |
95
- | [Amazon Q](https://aws.amazon.com/q/developer/) | Supported |
96
- | [Augment Code](https://www.augmentcode.com/) | Supported |
97
- | [Aider](https://aider.chat/) | Supported |
98
-
99
- Every supported agent receives the same `/clone-website` skill — it's auto-synced from a single source-of-truth file in the template.
100
-
101
- ## How `/clone-website` Works
102
-
103
- A multi-phase pipeline runs inside your AI agent. Browser automation MCP (Chrome MCP / Playwright MCP / Browserbase MCP) is required.
104
-
105
- 1. **Reconnaissance** — full-page screenshots at desktop + mobile, design-token extraction, mandatory scroll/click/hover/responsive sweep
106
- 2. **Foundation** — updates fonts, colors, globals.css; downloads all assets; extracts SVG icons
107
- 3. **Component Specs** — writes detailed `.spec.md` files for every section with exact `getComputedStyle()` values
108
- 4. **Parallel Build** — dispatches builder agents in git worktrees, one per section/component
109
- 5. **SaaS Rebrand Pass** — swaps product name, headlines, feature copy, CTAs, and brand marks to match `launchframe.config.json#idea`. Spacing, color, typography, animations stay 1:1
110
- 6. **Assembly + Visual QA** — merges worktrees, wires `src/app/page.tsx`, runs side-by-side diff against the original
111
-
112
- Each builder agent gets the full component spec inline. No guessing.
113
-
114
- ## Editing the Config Mid-Project
115
-
116
- `launchframe.config.json` is the contract between you and the skill. Change either field any time and re-invoke `/clone-website`:
117
-
118
- ```json
119
- {
120
- "url": "https://stripe.com",
121
- "idea": "Usage-based billing for AI agent startups"
122
- }
123
- ```
124
-
125
- ## Built On
126
-
127
- - The amazing [`ai-website-cloner-template`](https://github.com/JCodesMore/ai-website-cloner-template) by [@JCodesMore](https://github.com/JCodesMore) — Launchframe vendors and extends this as its payload
128
- - [Next.js 16](https://nextjs.org/), [React 19](https://react.dev/), [shadcn/ui](https://ui.shadcn.com/), [Tailwind CSS v4](https://tailwindcss.com/)
129
-
130
- ## Prerequisites
131
-
132
- - [Node.js](https://nodejs.org/) 18+ to run the CLI
133
- - [Node.js](https://nodejs.org/) 24+ inside the scaffolded project (for Next.js 16)
134
- - An AI coding agent with browser automation MCP
135
-
136
- ## Not Intended For
137
-
138
- - Phishing or impersonation
139
- - Passing off someone else's design as your own
140
- - Violating terms of service (some sites prohibit scraping or reproduction — check first)
141
-
142
- ## License
143
-
144
- MIT — see [LICENSE](./LICENSE).
1
+ # Launchframe
2
+
3
+ > **Scaffold a SaaS-ready Next.js codebase from any URL — in one command.**
4
+
5
+ ```bash
6
+ npx launchframe@latest <url> "<saas idea>"
7
+ ```
8
+
9
+ Launchframe drops an [AI-cloner template](https://github.com/JCodesMore/ai-website-cloner-template) into **your current folder (project root)** by default — so **`.cursor`**, **`.claude`**, and the rest of the dotfolders sit where your editor expects them when you open that folder. It **runs `npm install` for you**. Then tell your AI **Build it** (same as `/clone-website`).
10
+
11
+ ## Why Launchframe
12
+
13
+ Cloning a website is a solved problem if you have a great AI agent and a great template. What's missing is **a one-command entrypoint that wires those together with your specific intent**.
14
+
15
+ - ✅ Pick a real, beautiful, production-tested landing page
16
+ - ✅ Pick the SaaS you want to ship
17
+ - ✅ Get a buildable Next.js codebase in seconds, ready for your AI agent to clone + rebrand
18
+
19
+ You spend your time on product, not on translating Figma boxes into Tailwind.
20
+
21
+ ## Quick Start
22
+
23
+ From an **empty** project folder (or after `git init` only):
24
+
25
+ ```bash
26
+ mkdir my-saas && cd my-saas
27
+ npx launchframe@latest https://linear.app "AI-powered customer feedback platform"
28
+ ```
29
+
30
+ Then open **this folder** in [Cursor](https://cursor.com/) and chat: **Build it.**
31
+
32
+ Files land in the **current directory** so workspace rules apply. Prefer a subfolder? Use `--dir launchframe-app`.
33
+
34
+ Optional: **`/clone-website`** in Cursor, or **`--skip-install`** for CI / debugging.
35
+
36
+ ```bash
37
+ npx launchframe@latest https://linear.app "My idea" --skip-install
38
+ ```
39
+
40
+ ## What gets generated
41
+
42
+ ```
43
+ my-saas/ (or use --dir to create a subfolder)
44
+ ├─ START_HERE.md ← "open Cursor, say Build it"
45
+ ├─ launchframe.config.json ← url + saas idea (the directive)
46
+ ├─ AGENTS.md ← agent instructions (single source of truth)
47
+ ├─ .cursor/ ← at project root (Cursor rules + /clone-website)
48
+ ├─ .claude/ ← Claude Code skill
49
+ ├─ .codex/ .gemini/ .opencode/ .windsurf/ .github/ .augment/
50
+ │ .continue/ .amazonq/ ← every other agent gets the same skill, format-adapted
51
+ ├─ src/ ← Next.js 16 + shadcn/ui + Tailwind v4 scaffold
52
+ ├─ public/ ← becomes populated by the cloner with real assets
53
+ ├─ docs/research/ ← extraction artifacts the cloner writes during the run
54
+ └─ scripts/ ← asset download + sync scripts
55
+ ```
56
+
57
+ ## CLI Reference
58
+
59
+ ```
60
+ npx launchframe@latest <url> "<saas idea>" [options]
61
+
62
+ Arguments:
63
+ <url> URL of the site you want to clone (e.g. https://linear.app)
64
+ <saas idea> One-line description of the SaaS you're building
65
+
66
+ Options:
67
+ --dir <path> Output folder (default: . — current directory / project root)
68
+ --force Merge into a non-empty directory (use with care)
69
+ --skip-install Skip npm install (for CI / debugging only)
70
+ --help, -h Show this message
71
+ --version, -v Show the version
72
+ ```
73
+
74
+ ### Examples
75
+
76
+ ```bash
77
+ npx launchframe@latest https://linear.app "AI-powered customer feedback platform"
78
+
79
+ npx launchframe@latest https://vercel.com "DevOps for ML" --dir launchframe-app
80
+
81
+ # Hostname-only — launchframe will prepend https://
82
+ npx launchframe@latest stripe.com "B2B billing for AI agent companies"
83
+ ```
84
+
85
+ ## Supported AI Agents
86
+
87
+ | Agent | Status |
88
+ | ------------------------------------------------------------- | -------------------------- |
89
+ | [Claude Code](https://docs.anthropic.com/en/docs/claude-code) | **Recommended** — Opus 4.7 |
90
+ | [Codex CLI](https://github.com/openai/codex) | Supported |
91
+ | [Cursor](https://cursor.com/) | Supported |
92
+ | [Gemini CLI](https://github.com/google-gemini/gemini-cli) | Supported |
93
+ | [GitHub Copilot](https://github.com/features/copilot) | Supported |
94
+ | [OpenCode](https://opencode.ai/) | Supported |
95
+ | [Windsurf](https://codeium.com/windsurf) | Supported |
96
+ | [Cline](https://github.com/cline/cline) / Roo Code | Supported |
97
+ | [Continue](https://continue.dev/) | Supported |
98
+ | [Amazon Q](https://aws.amazon.com/q/developer/) | Supported |
99
+ | [Augment Code](https://www.augmentcode.com/) | Supported |
100
+ | [Aider](https://aider.chat/) | Supported |
101
+
102
+ Every supported agent receives the same `/clone-website` skill — it's auto-synced from a single source-of-truth file in the template.
103
+
104
+ ## How `/clone-website` Works
105
+
106
+ A multi-phase pipeline runs inside your AI agent. Browser automation MCP (Chrome MCP / Playwright MCP / Browserbase MCP) is required.
107
+
108
+ 1. **Reconnaissance** — full-page screenshots at desktop + mobile, design-token extraction, mandatory scroll/click/hover/responsive sweep
109
+ 2. **Foundation** — updates fonts, colors, globals.css; downloads all assets; extracts SVG icons
110
+ 3. **Component Specs** — writes detailed `.spec.md` files for every section with exact `getComputedStyle()` values
111
+ 4. **Parallel Build** — dispatches builder agents in git worktrees, one per section/component
112
+ 5. **SaaS Rebrand Pass** — swaps product name, headlines, feature copy, CTAs, and brand marks to match `launchframe.config.json#idea`. Spacing, color, typography, animations stay 1:1
113
+ 6. **Assembly + Visual QA** — merges worktrees, wires `src/app/page.tsx`, runs side-by-side diff against the original
114
+
115
+ Each builder agent gets the full component spec inline. No guessing.
116
+
117
+ ## Editing the Config Mid-Project
118
+
119
+ `launchframe.config.json` is the contract between you and the skill. Change either field any time and re-invoke `/clone-website`:
120
+
121
+ ```json
122
+ {
123
+ "url": "https://stripe.com",
124
+ "idea": "Usage-based billing for AI agent startups"
125
+ }
126
+ ```
127
+
128
+ ## Built On
129
+
130
+ - The amazing [`ai-website-cloner-template`](https://github.com/JCodesMore/ai-website-cloner-template) by [@JCodesMore](https://github.com/JCodesMore) — Launchframe vendors and extends this as its payload
131
+ - [Next.js 16](https://nextjs.org/), [React 19](https://react.dev/), [shadcn/ui](https://ui.shadcn.com/), [Tailwind CSS v4](https://tailwindcss.com/)
132
+
133
+ ## Prerequisites
134
+
135
+ - [Node.js](https://nodejs.org/) 18+ to run the CLI
136
+ - [Node.js](https://nodejs.org/) 24+ inside the scaffolded project (for Next.js 16)
137
+ - An AI coding agent with browser automation MCP
138
+
139
+ ## Not Intended For
140
+
141
+ - Phishing or impersonation
142
+ - Passing off someone else's design as your own
143
+ - Violating terms of service (some sites prohibit scraping or reproduction — check first)
144
+
145
+ ## License
146
+
147
+ MIT — see [LICENSE](./LICENSE).