Agent Skills
返回列表
Apple 风格设计系统

Apple 风格设计系统

设计多媒体 更新于 2026.08.30

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_a7af8eab/apple-design-skill。

技能介绍

解决的问题

Apple-design 针对“想要 Apple 风格但实现容易失真”的问题。常见痛点是：玻璃拟态、模糊背景、阴影层级、动效节奏和移动端间距缺少统一约束；页面可能看起来像“高级感模板”，但缺少 iOS/macOS 界面的克制与一致性。该技能把 Apple HIG 的设计价值观落到前端规则中，强调 Clarity、Deference、Depth：内容优先，界面退后，用材质、透明度和动效表达层级。

技能如何工作

技能会先强制确认两个上下文维度：色调 与 目标设备。色调问题会给出科技蓝、自然绿、活力橙、极简中性等预设，也支持根据品牌色或关键词推导 4 色方案并补 dark mode；设备问题区分 Web、Mobile、Pad 和多端适配，从而决定导航、点击热区、布局宽度与交互方式。

确认后，技能会读取 references/design-system.md 中的设计参考，建立 CSS 自定义属性 token，再按 Apple 文本风格应用 SF Pro 字体栈与字号层级。组件层覆盖按钮、输入框、导航栏、卡片、Alert/Sheet 等模式，并给出移动端必须使用的间距系统：--gap-card: 12px、--padding-card: 16px、--radius-card: 20px、--margin-page: 16px。预览形态也有约束：单台手机原型、双击 Status Bar 切换深浅主题、直角外框、页面背景与 App 背景使用对比色。

适用边界

它适合需要“干净、克制、高级感”的产品页、落地页、App 界面和组件原型，尤其适合 iOS/macOS 风格或 glassmorphism 场景。使用重点不是简单堆叠圆角和毛玻璃，而是先确认颜色和设备，再按 token 建组件；如果项目要求强品牌化、非 Apple 风格或复杂 3D/WebGL 交互，需要在此基础上扩展设计系统。

使用场景

  • 前端工程师做产品落地页，需要按 iOS 风格输出卡片、按钮和导航栏，并统一圆角、阴影与间距。
  • 设计师做移动 App 原型，要求单台手机展示、双击状态栏切换深浅主题，并用 CSS 变量控制间距。
  • 独立开发者做 SaaS 功能页，想要 frosted glass、backdrop blur 和 spring 动画，但避免模板化堆砌。
  • 产品团队评审高保真 Demo，需要在 Web、Mobile、Pad 多端输出符合 Apple HIG 的界面方案。

适合人员

  • 负责 Web 前端组件实现的前端工程师，希望把 Apple 风格 token 和组件规范直接落到 CSS。
  • 制作高保真原型的产品设计师，需要统一 iOS 界面里的按钮、卡片、导航栏和间距。
  • 做移动 App 演示的独立开发者，想要单手机预览、深浅主题切换和移动端间距约束。
  • 负责品牌落地页的前端负责人，希望输出克制、干净、premium feel 的页面组件。