| name | personal-homepage |
| description | 设计并构建精美的个人主页网站，具备 Apple 级别的设计美学。当用户要求创建个人网站、作品集、个人主页、开发者主页、设计师作品集或任何个人品牌页面时，必须使用此技能。即使用户只是说"帮我做个网站"、"做个作品集"、"我需要一个个人主页"，也应立即触发此技能。输出两种 Apple 风格的精品 HTML 主页。 |
个人主页 Skill
生成具备 Apple 级设计品质的个人主页，单文件 HTML，两种风格可选，内置完整的鼠标交互系统。
第一步：收集信息
在开始设计前，通过一条消息向用户收集以下内容（已提供的跳过）：
必填：
- 姓名
- 职位/身份（例如"前端工程师"、"产品设计师"、"摄影师"）
- 一句话或几句话的个人简介
- 核心技能或专业领域（3–6 项）
选填（鼓励提供）：
- 精选项目（名称、描述、链接）
- 社交链接（GitHub、LinkedIn、Twitter/X、Dribbble、邮箱）
- 个人照片（或使用占位头像）
- 偏好风格：暗黑科技风 或 清雅白底风（不确定时描述两种供选择）
如果用户已提供足够信息，直接跳到第二步。
第二步：选择风格
设计前先读取对应风格指南：
| 风格 | 文件 | 适合人群 |
|---|
| 暗黑科技风 | references/style-dark.md | 工程师、开发者、数据科学家，追求科技感和视觉冲击力 |
| 清雅白底风 | references/style-white.md | 设计师、创意人、作家、顾问，追求优雅克制的质感 |
用户未选择时：技术类职位推荐暗黑科技风，创意类职位推荐清雅白底风，确认后继续。
写代码前必须先读对应的风格指南文件。
第三步：设计主页
页面结构
每个主页必须包含以下板块：
- Hero 区 — 姓名、职位、一句话 tagline、主 CTA 按钮（"查看作品" / "联系我"）
- 关于我 — 简介 + 可选头像区域
- 技能/专长 — 技能标签、卡片或图标网格
- 项目/作品 — 2–4 个精选项目，含标题、描述、链接
- 联系/页脚 — 社交链接、邮箱 CTA、版权信息
设计原则
- 字体层级：展示字体用于标题，干净的无衬线字体用于正文
- 留白：大方的空白 —— Apple 级呼吸感（section 内边距最小 80px）
- 响应式：移动端优先，375px 至 1440px 均完美呈现
- 性能：单 HTML 文件，除 Google Fonts 外无外部依赖
组件规范
Hero 区：
[大号姓名] ← 72–96px，粗体或黑体
[职位/身份] ← 20–24px，低调颜色
[Tagline] ← 16–18px，最多一行
[CTA 按钮]
技能标签 — 胶囊形 chip，带细边框或浅背景色
项目卡片 — 简洁卡片，hover 时上浮
社交图标 — 内联 SVG，不用图标字体
第四步：构建文件
生成单一 index.html 文件，要求：
- 所有 CSS 内联在
<style> 标签中，无外部样式表
- 所有 JS 内联在
<script> 标签中，无框架依赖
- Google Fonts 通过
<link> 加载（唯一允许的外部依赖）
- SVG 图标直接内联在 HTML 中
- 完整交互系统来自
scripts/interactions.js —— 每个页面都必须包含
交互系统（每次必须集成）
写 JS 前先读 scripts/interactions.js，其中有完整的 HTML、CSS、JS 粘贴块。系统提供：
| 交互效果 | 启用方式 |
|---|
| 自定义光标 + 跟随圆环 | <body> 后加 <div id="ix-cursor"></div><div id="ix-ring"></div> |
| 粒子背景（鼠标感应） | <body> 后加 <canvas id="ix-bg"></canvas>，自动适配明暗模式 |
| 磁性吸附效果 | 任意交互元素加 class="magnetic" data-mag="0.4" |
| Hero 名字逐字弹跳 | Hero <h1> 加 id="hero-name" |
| 滚动淡入动画 | 各 section/卡片加 class="reveal" |
| 卡片 3D 透视倾斜 | 卡片加 class="project-card" 或 data-tilt |
| 按钮点击涟漪 | 所有 <button> 自动生效 |
磁性强度参考 — 保持一致使用：
data-mag="0.2" — 导航链接、小标签data-mag="0.3" — 技能标签、幽灵按钮、项目卡片data-mag="0.4" — Logo、次要 CTAdata-mag="0.5" — 仅主 CTA 按钮
代码规范
- 语义化 HTML5（
<header>、<main>、<section>、<footer>、<nav>）
- 所有 token 使用 CSS 自定义属性（
--color-*、--font-*、--space-*）
- 移动端优先媒体查询（
cursor: none 仅在 @media (hover: hover) 下生效）
prefers-reduced-motion 由交互脚本自动处理- 完整的
meta 标签：viewport、description、og:image 占位
第五步：精修与交付
生成后依次检查：
- 交互完整性 — 每个按钮、链接、卡片都有
data-mag；Hero <h1> 有 id="hero-name"；各 section 有 class="reveal"
- 视觉检查 — 间距、对比度、字号、移动端布局
- 质感打磨 — Hero 区视觉冲击力够强；光标与风格融合（difference 混合模式适配明暗两种主题）
- 保存为
/mnt/user-data/outputs/index.html
- 将文件呈现给用户，附简短的设计说明
参考资源
assets/layout-reference.md — 各 Section 布局模板与间距参考assets/component-patterns.md — 可复用的 HTML/CSS 组件片段scripts/interactions.js — 完整交互系统，含内联粘贴块
质量标准
输出物必须达到 Apple 或 Linear 高级产品设计师的水准。自问：
- Hero 区是否一眼就抓住视线？
- 字体系统是否统一且美观？
- 整体是否通透，而非拥挤？
- 这个主页是否配得上它所代表的人？
任何一条答案为"否"，精修后再交付。
