文章摘要
作者成功使用Claude AI重建了1996年的《太空大灌篮》官网,并开源了代码和对话记录。此前有人尝试但未成功,作者通过改进提示词实现了这一目标,将复刻版部署在GitHub Pages上永久保存。
文章总结
标题:我成功用Claude复刻了1996年的《空中大灌篮》网站
主要内容:
- 项目背景
- 作者受到Jonah Glover失败的尝试启发(Jonah曾尝试用Claude Code复刻该网站但未成功)
- 原始网站是1996年电影《空中大灌篮》的官方页面
- 挑战目标:仅凭网页截图和素材文件,精确复刻原始页面
- 技术实现
- 使用工具:
- Claude Code(Opus 4.1/4.5版本)
- Nori配置系统(作者开发的Claude增强工具)
- Playwright测试框架
- 关键步骤:
- 采用测试驱动开发(TDD)方法
- 编写像素级对比测试脚本
- 通过迭代调整实现视觉还原
- 特殊处理:
- 背景星空图案因无法完美平铺,最终直接使用了截图背景
- 导航按钮等元素保持原始布局和功能
- 成果展示
- 成功复刻版本:
- GitHub仓库:https://github.com/tilework-tech/space-jam
- 在线演示:https://tilework-tech.github.io/space-jam/
- 对比截图显示近乎完美的还原效果
- 经验总结
- 关键成功因素:
- 明确的测试标准(像素级匹配)
- 合理的任务分解
- Nori配置系统的优化提示
- 技术洞见:
- 自动形式化(autoformalization)的重要性
- 优化目标函数需要精确设计
- 预置配置比单纯优化提示更有效
- 项目成本
- 约消耗150k最终上下文token
- 总计算量约3500万token
- 实际成本估计约10美元(得益于缓存机制)
注:原文中关于技术细节的讨论、多个对比截图以及作者推广Nori配置系统的内容已适当精简,保留了核心的技术实现路径和关键成果。
评论总结
评论总结:
- 对AI能力的肯定
- "I see this as a logical rebuttal"(simojo)
- "You had some clever tricks I wouldn't have considered"(johnfn)
- 对AI实用性的质疑
- "I could have recreated this twice manually"(Aldipower)
- "This makes zero sense from a preservation perspective"(skeeter2020)
- 技术讨论
- 提到将提示词放入commit消息的建议:"When do we start putting the prompt we used in the commit message?"(bethekidyouwant)
- 关于Google Antigravity的讨论:"Might Google Antigravity be able to do this right out of the box?"(xnx)
- 社区反应观察
- 指出反AI情绪:"I feel there is a strong anti-AI sentiment here"(johnfn)
- 分享相关讨论:"Related yesterday: I failed to recreate the 1996 Space Jam website with Claude"(gnabgib)
- 项目成果展示
- 展示实际成果:"The site claude made is live on github pages now too"(theahura)
- 作者确认:"Hey! You did it! I'm going to update my original blog post"(thecr0w)
- 使用LLM的警示
- 强调重要原则:"Extremely important to remember when using LLMs"(cainxinth)
- 对代码的质疑:"is this a joke?"(toroszo)