匠人学院 JR Academy
  • Position

    我现在在哪,该往哪走?

    几道题看你现在的岗位受 AI 影响多大、机会在哪。免费,不用注册。

    免费看看我现在在哪

    AI 对职业的影响

    我的工作会被 AI 替代吗常见职业的 AI 影响与转型方向AI 时代的新岗位做什么、要求什么、怎么转过去AI 影响自测几道题看你所在岗位的风险和机会

    测一测

    能力测评AI Engineer 面试准备度自测职业性格测试找到和你性格匹配的方向职业规划回答几个问题,看可能适合的职业回国求职评估按学校、专业、毕业时间看回国机会
  • Skill

    不知道该学什么 AI?

    先按方向免费学,每个方向从入门讲到动手做;想系统学再看训练营和导师。

    按方向免费开始学

    按方向免费学

    Vibe Coding用 AI 写代码,零基础可学AI 办公提效文档、表格、汇报用 AI 省时间Prompt 大师把需求说清楚的写法AI EngineerRAG、Agent、MCP 工程实践AI 数据分析用 AI 做查询、清洗和报表全部学习方向 →

    训练营与课程

    全部训练营按职业方向、难度、形式筛选AI Engineer Bootcamp从 LLM 应用到 Agent 的工程训练营人人都能学的 AI Coding非技术背景的 AI 编程实战AI 工作流提效营在职人士的 AI 工作流导师团队一线工程师与行业导师全部课程 →

    动手练与资料

    互动 LabPrompt、前端、Python、AWS 在线练学习路线图一张图看清该按什么顺序学Cheat Sheets语言与工具速查表Wiki 知识库AI 工具与概念讲解视频讲座、公开课、学员分享免费资源 →
  • Evidence

    拿什么让雇主相信你?

    证书、项目、团队实战、比赛作品,最后整理成一份作品档案。

    了解作品档案

    考证

    考证匠 · 全部认证AWS、Azure、GCP、Claude 等备考与模考AWS SAA-C03云架构师入门认证Azure AI-102微软 AI 工程师认证Claude 认证Anthropic Claude 系列认证模拟考试按真实考试界面限时练全部认证 →

    项目与团队实战

    P3 团队实战和真人协作做项目,模拟实习式的团队流程P3 项目经历P3 项目能写进简历的部分Demo Day项目成果展示P3 证书完成项目后的证明P3 全部 →

    比赛与作品

    黑客松限时做出一个作品提交作品把你的项目放进作品展示CareerOS 作品档案在桌面版做任务,提交的结果整理成作品
    考证匠浏览器插件 + App + 小程序截屏分析考题,随时刷题了解考证匠
  • Connect

    怎么把自己推出去?

    简历、面试、内推、导师。先看你和目标岗位差多少,再决定从哪补。

    用求职匠开始

    简历与机会

    毕业生求职澳洲、中国、马来西亚、新加坡、美国、英国求职准备求职匠AI 求职工作台:改简历、找岗位、投递AI 简历对照 JD 改写简历内推机会学员和导师分享的内推岗位机会实习、项目和合作机会Offer 榜学员拿到的 Offer

    面试

    AI 模拟面试文字或语音练一次,看差在哪面试中心按公司和岗位找题面经真实面试经历System Design 手册系统设计面试准备面试全部 →

    导师

    1v1 导师按小时约 AI、求职、技术导师拼团私教几个人一起上,每人更便宜职业辅导服务简历、面试、方向的辅导套餐成为导师加入匠人导师团队
    求职匠桌面版一个工作台管完整求职在 macOS/Windows 整理真实经历,按岗位完善简历版本。了解求职匠
  • Community

    去哪认识同路的人?

    讲座、公开课、Workshop、黑客松,线上线下都有。

    看近期活动

    活动类型

    讲座行业嘉宾分享公开课免费试听课程内容Workshop动手做一个小作品黑客松组队限时开发新生节开学季的校园活动

    城市

    悉尼悉尼的线下活动墨尔本墨尔本的线下活动布里斯班布里斯班的线下活动线上在哪都能参加全部活动 →

    社群

    职业社区求职者互助学习小组找人一起学Discord在线交流群
企业会员下载 CareerOS
0
匠人学院 JR Academy学AI来匠人

Follow Us

linkedinfacebooktwitterinstagramweiboyoutubebilibilitiktokxigua

We Accept

/image/layout/pay-paypal.png/image/layout/pay-visa.png/image/layout/pay-master-card.png/image/layout/pay-airwallex.png/image/layout/pay-alipay.png
EN
产品

