菜单
设计并构建精美的个人主页网站，具备 Apple 级别的设计美学。当用户要求创建个人网站、作品集、个人主页、开发者主页、设计师作品集或任何个人品牌页面时，必须使用此技能。即使用户只是说"帮我做个网站"、"做个作品集"、"我需要一个个人主页"，也应立即触发此技能。输出两种 Apple 风格的精品 HTML 主页。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/Ceciliaaaaaaaaaa/personal-homepage-design --skill personal-homepage命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
基于 SOC 职业分类
正在显示 SKILL.md
| name | personal-homepage |
| description | 设计并构建精美的个人主页网站，具备 Apple 级别的设计美学。当用户要求创建个人网站、作品集、个人主页、开发者主页、设计师作品集或任何个人品牌页面时，必须使用此技能。即使用户只是说"帮我做个网站"、"做个作品集"、"我需要一个个人主页"，也应立即触发此技能。输出两种 Apple 风格的精品 HTML 主页。 |
生成具备 Apple 级设计品质的个人主页，单文件 HTML，两种风格可选，内置完整的鼠标交互系统。
在开始设计前，通过一条消息向用户收集以下内容（已提供的跳过）：
必填：
选填（鼓励提供）：
如果用户已提供足够信息，直接跳到第二步。
设计前先读取对应风格指南：
| 风格 | 文件 | 适合人群 |
|---|---|---|
| 暗黑科技风 | references/style-dark.md | 工程师、开发者、数据科学家，追求科技感和视觉冲击力 |
| 清雅白底风 | references/style-white.md | 设计师、创意人、作家、顾问，追求优雅克制的质感 |
用户未选择时：技术类职位推荐暗黑科技风，创意类职位推荐清雅白底风，确认后继续。
写代码前必须先读对应的风格指南文件。
每个主页必须包含以下板块：
Hero 区：
[大号姓名] ← 72–96px，粗体或黑体
[职位/身份] ← 20–24px，低调颜色
[Tagline] ← 16–18px，最多一行
[CTA 按钮]
技能标签 — 胶囊形 chip，带细边框或浅背景色 项目卡片 — 简洁卡片，hover 时上浮 社交图标 — 内联 SVG，不用图标字体
生成单一 index.html 文件，要求：
<style> 标签中，无外部样式表<script> 标签中，无框架依赖<link> 加载（唯一允许的外部依赖）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 按钮<header>、<main>、<section>、<footer>、<nav>）--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"/mnt/user-data/outputs/index.htmlassets/layout-reference.md — 各 Section 布局模板与间距参考assets/component-patterns.md — 可复用的 HTML/CSS 组件片段scripts/interactions.js — 完整交互系统，含内联粘贴块输出物必须达到 Apple 或 Linear 高级产品设计师的水准。自问：
任何一条答案为"否"，精修后再交付。