- 难度
- 中等
- 适合
- 入门 / 进阶
- 主要语言
- TypeScript
- GitHub
- ★ 7.0k
- 许可证
- MIT
- 快照日期
- 2026年8月9日
先判断要不要学
这个项目值得拆什么？
Llama Coder 是一个开源 Artifacts 式小应用生成器：用户描述需求，服务端调用 Together AI 生成代码，浏览器内用 esbuild-wasm 和沙箱 iframe 构建预览。它将提示词、流式输出、自动修复、沙箱和分享收在一个中等规模 Next.js 应用中。
- 01
产品链路与 vibe coding 学习目标直接一致。
- 02
仓库自带 architecture.md，可按架构图定向阅读。
- 03
预览器从旧 Sandpack 思路演进到 esbuild-wasm+沙箱 iframe，适合学安全边界。
可以学什么
不只是看代码，而是找到产品的骨架
- 学 AI 接入
- 学界面
- 学产品结构
- 学数据库
- 学部署
代码生成与自动修复
对照提示配置、生成请求和 chat-auto-fix，看模型输出如何变成可执行反馈环。
app/api · lib/generation.ts · lib/prompts.ts · lib/chat-auto-fix.ts不可信代码预览
学习依赖解析、浏览器编译和 sandboxed iframe 之间的分层。
lib/preview · preview-kits/baseui · architecture.md可分享的生成结果
跟踪从会话状态、Prisma 持久化到分享路由的产品闭环。
app/share · prisma/schema.prisma · lib/prisma.ts三段学习路径
从理解、修改到做出你的版本
0130 分钟先跑通
画出生成与预览数据流
- 读 README 与 architecture.md
- 标出 app/api、lib/generation.ts 和 lib/preview 边界
- 识别所有外部服务
完成标志：一张不超过 8 节点的数据流图。
022 小时动手改
修改一个生成体验切片
- 用 mock 输出运行 UI
- 增加一个提示模板
- 在预览失败时显示结构化错误
- 补一个 auto-fix 测试
完成标志：一个可演示、可解释失败的生成流。
031 天做变体
做出安全可控的个人变体
- 替换模型适配层
- 限制可用依赖与输出大小
- 测试超时、无效代码和恶意 iframe 输出
- 记录请求成本与失败原因
完成标志：一个有输入、成本和执行边界的 AI 小应用生成器。
评分解释
每一分都要说清楚为什么
可复刻性19 / 25
单仓且步骤明确，但需外部 API 与数据库。
文档与代码清晰度18 / 20
README 和 architecture.md 提供良好导航。
新手学习价值17 / 20
对有 React 基础者价值高。
产品完整度13 / 15
生成、预览、修复与分享闭环完整。
vibe coding 代表性10 / 10
直接呈现 prompt-to-app 工作流。
活跃度4 / 5
仓库当前可访问且有近期活动。
新颖性4 / 5
浏览器内安全预览较有辨识度。