技能介绍

要解决什么问题

做品牌官网或产品落地页时，「像 Apple 官网」往往停留在口头参考：留白、大图、毛玻璃好说，但色值、字号层级、缓动曲线、栅格间距一旦各写各的，页面很快变成「白底 + 大图」的拼贴，而不是可复用的设计体系。电商促销、内容密集型后台、强轮播需求也不该硬套这套语言。

技能如何工作

本技能在匹配激活条件后，按 多 Agent 流水线（详见 references/pipeline.md）并行分工：主编解析需求并组装交付；配色研究员、排版/动效/布局设计师分别产出规范；前端开发者按 Apple HIG 思路整理成完整设计体系文档；测试员与评审员做一致性与五维评审。

落地内容覆盖六块：配色（主背景 #FFFFFF / 次背景 #F5F5F7、CTA #0071E3 等）、排版（San Francisco / PingFang SC、H1 56–64px 等层级）、动效（如默认 cubic-bezier(0.25, 0.1, 0.25, 1.0) 300ms）、布局（12 列栅格、单列纵向、无侧边栏）、内容策略与禁止事项（禁轮播、禁渐变装饰背景等）。Agent 角色表与模板见 references/agents.md。

适用边界

适合：用户明确要 Apple 风/极简科技风/高端产品展示，或需求含大量留白、产品大图、毛玻璃、SF 字体；场景为品牌官网、产品页，或对标 apple.com。

不适合：电商促销页、内容密集型站点、后台与数据可视化；已声明 Material、赛博朋克等其它风格；或硬性要求轮播、多色系品牌、固定侧边栏——这些在 SKILL 中列为不激活场景。

截图预览

使用场景

高端硬件或科技新品要做品牌落地页，Brief 里写「对标 apple.com / 极简科技风」，需要把留白、产品大图、毛玻璃导航落成配色与布局条文。
官网改版讨论 stuck 在截图参考，需要主编式流程拆给配色、排版、动效、布局 Agent，最后合并成一份可给开发的设计体系文档。
页面结构已定为单列纵向、无侧边栏，要在对话中约束 CTA 仅用 `#0071E3`、正文最大宽度 650px，并列出禁轮播、禁渐变背景等对照项。
动效与滚动行为要对齐 Apple 官网习惯，需要产出默认过渡曲线、视差偏移上限、按钮 hover 等微交互时长，而不是只描述「要有高级感」。

适合人员

负责科技品牌官网的视觉设计师，Brief 常写「像苹果」但缺少可交付的色值表、字号层级与间距体系
统筹新品发布页的产品经理，要单列产品叙事结构，明确不要电商促销轮播和多 CTA 堆砌
带小团队的设计负责人，希望一次对话里并行产出配色分析报告、排版规范与布局栅格，再交给前端实现
落地 Apple 风页面的前端工程师，需要 `cubic-bezier` 时长、8px 间距基准、sticky 产品图与导航 `backdrop-filter` 等可编码说明