Craftfolio — Development skill for Claude Code

craftfolio

[](LICENSE) [](SKILL.md)

一个 [Claude Agent Skill](https://code.claude.com/docs/en/skills):生成定制化的 3D 个人网站。四阶段流程——信息发现、方向确认、生成、验收——每阶段都有脚本落地,不是只靠 prompt 指令空转。

cases/ 教的是技术,不是版式:5 个参考风格的实现源码不随本仓库分发。每个 case 发布的是技术拆解(架构、算法、参数量级)而不是调好的生产代码,Agent 照着拆解、用用户自己的内容和审美重新实现。examples/ 是这 5 个风格共用的工程底层(滚动时间线、场景注册表、确定性噪声),可以直接复制。

环境要求

工具	版本	用于
Node.js	≥ 22.13.0	scripts/scaffold_project.sh、生成的项目本身(基线取自 cases/*/package.json 的 engines 字段)
Python	≥ 3.9	scripts/*.py
npm	随 Node 自带	依赖安装

skill 本身除了拉取这个仓库没有额外安装步骤——脚本直接用 `python3` / `bash` 调用,全部标准库实现,不需要 `pip install` 任何东西。

安装

把这个仓库地址交给 Agent Skill 的加载器(或者直接把仓库链接发给 Agent,让它自己安装到本地)。触发词声明在 `SKILL.md` 的 frontmatter 里(`3d个人网站`、`portfolio`、`个人主页` 等)——装好后 Agent 遇到匹配请求会自动触发。

工作流

阶段	目标	对应脚本
1 · 了解这个人	找简历/作品集候选文件,拿到用户明确同意前不读内容	find_profile_sources.py
2 · 确认方向	确认风格 archetype 与必须呈现的信息;有参考站时先反推技术栈	pick_archetype.py、teardown_reference_site.py
3 · 生成	起工程壳,照对应 case 的技术点清单重新实现,资产许可随手记	scaffold_project.sh、add_credit.py
4 · 验收	核对构建、截图关键状态、资产体积预算与许可完整性	perf_audit.py、license_check.py

完整的阶段说明在 `SKILL.md` 里。

Archetype 一览

Archetype	对应 Case	3D	一句话
game	amber-little-world	有	可行走的等距 3D 小岛,WASD 控制器,互动物
drive	alpine-drive	有	车辆物理驶过程序化地形与水面,路侧信息站点
scroll	(无对应 case,见 references/scroll-narrative.md)	有	单一 scrub 驱动的 3D 场景,一条连续相机路径
dom	haaland-legacy	轻量	DOM 段落式杂志滚动叙事
archive	personal-archive	无	纸质材质工作台,文档式信息架构
retro	retro-desktop(system7 / xp-space)	无	复古操作系统窗口管理器即信息架构

目录结构

craftfolio/
├── SKILL.md                    触发词 + 四阶段工作流规范
├── LICENSE                     MIT(本仓库自有内容;范围说明见文件内)
│
├── cases/                      技术拆解,不含实现源码
│   ├── amber-lit