用途:该技能用于创建精致、具有 Apple 风格的高端网页界面,适用于高级落地页、首屏区域、企业营销网站、产品展示、功能区块以及高端 SaaS 产品页等需要传达品质、精确与信任感的场景。
主要能力:以几项设计原则组织界面。其一,留白作为策略工具,通过大边距与内边距营造呼吸感与层级。其二,精细排版,采用接近 San Francisco 的系统字体栈,正文常用 300-400 字重,标题使用紧凑字距(如 -0.02em),文字颜色使用 #1d1d1f 等灰阶而非纯黑。其三,基于网格的非对称布局,常见 7-5 或 8-4 分割制造视觉张力。其四,克制配色,以白、#f5f5f7、冷灰等中性色为主,品牌强调色仅用于 CTA,占比约 1-2%。其五,有目的的交互,过渡时长 400-600ms,悬停以重量变化而非颜色突变为主,触控目标不小于 44x44px。其六,关注细节,如 8px 基线网格、亚像素对齐、玻璃拟态与图标文字对齐。
使用方式:资料提供的是 Tailwind 风格的工具类与组件示例,例如字体栈 font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;字号从 text-xs(12px)到 text-9xl(128px);间距遵循 8px 网格,如 p-8(32px)、py-32(128px);容器宽度如 max-w-7xl(1280px);圆角 rounded-xl 至 rounded-3xl。按钮体系包含主 CTA(#0071e3 背景、px-5 py-3、rounded-xl、duration-400)、次级描边按钮、文字链接与加大 CTA。组件模式涵盖非对称功能卡片、区块标题、7-5 非对称网格、分层背景与细分隔线等。
限制:资料以设计规范与代码片段为主,未提供安装命令、依赖说明、收费或价格信息,也未给出可直接运行的完整项目或具体使用步骤。实际落地需结合目标框架与 Tailwind 配置自行调整。文档中部分代码片段存在截断或不完整情况,引用时需核对原文。