Generate and edit Draw.io, Mermaid, and Excalidraw diagrams from natural language using a structured JSON spec.
by nssa.io1.0k installs47 stars
Coding
Bolt New
Try itBolt.new AI 全栈开发助手，精通浏览器内开发、WebContainer、一键部署
What it does
Bolt.new 是 StackBlitz 推出的 AI 全栈开发平台，完全运行在浏览器中。基于 WebContainer 技术，无需本地安装任何工具，输入一句话描述即可生成、预览、部署一个完整的 Web 应用。
The skill document
Bolt.new AI 全栈开发技能指南
概述
Bolt.new 是 StackBlitz 推出的 AI 全栈开发平台，完全运行在浏览器中。基于 WebContainer 技术，无需本地安装任何工具，输入一句话描述即可生成、预览、部署一个完整的 Web 应用。
核心功能
浏览器内全栈开发（WebContainer）
WebContainer 是 StackBlitz 的核心技术，让 Node.js 直接在浏览器中运行：
- 零配置：不需要安装 Node.js、npm 或任何开发工具
- 完整运行时：支持 npm install、文件系统操作、HTTP 服务器
- 实时预览：代码修改后即时在右侧预览窗口看到效果
- 隔离环境：每个项目独立运行，互不干扰
AI 项目生成与一键部署
- 用自然语言描述应用，AI 自动生成完整项目结构
- 支持多轮对话迭代，生成后可继续修改、添加功能
- 点击 Deploy 按钮直接部署到 Netlify，获得公网 URL，无需配置 CI/CD
支持的技术栈
| 类别 | 支持的技术 |
|---|---|
| 前端框架 | React、Vue 3、Svelte、Solid、Astro、Next.js、Nuxt |
| 样式方案 | Tailwind CSS、CSS Modules、Styled Components、UnoCSS |
| 构建工具 | Vite（默认）、Webpack |
| 后端框架 | Express、Fastify、Hono |
| 数据库 | SQLite（better-sqlite3）、内存数据库、localStorage |
| 包管理 | npm、pnpm |
| 语言 | TypeScript 完全支持 |
提示词技巧
推荐的 prompt 结构
创建一个 [应用类型]，使用 [技术栈]。
功能需求：
1. [核心功能1]
2. [核心功能2]
UI 要求：
- [设计风格]
- [配色方案]
- [响应式要求]
实战示例
创建一个个人记账应用，使用 React + TypeScript + Tailwind CSS。
功能：
1. 添加收入/支出记录（金额、分类、备注、日期）
2. 按月查看收支统计图表（用 recharts）
3. 数据存储在 localStorage
UI：现代简洁风格，蓝色系主色调，移动端优先
关键技巧
- 明确技术栈：不指定的话 AI 会自己选，可能不是你想要的
- 分步迭代：先生成基础版本，再逐步添加功能
- 指定存储方案：浏览器环境限制多，提前说明用 localStorage 还是 SQLite
- 描述 UI 风格：给出具体设计偏好，否则生成的界面可能很朴素
- 遇到报错直接粘贴：把错误信息发给 AI，它通常能自动修复
限制和注意事项
- 不支持原生二进制：C/C++ 扩展、Python、Go 等无法运行
- 数据库受限：不能用 MySQL/PostgreSQL，只能用 SQLite 或内存方案
- 无 Docker 支持：WebContainer 不是虚拟机，不能运行容器
- 文件大小限制：不适合处理大文件或大量静态资源
- 网络请求：浏览器 CORS 策略仍然生效
- 持久化：项目数据存在 StackBlitz 云端，免费账户有存储限制
- 性能：复杂项目在浏览器中运行可能比本地慢
与其他工具对比
| 维度 | Bolt.new | Cursor/Windsurf | v0 (Vercel) |
|---|---|---|---|
| 运行环境 | 浏览器 | 本地 IDE | 浏览器 |
| 全栈能力 | 前后端都支持 | 前后端都支持 | 仅前端组件 |
| 配置成本 | 零配置 | 需安装 IDE | 零配置 |
| 部署 | 一键 Netlify | 需自行配置 | 一键 Vercel |
| 适合场景 | 快速原型、演示 | 正式项目开发 | UI 组件生成 |
| 代码可控性 | 中等 | 高 | 低 |
| 离线使用 | 不支持 | 支持 | 不支持 |
| 项目复杂度 | 中小型 | 不限 | 小型组件 |
Bolt.new 适合"5 分钟出一个能跑的 demo"，Cursor/Windsurf 适合"认真写要上线的项目"。
使用场景和最佳实践
适合场景：快速原型验证、技术演示、学习新框架、黑客松、临时开发
最佳实践：
- 先用简单 prompt 生成骨架，再分步迭代添加功能
- 生成后检查 package.json，确认依赖版本合理
- 重要项目及时导出代码到本地 Git 仓库备份
- 利用 Bolt 生成原型后，迁移到本地 IDE 做正式开发
- 复杂状态管理建议在 prompt 中指定方案（Zustand、Jotai 等）
- 部署前检查环境变量和 API 密钥，避免泄露到前端代码中
Related skills
Join a video meeting as an AI bot with voice, avatar, and screenshare across four operating modes.
by johnpatternai22 installs8 stars
Stores durable facts in a categorized, plain-markdown vault on disk, alongside your agent's built-in memory.
by Iván559 installs18 stars
Find why your productivity system keeps failing, then apply the smallest fix — capacity math, bottleneck routing, durable local notes.
by Iván855 installs69 stars
Fetch raw ad creative, app, ranking, and revenue data from AdMapix as structured JSON.
by fly0pants4.3k installs296 stars
Write, debug, and tune Playwright specs with locator strategy, trace diagnosis, and CI-aware timeouts.
by ivangdavila1.3k installs130 stars
More from zhangifonly
Browse all skillsGet end-to-end guidance for QQ open platform development — official Bot API, channels, Mini Programs, and OAuth2.0.
by zhangifonly67 installs
Zero-dependency Python CLI for WeChat Official Account APIs with a real production-incident pitfall guide.
by zhangifonly102 installs1 stars
AI 小红薯 — 只允许智能体发言的图文社区。发帖、评论、点赞、加入圈子。
by zhangifonly39 installs2 stars
滴滴出行决策助手。Use for: (1) 按预算/时段/人数在快车/特惠/拼车/专车间选型并估算费用区间, (2) 早晚高峰/恶劣天气/节假日的叫车策略, (3) 企业版 API 对接与用车规则配置。DiDi ride-hailing decision guide: product selection and...
by zhangifonly25 installs
伙伴云零代码平台指南。Use for: (1) 零代码数据表格应用搭建（表格/看板/仪表盘）方法, (2) 与简道云/明道云/飞书多维表格的选型对比, (3) 从 Excel 迁移到在线协作数据库的路径设计。Huoban zero-code platform guide: app building, compet...
by zhangifonly25 installs
明道云 APaaS 平台指南。Use for: (1) 零代码应用搭建与 APaaS 能力边界（工作表/工作流/API集成）, (2) 私有化部署选型——明道云是国内私有化最成熟的零代码方案之一, (3) 与 SaaS 型竞品的对比决策。Mingdao APaaS guide: app building, pri...
by zhangifonly25 installs