--- 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` | 设计师、创意人、作家、顾问，追求优雅克制的质感 | 用户未选择时：技术类职位推荐**暗黑科技风**，创意类职位推荐**清雅白底风**，确认后继续。 **写代码前必须先读对应的风格指南文件。** --- ## 第三步：设计主页 ### 页面结构每个主页必须包含以下板块： 1. **Hero 区** — 姓名、职位、一句话 tagline、主 CTA 按钮（"查看作品" / "联系我"） 2. **关于我** — 简介 + 可选头像区域 3. **技能/专长** — 技能标签、卡片或图标网格 4. **项目/作品** — 2–4 个精选项目，含标题、描述、链接 5. **联系/页脚** — 社交链接、邮箱 CTA、版权信息 ### 设计原则 - **字体层级**：展示字体用于标题，干净的无衬线字体用于正文 - **留白**：大方的空白 —— Apple 级呼吸感（section 内边距最小 80px） - **响应式**：移动端优先，375px 至 1440px 均完美呈现 - **性能**：单 HTML 文件，除 Google Fonts 外无外部依赖 ### 组件规范 **Hero 区：** ``` [大号姓名] ← 72–96px，粗体或黑体 [职位/身份] ← 20–24px，低调颜色 [Tagline] ← 16–18px，最多一行 [CTA 按钮] ``` **技能标签** — 胶囊形 chip，带细边框或浅背景色 **项目卡片** — 简洁卡片，hover 时上浮 **社交图标** — 内联 SVG，不用图标字体 --- ## 第四步：构建文件生成单一 `index.html` 文件，要求： - **所有 CSS 内联**在 `