开源项目 site-to-map:让 Claude Code 等 AI 代理把个人网站折成可探索的 3D 地图

开发者近日在 V2EX 发布开源项目 site-to-map,这是一个可将个人网站转换为可探索 3D 地图的 Agent Skill。该项目面向拥有个人主页、导航站或书签列表的用户,使用者可让 Codex、Claude Code 等 AI 编程代理读入网站内容或导出的书签文件,由代理自动完成分类整理、生成配置文件 site.json、构建页面并截图检查,最终输出一张可交互的 3D 地图。在地图中,应用、开源项目等内容按主题划分成不同城市,每个链接对应城内一栋建筑,点击即可跳转至原页面。地形由种子算法程序化生成,包含海岸、山脉、河流、道路与森林,河流自动绕开城镇并由桥梁道路连接;建筑造型可依据链接含义挑选,未指定时引擎会自动增加轮廓多样性。地图支持拖拽、缩放、城市导航与导览,时间、天色和路灯随本地时间变化,移动端采用更轻量的悬浮信息气泡交互。同一份配置还能以域名为种子,使多个域名生成不同地形但保持城市与建筑布局一致。项目基于 three.js 构建,采用 MIT 协议开源,支持多语言配置与键盘快捷键;在无 JavaScript 环境下降级为普通链接列表。安装方式为 npx skills add dofy/site-to-map,在线演示可访问作者站点 yahaha.net,GitHub 仓库为 dofy/site-to-map。

事件分析

技术层面,该项目展示了 Agent Skill 生态的典型工作流:AI 编程代理不仅生成代码,还承担内容分类、配置生成与构建后的截图自检,体现出代理从’写代码’向’交付完整产物’的延伸。地形与建筑采用种子驱动的程序化生成,在保证链接映射一致性的同时提供视觉多样性,是 three.js 场景工程的较完整实践;以域名为种子生成差异化地形的设计也颇具巧思。产业视角上,此类项目反映出 Agent Skills 规范正在催生可复用的垂直技能包,个人开发者得以将复杂的前端可视化能力封装为一行命令即可调用的模块。局限方面,项目依赖 WebGL,适用范围集中于结构清晰的链接型站点,交互式应用难以直接套用,也不提供自动翻译。后续若社区持续贡献建筑与场景模板,’内容地图化’方案有望扩展至作品集、团队主页乃至知识库可视化等场景。

核心观点:Agent Skills 正把 AI 编程代理从代码助手推向能力封装层,一行命令复用复杂工程成果,个人建站的创意门槛被大幅拉低。

原文链接:V2EX 分享发现

C code80.ai · AI 编码 API 聚合 Claude / GPT 多模型统一接入,稳定不限速,按量计费,几行配置接入 Claude Code。 了解一下 ›

抢沙发

评论前必须登录!

立即登录   注册