Personal Homepage Skill

一个让 AI Agent 稳定生成高质量个人主页、作品集和 HTML PPT 的 Skill + 模板库。

An AI Skill + template gallery for generating polished personal homepages, portfolios, and HTML presentations with Claude Code / AI coding agents.

如果这个项目帮助你生成了更好的个人主页、作品集、创作者主页或 HTML 演示文稿，欢迎点一个 ⭐ Star。

Template demos

精选 3 个代表性输出：星球空间、潮玩手办和电影感主页。

01 · Orbis NFT Space Landing

02 · TOONHUB Figurine Carousel

03 · Cinematic Scroll Personal Brand

可以生成什么？

• 个人主页 / personal homepage
• 作品集网站 / portfolio website
• 求职主页 / resume homepage
• 创作者主页 / creator homepage
• 开发者 / 设计师作品集
• 艺术 / 摄影作品集
• 个人项目展示页
• 16:9 HTML PPT / 浏览器演示文稿

为什么需要它？

很多 AI 生成的个人展示页都会变成同一种廉价模板：

• 首屏文案空泛，看不出这个人是谁
• 到处是紫色渐变和随机发光球
• 技能区只是 logo 墙
• 项目卡片没有问题、角色、功能、结果
• 编造虚假指标和虚假评价
• 用户给的视觉参考被忽略
• 页面缺少统一的视觉系统和内容层次

personal-homepage-skill 的目标是让 Agent 在生成个人主页或 HTML 演示文稿时遵守更严格的流程：先理解人和内容目标，再跟随参考，再组织信息架构，最后做视觉和内容质量检查。

项目包含什么？

• AI Skill 主入口与生成规则
• Reference-first 个人主页生成工作流
• 16+ 个视觉模板方向
• 可交互 React + Tailwind 模板 Gallery
• 单文件 HTML 主页模板
• React + Tailwind 主页模板
• 16:9 HTML 演示文稿模板
• 中文 / CJK 字体与排版规则
• 图片使用与占位规则
• 设计自检清单
• 模板注册表、文档结构和静态视觉检查脚本

核心原则

1. 用户给参考，就优先跟随参考

如果用户提供了具体模板、参考网站、截图描述、详细 Prompt 或 GitHub 作品集模板，Agent 必须优先跟随该参考，而不是先让用户从 3 个自己生成的风格里选。

需要保留参考的：

• 信息架构
• 视觉节奏
• 组件组织方式
• 字体气质
• 间距关系
• 动效模型

2. 方向不清楚时，才给真实预览

如果用户没有明确视觉方向，Agent 可以给 2-3 个真实主页首屏预览方向。

预览必须像真实个人主页，而不是选项卡片。视觉画面里不能出现：

• Option A / B / C
• template name
• pros / risks
• workflow notes
• file name
• 内部说明文字

3. 每个主页都必须回答 5 个问题

1. 这个人是谁？
2. 他 / 她做什么？
3. 有哪些项目、内容、经历或作品能证明？
4. 为什么访问者应该信任？
5. 访问者下一步应该点击哪里？

4. 输出形式要匹配用户目标

Skill 同时支持连续网页和 HTML 演示文稿。Agent 需要先判断用户要的是个人主页、作品集页面，还是 16:9 演示文稿，再选择对应的信息密度、版式节奏、交互方式和质量检查标准。

快速开始

作为 Skill 使用

把这个文件夹放到兼容的 skills 目录中，例如：

.claude/skills/personal-homepage-skill/

然后让 Agent 生成或优化个人主页、作品集页面或 HTML 演示文稿即可。

运行模板 Gallery

npm install
npm run dev

运行检查

npm run check

• npm run dev：打开可交互模板 Gallery。
• npm run check：运行文档结构、模板注册表和构建检查。

模板 Gallery

项目内置 18 个视觉方向。实际生成时，Agent 会优先跟随用户给定参考；模板只在方向不清楚或用户主动选择时使用。

更完整的可交互 Gallery：

demo/template-gallery.html

Demo links

• Overview HTML deck — explains the Skill workflow and quality rules.
• Template gallery — browse built-in visual directions.
• Demo script — presentation notes for introducing the project.

文件结构

版权和素材边界

路线图

V1：文档型 Skill

• Skill 主入口
• 视觉模板库
• 动效模式
• section 规则
• 组件模式
• 数据结构
• 设计检查清单
• 使用示例
• 演示 Deck
• 模板 Gallery
• 模板预览图片

V2：可运行模板与 Gallery

• React + Tailwind 示例
• 单文件 HTML 示例
• 16:9 HTML 演示文稿示例
• 可交互模板 Gallery

V3：自动化校验

• 模板注册表检查
• Skill 文档结构检查
• 静态视觉规则检查
• 后续可继续补充截图校验、移动端和 reduced-motion 检查

支持项目

如果这个项目帮助你生成了更好的个人主页、作品集或 HTML 演示文稿，欢迎点一个 ⭐ Star。

这会帮助更多人发现项目，也支持后续继续补充模板、示例和质量检查流程。

贡献

见 CONTRIBUTING.md。

联系作者

• 邮箱：[email protected]
• 微信：loonges
• QQ：247133278
• 小红书 / B站：好奇的小逸

License

See LICENSE for usage terms.