|
| 1 | +import type { Metadata } from "next"; |
| 2 | +import Link from "next/link"; |
| 3 | +import { Hero } from "@/components/hero/hero"; |
| 4 | +import { Reveal } from "@/components/motion/reveal"; |
| 5 | +import { GithubCta } from "@/components/cta/github-cta"; |
| 6 | +import { getPromptLibrary } from "@/lib/prompt-library"; |
| 7 | +import { getAllArticles } from "@/lib/articles"; |
| 8 | +import { LIST_PROBLEMS } from "@/lib/list-problems"; |
| 9 | + |
| 10 | +export const metadata: Metadata = { |
| 11 | + title: "vibeprompt vs. Replit, Lovable, Bolt, Cursor, Claude Code — which vibe coding tool to pick", |
| 12 | + description: |
| 13 | + "Side-by-side comparison of the major vibe coding tools (Replit, Lovable, Bolt.new, Cursor, Claude Code, v0.dev, Windsurf, Aider) against vibeprompt — the free methodology + prompt library you use with them.", |
| 14 | + alternates: { canonical: "/vs-tools" }, |
| 15 | + keywords: "vibe coding tools, replit vs cursor, lovable vs bolt, vibe code workflow, claude code, cursor alternative, ai coding tool comparison, indie hacker tools 2026", |
| 16 | + openGraph: { |
| 17 | + title: "vibeprompt vs. the major vibe coding tools", |
| 18 | + description: "Replit, Lovable, Bolt, Cursor, Claude Code, v0.dev — how vibeprompt fits alongside each.", |
| 19 | + url: "https://vibeprompt.tech/vs-tools", |
| 20 | + images: [{ url: "https://vibeprompt.tech/opengraph-image", width: 1200, height: 630 }], |
| 21 | + }, |
| 22 | +}; |
| 23 | + |
| 24 | +type Tool = { |
| 25 | + name: string; |
| 26 | + url: string; |
| 27 | + kind: "App builder" | "IDE" | "CLI agent" | "UI generator" | "Methodology"; |
| 28 | + pricing: string; |
| 29 | + worksOn: string; |
| 30 | + bestFor: string; |
| 31 | + caveat: string; |
| 32 | +}; |
| 33 | + |
| 34 | +const TOOLS: Tool[] = [ |
| 35 | + { |
| 36 | + name: "vibeprompt", |
| 37 | + url: "https://vibeprompt.tech", |
| 38 | + kind: "Methodology", |
| 39 | + pricing: "Free, MIT", |
| 40 | + worksOn: "Use with ANY tool below", |
| 41 | + bestFor: "Knowing what to prompt, what order to build in, how to fix it when it breaks", |
| 42 | + caveat: "Doesn't write code itself — it teaches you how to make any of the tools below write better code", |
| 43 | + }, |
| 44 | + { |
| 45 | + name: "Claude Code", |
| 46 | + url: "https://www.anthropic.com/claude-code", |
| 47 | + kind: "CLI agent", |
| 48 | + pricing: "Pay per use ($20+/mo equivalent)", |
| 49 | + worksOn: "Any project, terminal-native", |
| 50 | + bestFor: "Existing repos, real engineering work, autonomous multi-step tasks", |
| 51 | + caveat: "Terminal UI scares non-devs. Strong with structured context (AGENTS.md helps a lot)", |
| 52 | + }, |
| 53 | + { |
| 54 | + name: "Cursor", |
| 55 | + url: "https://cursor.com", |
| 56 | + kind: "IDE", |
| 57 | + pricing: "$20/mo Pro, $40/mo Business", |
| 58 | + worksOn: "Any project, GUI editor", |
| 59 | + bestFor: "Devs migrating from VS Code who want AI inline", |
| 60 | + caveat: "Easy to overuse Tab/inline edits and end up with a messy codebase. Same patterns as Claude Code apply.", |
| 61 | + }, |
| 62 | + { |
| 63 | + name: "Windsurf", |
| 64 | + url: "https://windsurf.com", |
| 65 | + kind: "IDE", |
| 66 | + pricing: "$15/mo Pro, $30/mo Teams", |
| 67 | + worksOn: "Any project, GUI editor", |
| 68 | + bestFor: "Cursor alternative with a different agent loop (Cascade)", |
| 69 | + caveat: "Similar trade-offs to Cursor. Pick based on which agent UX you prefer.", |
| 70 | + }, |
| 71 | + { |
| 72 | + name: "Replit (Agent)", |
| 73 | + url: "https://replit.com", |
| 74 | + kind: "App builder", |
| 75 | + pricing: "Free tier, Core $20/mo", |
| 76 | + worksOn: "New apps, in-browser only", |
| 77 | + bestFor: "Non-devs building greenfield apps from a prompt, with hosting + DB included", |
| 78 | + caveat: "Vendor lock-in to Replit's runtime. Migrating out later is painful. Best for prototypes.", |
| 79 | + }, |
| 80 | + { |
| 81 | + name: "Lovable", |
| 82 | + url: "https://lovable.dev", |
| 83 | + kind: "App builder", |
| 84 | + pricing: "Free trial, $20+/mo", |
| 85 | + worksOn: "New apps, in-browser", |
| 86 | + bestFor: "Non-devs who want a polished landing page or simple full-stack app from a chat", |
| 87 | + caveat: "Similar to Replit — beautiful first 80%, painful last 20% when complexity arrives.", |
| 88 | + }, |
| 89 | + { |
| 90 | + name: "Bolt.new", |
| 91 | + url: "https://bolt.new", |
| 92 | + kind: "App builder", |
| 93 | + pricing: "Free tier, $20+/mo Pro", |
| 94 | + worksOn: "New apps (StackBlitz-hosted)", |
| 95 | + bestFor: "Quick web app prototypes you can export and host yourself", |
| 96 | + caveat: "Output is exportable (better than Replit/Lovable for that) but you still own the maintenance.", |
| 97 | + }, |
| 98 | + { |
| 99 | + name: "v0.dev", |
| 100 | + url: "https://v0.dev", |
| 101 | + kind: "UI generator", |
| 102 | + pricing: "Free tier, $20/mo Pro", |
| 103 | + worksOn: "React + Tailwind components", |
| 104 | + bestFor: "Generating one-off UI components or pages with shadcn/Tailwind", |
| 105 | + caveat: "UI only. Not a full app builder. Pair with Cursor/Claude Code for the backend.", |
| 106 | + }, |
| 107 | + { |
| 108 | + name: "Aider", |
| 109 | + url: "https://aider.chat", |
| 110 | + kind: "CLI agent", |
| 111 | + pricing: "Free, BYO API key", |
| 112 | + worksOn: "Any git repo, terminal", |
| 113 | + bestFor: "Open-source CLI agent, full control, works with any model (Claude, GPT, Gemini, local)", |
| 114 | + caveat: "More configuration than Claude Code. Best for devs who want to tinker with the agent loop.", |
| 115 | + }, |
| 116 | +]; |
| 117 | + |
| 118 | +export default async function VsToolsPage() { |
| 119 | + const [{ prompts }, articles] = await Promise.all([getPromptLibrary(), getAllArticles()]); |
| 120 | + |
| 121 | + return ( |
| 122 | + <div className="pt-12"> |
| 123 | + <Reveal> |
| 124 | + <Hero |
| 125 | + title={"vibeprompt vs.\nthe tools."} |
| 126 | + description="Replit, Lovable, Bolt, Cursor, Claude Code, v0 — they all do part of vibe coding. vibeprompt is the methodology and prompt library you use with whichever tool you pick. Honest comparison, no affiliate links." |
| 127 | + accent="#ffffff" |
| 128 | + /> |
| 129 | + </Reveal> |
| 130 | + |
| 131 | + <div className="mx-auto max-w-6xl px-6 pt-2 pb-10"> |
| 132 | + |
| 133 | + <Reveal> |
| 134 | + <div className="mb-12 max-w-2xl"> |
| 135 | + <p className="text-sm leading-relaxed text-foreground/70"> |
| 136 | + The confusing thing about “vibe coding tools” is that they’re not all the same kind of tool. |
| 137 | + App builders like Replit and Lovable host your code. IDEs like Cursor live on your machine. |
| 138 | + CLI agents like Claude Code run in your terminal. UI generators like v0 only do one slice. |
| 139 | + </p> |
| 140 | + <p className="mt-4 text-sm leading-relaxed text-foreground/55"> |
| 141 | + vibeprompt is a different category entirely — it’s the workflow, the {prompts.length} prompts, |
| 142 | + the {articles.length} field-tested articles you use{" "} |
| 143 | + <em>with</em> any of these tools. That’s why every cell in our column reads “use with any tool below.” |
| 144 | + </p> |
| 145 | + </div> |
| 146 | + </Reveal> |
| 147 | + |
| 148 | + {/* Comparison cards */} |
| 149 | + <div className="space-y-6"> |
| 150 | + {TOOLS.map((t, i) => ( |
| 151 | + <Reveal key={t.name}> |
| 152 | + <article |
| 153 | + className={`border ${i === 0 ? "border-foreground/30 bg-foreground/[0.02]" : "border-foreground/12"} p-6 sm:p-7`} |
| 154 | + > |
| 155 | + <div className="mb-4 flex flex-wrap items-baseline justify-between gap-3"> |
| 156 | + <div> |
| 157 | + <h2 className="text-lg sm:text-xl font-bold tracking-[-0.02em] text-foreground"> |
| 158 | + {t.name} |
| 159 | + </h2> |
| 160 | + <p className="mt-1 text-[10px] font-semibold uppercase tracking-[0.18em] text-foreground/45"> |
| 161 | + {t.kind} · {t.pricing} |
| 162 | + </p> |
| 163 | + </div> |
| 164 | + {i === 0 ? ( |
| 165 | + <span className="text-[9px] font-semibold uppercase tracking-[0.22em] text-foreground/55"> |
| 166 | + You are here |
| 167 | + </span> |
| 168 | + ) : ( |
| 169 | + <a |
| 170 | + href={t.url} |
| 171 | + target="_blank" |
| 172 | + rel="noopener noreferrer" |
| 173 | + className="text-[11px] text-foreground/45 transition-colors hover:text-foreground" |
| 174 | + > |
| 175 | + Visit → |
| 176 | + </a> |
| 177 | + )} |
| 178 | + </div> |
| 179 | + |
| 180 | + <dl className="grid gap-x-6 gap-y-3 sm:grid-cols-3 text-[12px]"> |
| 181 | + <div> |
| 182 | + <dt className="text-[9px] font-semibold uppercase tracking-[0.18em] text-foreground/40 mb-1">Works on</dt> |
| 183 | + <dd className="text-foreground/80 leading-snug">{t.worksOn}</dd> |
| 184 | + </div> |
| 185 | + <div> |
| 186 | + <dt className="text-[9px] font-semibold uppercase tracking-[0.18em] text-foreground/40 mb-1">Best for</dt> |
| 187 | + <dd className="text-foreground/80 leading-snug">{t.bestFor}</dd> |
| 188 | + </div> |
| 189 | + <div> |
| 190 | + <dt className="text-[9px] font-semibold uppercase tracking-[0.18em] text-foreground/40 mb-1">Caveat</dt> |
| 191 | + <dd className="text-foreground/65 leading-snug italic">{t.caveat}</dd> |
| 192 | + </div> |
| 193 | + </dl> |
| 194 | + </article> |
| 195 | + </Reveal> |
| 196 | + ))} |
| 197 | + </div> |
| 198 | + |
| 199 | + {/* Picker matrix */} |
| 200 | + <Reveal> |
| 201 | + <section className="mt-16 border-t border-foreground/12 pt-12"> |
| 202 | + <p className="text-[10px] font-semibold uppercase tracking-[0.22em] text-foreground/45 mb-3"> |
| 203 | + Decision matrix |
| 204 | + </p> |
| 205 | + <h2 className="text-2xl sm:text-3xl font-bold tracking-[-0.02em] text-foreground mb-8"> |
| 206 | + Which one should you actually use? |
| 207 | + </h2> |
| 208 | + |
| 209 | + <div className="grid gap-5 sm:grid-cols-2"> |
| 210 | + <PickCard |
| 211 | + situation="You’re a non-dev with a SaaS idea" |
| 212 | + pick="Replit Agent or Lovable + vibeprompt's workflow" |
| 213 | + why="Use the app builder for speed. Use vibeprompt's PRD template before you start, AGENTS.md template after the first 80% lands." |
| 214 | + /> |
| 215 | + <PickCard |
| 216 | + situation="You're a dev shipping production code" |
| 217 | + pick="Claude Code or Cursor + vibeprompt" |
| 218 | + why="The CLI/IDE agents handle complex codebases best. vibeprompt's 9-step workflow + 56 prompts mean you spend less time figuring out what to ask." |
| 219 | + /> |
| 220 | + <PickCard |
| 221 | + situation="You're building a UI prototype only" |
| 222 | + pick="v0.dev + vibeprompt's prompting craft prompts" |
| 223 | + why="v0 makes the components. vibeprompt's prompting prompts (PromptCraft section) help you get exactly the layout you want on the first try." |
| 224 | + /> |
| 225 | + <PickCard |
| 226 | + situation="You want full control + open source" |
| 227 | + pick="Aider + vibeprompt" |
| 228 | + why="Aider runs locally with any model. vibeprompt fills the gap Aider doesn't — what prompts to send, what order to build in." |
| 229 | + /> |
| 230 | + <PickCard |
| 231 | + situation="You're moving an existing repo to AI-first" |
| 232 | + pick="Claude Code + AGENTS.md from vibeprompt" |
| 233 | + why="Existing codebases need careful context setup. Download vibeprompt's AGENTS.md template, fill it in for your repo, then run Claude Code with it loaded." |
| 234 | + /> |
| 235 | + <PickCard |
| 236 | + situation="You're stuck post-launch" |
| 237 | + pick="vibeprompt's fixes + your existing tool" |
| 238 | + why="46 field-tested fixes for indie devs cover the “0 conversions”, “Show HN sank”, “refund requests in week 1” problems your tool doesn't address." |
| 239 | + /> |
| 240 | + </div> |
| 241 | + </section> |
| 242 | + </Reveal> |
| 243 | + |
| 244 | + {/* Why vibeprompt makes any tool better */} |
| 245 | + <Reveal> |
| 246 | + <section className="mt-16 border-t border-foreground/12 pt-12"> |
| 247 | + <p className="text-[10px] font-semibold uppercase tracking-[0.22em] text-foreground/45 mb-3"> |
| 248 | + Why combine |
| 249 | + </p> |
| 250 | + <h2 className="text-2xl sm:text-3xl font-bold tracking-[-0.02em] text-foreground mb-6"> |
| 251 | + Tools without methodology produce slop. |
| 252 | + </h2> |
| 253 | + <div className="grid gap-5 sm:grid-cols-3"> |
| 254 | + <Reason |
| 255 | + title="The tools all hit the same wall" |
| 256 | + body="Replit, Lovable, Cursor, Claude Code — every one builds the first 80% fast and chokes on the last 20%. That's an industry-wide problem. vibeprompt's articles cover the exact patterns to break out of." |
| 257 | + /> |
| 258 | + <Reason |
| 259 | + title="Prompts compound" |
| 260 | + body={`Most vibe coders rewrite the same prompts every session. ${prompts.length} battle-tested prompts (planning, debugging, refactor, prompting craft) save hours per project — works with any of the tools above.`} |
| 261 | + /> |
| 262 | + <Reason |
| 263 | + title="Fixes for what tools can't fix" |
| 264 | + body="No tool fixes 'I priced it at $5 and nobody trusts it' or 'Reddit removed my post for self-promotion'. vibeprompt does — these are content-shaped problems." |
| 265 | + /> |
| 266 | + </div> |
| 267 | + </section> |
| 268 | + </Reveal> |
| 269 | + |
| 270 | + <Reveal> |
| 271 | + <GithubCta |
| 272 | + title={"Tool missing\nor described wrong?"} |
| 273 | + description="This page should be honest. If we got a tool wrong or missed one, open an issue or PR. No affiliate links anywhere — we don't earn from any of the tools listed." |
| 274 | + accent="#ffffff" |
| 275 | + primaryHref="https://github.com/dotsystemsdevs/vibeprompt/issues/new" |
| 276 | + primaryLabel="Suggest a fix" |
| 277 | + secondaryHref="https://github.com/dotsystemsdevs/vibeprompt" |
| 278 | + secondaryLabel="View source" |
| 279 | + borderTop={false} |
| 280 | + className="mt-12" |
| 281 | + /> |
| 282 | + </Reveal> |
| 283 | + </div> |
| 284 | + </div> |
| 285 | + ); |
| 286 | +} |
| 287 | + |
| 288 | +function PickCard({ situation, pick, why }: { situation: string; pick: string; why: string }) { |
| 289 | + return ( |
| 290 | + <div className="border border-foreground/12 p-5"> |
| 291 | + <p |
| 292 | + className="text-[11px] font-medium text-foreground/55 leading-snug mb-3" |
| 293 | + dangerouslySetInnerHTML={{ __html: situation }} |
| 294 | + /> |
| 295 | + <p className="mb-2 text-[10px] font-semibold uppercase tracking-[0.18em] text-foreground/40">Pick</p> |
| 296 | + <p className="text-[14px] font-semibold text-foreground mb-3">{pick}</p> |
| 297 | + <p |
| 298 | + className="text-[12px] leading-relaxed text-foreground/60" |
| 299 | + dangerouslySetInnerHTML={{ __html: why }} |
| 300 | + /> |
| 301 | + </div> |
| 302 | + ); |
| 303 | +} |
| 304 | + |
| 305 | +function Reason({ title, body }: { title: string; body: string }) { |
| 306 | + return ( |
| 307 | + <div> |
| 308 | + <h3 className="text-[13px] font-semibold text-foreground/90 mb-2">{title}</h3> |
| 309 | + <p className="text-[12px] leading-relaxed text-foreground/60">{body}</p> |
| 310 | + </div> |
| 311 | + ); |
| 312 | +} |
| 313 | + |
| 314 | +export const revalidate = 3600; |
0 commit comments