apple-hig-designer

遵循苹果设计规范,打造专业且风格融合的界面。

安装使用

复制下面这段提示词发给你的 AI(Claude / Cursor / TRAE / Codex / WorkBuddy 等),它会自动帮你完成安装:

帮我安装这个 AI Skill:apple-hig-designer。
它的用途是:遵循苹果设计规范,打造专业且风格融合的界面。
完整的 Skill 内容见:https://321skill.com/skills/apple-hig-designer/raw/index.md
请读取该页面内容,如果是 SKILL.md 格式直接安装,如果是 README 提炼核心 prompt 后安装。

提示词包含完整的 Skill 内容链接,AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。

使用示例

“请使用你的 apple-hig-designer 技能,为我设计一个符合 HIG 的 macOS 风格音乐播放器页面,包含播放控件和歌曲列表。”,它会基于 Apple 的间距、色彩和组件规范生成相应的 HTML/CSS/JSX 代码。或者可以说:“我想开发一个奢侈品电商网站,请运用 apple-hig-designer 技能作为基础,并融合高端时尚品牌的视觉元素。”,它会生成一个既遵循 Apple 设计逻辑又具备奢华感的完整前端项目方案。

介绍

Apple-Hig-Designer 旨在解决开发者和设计师在创建网页或移动端界面时,难以遵循苹果官方人机界面指南(HIG)的问题。它提供了关于 SF Pro 字体、苹果系统色彩、8pt 栅格系统、组件模式和动画规范等一整套设计知识,确保界面具备原生 Apple 应用的观感和交互品质。

使用该技能时,只需在 Claude Code 中提出与 Apple 风格或 HIG 规范相关的设计需求,例如“设计一个 iOS 风格的设置页面”或“创建一个符合 HIG 的深色模式组件库”,AI 便会调用此技能库中的知识来生成代码和设计方案。它支持作为基础框架,与其他风格(如赛博朋克、奢侈品美学)进行融合设计。

该技能非常适合需要打造专业、精致且具有 Apple 生态一致性的界面的前端开发、UI 设计师和全栈开发者。无论是开发面向 macOS/iOS 用户的 Web 应用,还是希望为任何平台的项目注入 Apple 级别的设计质感,都能从中受益。

建议用户在设计初期就明确是否需要纯粹的 Apple HIG 风格,还是希望进行风格融合。对于后者,可以在提示词中清晰说明,例如“使用 apple-hig-designer 技能并融合复古风格”。注意,该技能主要提供设计规范和前端实现指导,不包含后端逻辑或复杂的业务代码。

核心特点

与通用 UI 设计技能相比,它深度集成了 Apple HIG 的完整设计体系(如 SF Pro 字体阈值、系统色彩、8pt 栅格和标准缓动曲线),并能以此为基础框架,无缝融合其他视觉风格进行创新设计。

注意事项

不适合需要完全脱离 Apple 设计语言或追求极度个性化、实验性视觉风格的项目。

常见问题

这个技能能用来设计原生 iOS App 吗?

主要面向 Web 和跨平台界面设计,但提供的 HIG 原则和设计令牌对原生开发有重要参考价值。

如何将 Apple 风格与其他设计风格结合?

在提示词中明确指定,例如:“使用 apple-hig-designer 技能并融入赛博朋克美学,设计一个仪表盘。”

给 AI 助手的安装指引

如果你的 AI 编程助手(Claude Code、Cursor、TRAE 等)能看到这个页面,把下面这段发给它即可自动完成安装:

请访问 https://321skill.com/skills/apple-hig-designer/raw/index.md 读取 apple-hig-designer 的原始 Skill 定义(Markdown 格式),按其中说明在我的环境里完成安装和配置。