software

Vibe Coding 用 Replit 开发 Pokémon 搜索应用

发布: (2026年2月2日 GMT+8 18:42)
8 分钟阅读
原文: Dev.to

Source: Dev.to

（请提供您希望翻译的正文内容，我将为您翻译成简体中文并保持原有的格式。）

构建一个 Pokémon 搜索应用 — 完全不写代码

“我们要构建一个 Pokémon 搜索应用。但我们甚至不写一行代码。” 🤨

我知道，作为一个曾经以手工编写每一行代码为荣的开发者，这听起来简直是亵渎。请坚持一下，看看这些工具在过去一年里到底进步了多少。

我们将通过 vibe coding 来构建应用：你用普通英文描述想要的功能，AI 完成繁重的工作。你通过审查、重新提示并引导它，最终得到让你满意的成品 🤞。

在本文中我们将使用 Replit。后续文章会涉及 Cursor、Claude Code 等其他工具。

*编辑：这里是使用 Cursor 的版本 — Vibe Coding a Pokémon Search App with Cursor。

为了加分，我们甚至不打字，而是使用 WhisprFlow 之类的语音转代码工具，或者 SuperWhisper、VoiceTypr（是的，去掉元音的命名趋势仍在继续 🤷‍♂️）。

之前的“经典”教程

  • Getting started with Vue 3 – building a Pokémon search application
  • Getting started with React – building a Pokémon search application

那些教程属于“老派”（此时此刻我可以说它们已经老了）。这一次不同：同样的 Pokémon 搜索应用，少打字，多 vibing（😂 我知道，我的双关太糟糕了）。

如果你想跟着操作，在 Replit 上创建一个账号。

专业提示： 复制粘贴下面的提示语，并在感觉冒险时自行调整。

1️⃣ 编码前先计划

即使在即兴编码时，你也应该先制定计划。这在“正常”开发时就是 TheWayToDoIt™，现在也不例外。

  1. 在 Replit 中，选择 Plan mode（见下方截图）。
  2. 添加以下提示：
Our task is to build a Pokémon search web app. Before writing any code, produce a detailed PRD (product requirement document) (pages, components, state, API calls, error states, loading states, accessibility, folder structure, and a deployment plan for GitHub Pages).

After the PRD, list a numbered implementation checklist.

Do NOT write code yet.

你可以点击 Improve Prompt 按钮（我已经点击），然后会得到如下精炼版本：

A comprehensive web‑based Pokémon search application that allows users to search and view detailed information about Pokémon using the PokéAPI.

Core Features:
- Search Pokémon by name or ID with autocomplete suggestions
- Display detailed Pokémon information (stats, types, abilities, sprites)
- Browse and filter Pokémon list with pagination
- Responsive design that works on mobile and desktop devices

Visual References:
- Style Guide:
  - Colors: Primary #FFCB05 (Pokémon yellow), Secondary #3D7DCA (Pokémon blue), Accent #FF0000 (Pokéball red), Background #F8F8F8 (light grey), Text #2A2A2A (dark grey), Card Background #FFFFFF (white)
  - Design: Flexo/Poppins/Roboto fonts, card‑based grid layout, rounded corners (12 px radius), smooth transitions, mobile‑first responsive design, clean search interface with prominent search bar

Special Requirements:
- Must include a detailed PRD covering: pages, components, state management, API calls, error states, loading states, accessibility considerations, folder structure, and deployment plan for GitHub Pages
- Provide a numbered implementation checklist after the PRD
- DO NOT include actual code implementation – documentation and planning only

这比我最初写的提示要好得多 😬，所以我们就使用它吧。如果你愿意，随意调整计划。

2️⃣ 设置 AI 的自主性

  • 选择 High 自主性（此案例适用）。
  • 启用 App testing —— 这将使 AI 解决可能出现的明显错误。

当您对选择满意后，点击 Start building。

3️⃣ 让 AI 自己动手

在我的一次运行中，Replit 用了 21 分钟 完成了全部工作（启用 App 测试时会更久），花费了 $7.27。让我们看看这杯相当于 Frappuccino 价位的星巴克咖啡能得到什么… ☕

Replit 的一个很酷的地方是 everything 都集成在他们的网页界面中：database、auth、secrets、domain purchasing、Stripe wiring，您能想到的都有。他们还有一个 Preview pane，可以实时观看应用的构建过程。

[Insert screenshot or description of the generated app layout]

4️⃣ 发布应用

  1. 选择一个（子）域名——我使用了 pokedex-nikolabreznjak.replit。
  2. 点击 Publish now 按钮。

你的应用现在已上线，地址为：

https://pokedex-nikolabreznjak.replit.app/

⚠️ 不舒服的真相

仍然把 AI 编码工具视为“作弊”或“还不成熟”的人 正在错失良机。无论是更快交付 MVP、快速熟悉陌生代码库，还是整体学习，机会成本都是真实存在的。

重要提示： 如果你只是“随意敲代码”，对自己 写的东西 完全不了解（也没有学习的欲望），那你根本没有抓住重点。

想要高质量而不 YOLO‑coding 吗？

  1. 告诉模型： “解释一下你打算做什么，但不要写任何代码。”
  2. 请求一份长规格文档（包括架构、边缘情况、测试计划）。
  3. 反复完善该文档，直到它足够稳固。
  4. 然后说：“现在，完美实现这个规格。”

🎉 最后思考

我从未想过最火的新编程语言会是 [insertLanguageHere]。之所以这么说，是因为从技术上讲，你可以使用 任何 语言——AI 会处理它。

祝你编码愉快！🚀

…大多数工具都会理解你的意思。如果不行，你可以把它丢进 ChatGPT（或任何类似工具）进行翻译，然后把翻译后的提示词输入到 AI 工具中。

不，世界不会让开发者灭绝，但它肯定会让大量非开发者能够创造出真正赚钱的东西。你可以选择在旁观望，或是加入行动，看看它如何帮助你——也许现在正是你去做那个 一直没有时间完成的 项目的时机。

我为你加油，祝你好运！

以 * 开头的链接是推荐链接。

如果你喜欢这些内容并决定通过这些链接注册，你就帮助我满足咖啡因上瘾 ☕️

非常感谢，你这光辉的人类！🙌

你坚持到了最后，这是一枚 🎖️

P.S. 如果你在想，最近的风格受到了一部令人耳目一新的 litRPG 系列小说《Dungeon Crawler Carl》的影响。

祝你玩得开心！👋

Back to Blog

相关文章

阅读更多 »