CareerOS 与工具

  • CareerOS
  • 考证匠
  • 求职匠
  • 求职匠网页版
  • 求职匠分析报告
  • 求职匠桌面版下载
  • 我的求职报告
  • 购买报告次数
  • 求职匠账单
  • AI 工具箱
  • AI Skill 商城

会员与课程

  • 会员
  • AI 会员
  • AI Engineer VIP
  • 训练营
  • Training Camp
  • 看板学习
  • AI Builder 课程
  • MCP 课程
  • NotebookLM Workshop
  • Business Analyst 课程
  • Web全栈班
  • DevOps项目班
  • 数据工程全栈班
  • 数据分析项目班
  • 编程入门班
  • 算法集训营

求职服务

  • 毕业生求职
  • 澳洲毕业生求职
  • 中国毕业生求职
  • 马来西亚毕业生求职
  • 新加坡毕业生求职
  • 美国毕业生求职
  • 英国毕业生求职
  • 1v1 辅导
  • 职业辅导
  • BA和产品经理实习
  • 数据科学实习
  • 数据分析实习
  • Marketing实习
  • 简历修改
  • 面试指导
  • 岗位代投
  • 职位监控
  • LinkedIn代运营
  • LinkedIn人脉代加
内容库

学习方向

  • 全部学习方向
  • AI Engineer
  • Context Engineering
  • Vibe Coding
  • Prompt Master
  • AI Builder
  • AI 产品经理
  • Python 入门
  • AI 办公提效
  • AI 数据分析
  • AI 财务
  • AI 内容创作
  • AI 视觉创作
  • 前端开发
  • Hermes Agent
  • OpenClaw 本地智能体

互动 Lab

  • Prompt Lab
  • Frontend Lab
  • JavaScript Lab
  • Python Lab
  • AWS Lab
  • Azure Lab
  • LLM Lab
  • Git Lab

资料与指南

  • Wiki 知识库
  • 学习 Wiki
  • Cheat Sheets
  • 学习路线图
  • AI 路线图
  • 视频
  • 博客
  • 面试手册
  • 模拟考试
  • 免费资源

城市

  • 悉尼
  • 墨尔本
  • 布里斯班
  • 阿德莱德
  • 新加坡
  • 吉隆坡
  • 伦敦
  • 纽约
  • 旧金山
  • 洛杉矶
  • 西雅图
  • 多伦多
  • 温哥华

移民

  • 澳洲移民
  • 技术移民189/190/491
  • 雇主担保482/186/494
  • 投资移民188/888
  • 英国移民
  • 美国移民
  • 加拿大移民
  • 新加坡移民
  • 马来西亚移民
企业

企业服务

  • AI for Business
  • 企业门户登录
  • 企业培训
  • 实习合作
  • 招聘合作
  • Enterprise (EN)

Metatree AI Lab

  • Metatree AI Lab
  • AI 解决方案
  • 数字员工
  • 案例
  • Metatree AI Lab(英文)
  • AI Services(英文)
  • Digital Employee(英文)
  • Work(英文)

青少年 AI 教育

  • Airbotix 少儿 AI 编程
  • 澳洲家长实用资料库
  • NAPLAN 成绩单怎么看
  • My School 学校数据指南
  • 悉尼私校学费 2026
  • 少儿编程课程与训练营
关于

公司

  • 关于我们
  • 匠人导师
  • 成为导师
  • 新闻资讯
  • 元宇宙课堂
  • 匠人工作
  • 匠人商店J3.Club
  • 联系我们

帮助与条款

  • 常见问题
  • 服务条款
  • 隐私政策
  • 取消与退款政策
  • 网站地图

友情链接

  • CS Browser

联系

  • hello@jiangren.com.au
  • 0421-672-555

地址

Level 10b, 144 Edward Street, Brisbane CBD (Headquarter)
Level 2, 171 La Trobe St, Melbourne VIC 3000
四川省成都市武侯区桂溪街道天府大道中段500号D5东方希望天祥广场B座45A13号
Business Hub, 155 Waymouth St, Adelaide SA 5000

Disclaimer

footer-disclaimerfooter-disclaimer

JR Academy acknowledges Traditional Owners of Country throughout Australia and recognises the continuing connection to lands, waters and communities. We pay our respect to Aboriginal and Torres Strait Islander cultures; and to Elders past and present. Aboriginal and Torres Strait Islander peoples should be aware that this website may contain images or names of people who have since passed away.

匠人学院网站上的所有内容,包括课程材料、徽标和匠人学院网站上提供的信息,均受澳大利亚政府知识产权法的保护。严禁未经授权使用、销售、分发、复制或修改。违规行为可能会导致法律诉讼。通过访问我们的网站,您同意尊重我们的知识产权。JR Academy Pty Ltd 保留所有权利,包括专利、商标和版权。任何侵权行为都将受到法律追究。查看用户协议

