用 Claude Code 和 Fable 通过一个提示词创建可用的网页应用
用一句话描述你的想法 - 10 分钟内拿到完整代码和交互式分步开发指南。
- 1.如果尚未安装 Node.js,请从官网下载并安装 LTS 版本。在终端运行 node -v 验证安装 - 应显示版本号。
如果所在地区无法直接访问该服务,请在下载阶段使用 VPN。
Node.js ↗ - 2.通过 npm 全局安装 Claude Code。打开终端执行安装命令,然后按控制台提示完成授权。
Claude Code 对 Claude Pro 和 Max 订阅用户免费。无订阅需付费套餐 - 见费用说明。
Claude Code ↗关于该工具提示词npm install -g @anthropic-ai/claude-code
这个提示词的作用该命令全局安装 Claude Code CLI 工具。无需修改任何内容 - 直接在终端中执行即可。 - 3.为项目创建一个空文件夹,在终端中进入该文件夹,然后运行 claude 命令启动 Claude Code。首次启动时按屏幕提示绑定 Anthropic 账户。
如果所在地区无法访问该服务,授权时需要使用 VPN。
Claude Code ↗关于该工具提示词mkdir my-app && cd my-app && claude
这个提示词的作用创建文件夹 my-app,进入该文件夹并启动 Claude Code 交互式会话。文件夹名称可替换为任意名称。 - 4.将以下提示词粘贴到 Claude Code 会话中。它将一步完成项目结构、逻辑和文件的创建。
Claude Code 会在当前文件夹中自动创建文件,无需手动复制代码。
Claude Code ↗关于该工具提示词构建一个名为「[APP_NAME]」的单页网页应用,功能如下:[DESCRIBE_WHAT_IT_DOES]。使用原生 HTML、CSS 和 JavaScript,全部放在一个 index.html 文件中。界面要简洁且响应式。包含标题「[APP_NAME]」、一个输入表单和一个结果区域。添加基本的输入验证。
这个提示词的作用提示词要求 Claude Code 创建单页网页应用。将 [APP_NAME] 替换为你的应用名称(例如 Task Tracker),将 [DESCRIBE_WHAT_IT_DOES] 替换为应用功能描述(例如:让用户添加任务、标记完成并删除任务)。其余内容保持不变 - Claude 会在当前文件夹中创建 index.html 文件。 - 5.打开 Fable 网站,点击 Get Started,通过 Google 或邮箱登录。免费套餐可创建公开指南。
无需在第三方服务中输入个人或支付信息,除非确有必要。Fable 用于屏幕录制。
Fable ↗ - 6.在 Fable 中启动屏幕录制,用浏览器打开 index.html(双击),演示应用操作 - 输入数据、展示结果。停止录制并发布指南,复制分享链接。
录制前请关闭包含个人信息的标签页 - 它们可能会被录进画面。
Fable ↗
💰 跟着做需要花多少钱价格截至 2026-08
- 免费Node.js完全免费下载和使用。
- 订阅Claude Code需订阅 Claude Pro($20/月)或 Max($100/月);无订阅也可通过 API 按量付费使用。无免费套餐。
- 免费Fable免费套餐可创建公开交互式指南;团队使用有付费套餐可选。
试一试，做第一个打卡的人
为什么是今天
2
48 小时内博主发布的视频
2
来源频道
6166
总播放量
Fableweb
每周攻略发到邮箱
AI 服务变化很快 - 界面和免费额度可能与描述有所不同。