© 2017-2026 JR Academy Pty Ltd. All rights reserved.

ABN 26621887572

首页学习AI课程考证
  1. 首页
  2. 学技能
  3. 资源中心
  4. Bolt.new 实战手册:浏览器里用 AI 搭全栈应用 — Bolt.new 进阶技巧:省 token、少踩坑、出活快
JR Academy · Blog职业洞察

Bolt.new 实战手册:浏览器里用 AI 搭全栈应用 — Bolt.new 进阶技巧:省 token、少踩坑、出活快

掌握 Bolt.new 高级 prompt 技巧、token 节约策略、三阶段开发法和常见坑的解决方案

发布日期2026-11-05
阅读时长1 分钟
作者

快速导航

  • Prompt 写法的核心原则
  • 一次只改一件事
  • 用专业词汇代替模糊描述
  • 指定文件和组件
  • 三阶段开发法
  • Phase 1:搭骨架
  • Phase 2:接数据库 + 用户系统
  • Phase 3:打磨和高级功能
  • Token 省着用
  • 常见坑和解决方案
  • 生成的代码报错,AI 改了好几轮还是报错
  • 浏览器加载慢、403/404 错误
  • Supabase 权限错误(403)
  • 实战案例:从零搭一个 AI 工具导航站

用 Bolt.new 一段时间后你会发现,同样的需求,会写 prompt 的人可能 3 条消息就搞定,不会写的人 20 条消息还在绕圈子——而且每条消息都在烧 token。这一章讲的就是怎么更高效地用 Bolt.new。

Bolt.new prompting tips

Prompt 写法的核心原则

一次只改一件事

这是最重要的一条。不要在一个 prompt 里塞五六个需求:

别这么写:

改一下 UI 风格,加个搜索功能,修复那个 bug,把数据库换成 Supabase,还有加个深色模式

应该这么写:

第 1 条:修复点击"删除"按钮后列表没有刷新的 bug
第 2 条:添加搜索框,输入时实时过滤列表
第 3 条:把主题切换成深色模式

一次改一件事,出了问题好定位,想回滚也精准。

用专业词汇代替模糊描述

❌ "把文字弄大一点、粗一点"
✅ "标题字体改成 28px,font-weight 设为 700"

❌ "按钮之间太挤了"
✅ "按钮之间加 16px 的 gap"

❌ "这个页面不好看"
✅ "参考 Linear 的设计风格,用 slate 色系,卡片加 1px border 和 8px 圆角"

指定文件和组件

项目大了以后,告诉 AI 改哪个文件能大幅减少 token 消耗:

只修改 src/components/TaskList.tsx 里的排序逻辑,
把默认排序从按创建时间改成按优先级降序。
不要动其他文件。

三阶段开发法

Bolt.new 社区里流行一套 Mega Prompt 模板,把项目开发分成三个阶段。我觉得这个思路很实用:

Phase 1:搭骨架

创建一个 SaaS 仪表盘应用:
- 技术栈:React + Vite + Tailwind + shadcn/ui
- 页面:Landing Page、Dashboard、Settings
- 响应式布局,手机端适配
- 侧边栏导航 + 顶部搜索栏
- 数据先用 mock 数据,后面再接数据库

这一步的重点是把架构和导航确定下来,不急着加功能。

Phase 2:接数据库 + 用户系统

现在把 mock 数据换成 Supabase 数据库:
1. 创建 users、projects、tasks 三张表
2. 加上邮箱注册/登录
3. 用 Row Level Security 确保用户只能看自己的数据
4. Dashboard 页面从数据库读取真实数据

Phase 3:打磨和高级功能

1. 添加 Stripe 订阅支付(月付 $9.99)
2. 任务支持拖拽排序(用 @dnd-kit/core)
3. 添加实时通知功能
4. 性能优化:大列表用虚拟滚动

分阶段做的好处:每个阶段结束后你都有一个能跑的版本,随时可以停下来部署。

Token 省着用

Bolt.new 的 token 消耗有个坑:项目越大,每条 prompt 消耗的 token 越多。因为 AI 每次回复都要读一遍整个项目代码。

一些数据参考:

  • 新项目:每条 prompt 大约消耗 ~10,000 tokens
  • 20 个组件的项目:每条 prompt 大约消耗 ~100,000 tokens

省 token 的几个技巧:

  1. 第一条 prompt 写详细:把核心功能一次说清楚,比后面一点一点加要省
  2. 指定操作范围:说明改哪个文件/组件,AI 就不需要扫描整个项目
  3. 用 Haiku 做小改动:改文案、调颜色这种事不需要 Sonnet
  4. 让 AI 生成 README:生成一份 README.md,总结项目结构和每个组件的作用——下次开发时引用 README 可以减少 AI 的"理解成本"

常见坑和解决方案

生成的代码报错,AI 改了好几轮还是报错

这种"错误循环"是 AI 编辑器的通病。Bolt V2 的自动 debug 功能已经把这个问题减少了 98%,但复杂场景还是会遇到。

解决方案:

把完整的错误信息粘贴过来(包括文件名和行号),然后说:
"请只关注这个错误,不要改其他任何代码"

如果 3 轮还没解决,直接回滚到出错前的版本,换个思路重新描述需求。

浏览器加载慢、403/404 错误

# 检查清单:
# 1. 用 Chrome 或 Chromium 浏览器(Safari/Firefox 兼容性差)
# 2. 关掉广告拦截器(会拦截 WebContainers 资源)
# 3. 关掉 VPN(某些 VPN 会阻断 StackBlitz 的连接)
# 4. 终端里跑一下 build 试试:
npm run build

Supabase 权限错误(403)

99% 的原因是 Row Level Security (RLS) 没配好。在对话里说:

帮我检查 todos 表的 RLS 策略,
确保登录用户可以增删改查自己的数据

实战案例:从零搭一个 AI 工具导航站

这是一个我觉得很适合用 Bolt.new 做的项目类型——内容展示 + 简单交互,不需要复杂后端。

Prompt 1:

用 React + Tailwind + shadcn/ui 创建一个 AI 工具导航站:
- 首页网格展示工具卡片(logo、名称、一句话描述、标签、链接)
- 顶部搜索框 + 标签筛选(生成类、编程类、设计类、写作类)
- 点击卡片跳转到工具官网(新标签页打开)
- 支持提交新工具(表单 + localStorage)
- 深色主题,参考 futurepedia.io 风格

Prompt 2:

接 Supabase 数据库,把工具数据从 mock 迁移到 DB。
加一个 admin 页面(/admin),可以审核用户提交的工具。

两条 prompt,大约 10 分钟,一个实用的 AI 工具导航站就出来了。

作者
一键分享或复制链接
← 上一篇Bolt.new 实战手册:浏览器里用 AI 搭全栈应用 — Bolt.new 核心功能详解:从 prompt 到生产级全栈应用下一篇 →Bolt.new 实战手册:浏览器里用 AI 搭全栈应用 — Bolt.new 常见问题 FAQ:定价、踩坑和选型建议

相关文章推荐

Google Cloud Agentic Architect 本月中旬 GA、AWS 推非技术 AI 证书 | IT 日报 2026-11-06

2026-11-06

GitHub Copilot 实战指南 — Copilot AI Code Review:30 秒让 AI 帮你审 PR,三档深度随需切换

2026-11-05

GitHub Copilot 实战指南 — 多模型选型实战:29 个模型怎么选,Auto 还是手动指定?

2026-11-05

GitHub Copilot 实战指南 — 常见问题、定价与选型建议

2026-11-05

GitHub Copilot 实战指南 — 进阶玩法:Coding Agent、自定义指令与 MCP

2026-11-05

GitHub Copilot 实战指南 — 核心功能深度解析:补全、Chat 与 Agent Mode

2026-11-05
查看全部文章 →

看完了,下一步

不知道下一步学什么?说说你的情况

说说你现在做什么、想去哪,按技能、证据、经验、表达、定位五类看差在哪、先补什么。不用登录。

对照我的情况
  • 技能按方向免费学 AIVibe Coding、AI 办公、Prompt、AI Engineer 等方向,按章节从入门学起。看全部学习方向 →
  • 定位按岗位看学习路线图前端、后端、数据、AI 等方向,按阶段列出要学的内容和先后顺序。看全部路线图 →
  • 表达练一次 AI 模拟面试选一个岗位开始模拟面试,练习把经历和项目讲清楚。去练一次 →

不确定下一步做什么?

带上这页的主题,对照你的情况看差在哪。

对照我的情况
JR Academy
全球华人学习 AI 第一站
训练营免费资源AI学习职业辅导
精选推荐
AI 职业影响地图
测测你的职业风险等级,查看转型路径与学习方向
热门工具
AI & 数据训练营
系统化课程 + 真实项目实战,快速提升竞争力
热门课程
1v1 就业辅导
资深导师一对一指导,简历优化 + 面试准备
职业辅导
企业内训定制
AI 技能培训方案,助力团队升级
企业服务
热门标签
Vibe CodingAI 编程CursorClaude求职攻略Prompt前端开发后端开发
订阅更新

获取最新 AI 学习资源、技术教程和求职攻略,直接送达邮箱。

我们尊重您的隐私,不会发送垃圾邮件