跳转到使用指南
ios-design-review作者 Garry Tan

iOS Design Review Skill.

Claude Code 和 Codex 的移动应用设计 skill:在真实硬件上对 iOS 应用进行视觉设计审查。

  • Mobile Apps
  • 审查报告
garrytan/gstack · ios-design-review/SKILL.mdSKILL.md
--- name: ios-design-review description: Visual design audit for iOS apps on real hardware. (gstack) --- ## When to invoke this skill ## Confusion Protocol ## Claimed Limitations Need Evidence ## Continuous Checkpoint Mode ## Context Health (soft directive) ## Question Tuning (skip entirely if QUESTION_TUNING: false)
从上游文件读取的前言和章节标题(2026-09-14)· 完整内容 33,841 字符

01 功能说明

ios-design-review Skill 在 Claude Code 和 Codex 中的作用

摘要、工作流与产物,均读自该 skill 的 SKILL.md。

来自 SKILL.md读取于 2026-09-14 · 非实际运行记录

以 skill 自身的术语

通过 gstack-ios-qa-daemon 连接到真实的 iPhone,对每个界面截图,并依据 Apple HIG、DESIGN.md 和最佳实践评估视觉设计。以“怎样才能得到 10 分”的思路,从 0 到 10 分对十个维度打分:字体层级、间距节奏、色彩层级、触控目标、加载/空白/错误状态、无障碍性、动效克制度、iOS 语言一致性、信息密度以及 AI-slop 检查。

沿用 /plan-design-review 的评分标准,并移植到 iOS 语言体系。生成一份带截图的 markdown 报告,包含每个界面的评分和最具杠杆效应的修复建议。若需在方案阶段(实现之前)进行设计评审,请改用 /plan-design-review。若需对实时网页进行视觉审查,请改用 /design-review。

它产出什么

  • 内含截图的 markdown 报告,每个界面各维度的评分(0-10 分),以及各维度最具杠杆效应的修复建议
查看示例提示词 ↗

工作方式

  1. 01
    连接到运行中的 Daemon

    使用正在运行的 gstack-ios-qa-daemon。若没有 daemon 在运行,则通过与 /ios-qa(第 0-2 阶段)相同的流程启动一个。

  2. 02
    截取界面

    针对每个主要界面(依据用户提供的界面列表,或通过无障碍树自动发现),通过 GET /screenshot 和 GET /elements 获取截图和元素信息。

  3. 03
    应用十维度评分标准

    从 0 到 10 分对字体层级、间距节奏、色彩层级、触控目标、加载/空白/错误状态、无障碍性、动效克制度、iOS 语言一致性、信息密度以及 AI-slop 检查进行评分,并说明如何让每一项达到 10 分。

  4. 04
    标记低分项

    对任何低于 7 分的项目使用 AskUserQuestion,呈现问题、建议的修复方案及权衡取舍,供用户决定是否处理。

  5. 05
    撰写报告

    生成一份内含截图的 markdown 报告,包含每个界面的评分和各维度最具杠杆效应的修复建议,写入 ~/.gstack/projects/<slug>/ios-design-review-<date>.md。

02 找到适合场景

何时使用 ios-design-review Skill

当工作是此类移动应用设计时,在 Claude Code 或 Codex 中使用 ios-design-review skill。适用范围和限制来自该 skill 的文件。

适合场景

  • 在发布前对真实设备上的 iOS 应用进行视觉 QA
  • 检查无障碍合规性(VoiceOver 标签、Dynamic Type、Reduce Motion)

了解边界

  • 在实现前进行计划阶段设计评审(使用 /plan-design-review)
  • 实时 Web 视觉审查(使用 /design-review)

03 Skill 内部

ios-design-review Skill 赋予 Claude Code 和 Codex 的规则

SKILL.md 为 Agent 设定的 8 条具体指令、默认值与限制——文件中真正改变结果的部分。

  1. 默认只读

    以 observe 能力获取会话,不对 iOS 设备进行任何变更调用。

  2. 排版使用 SF Pro 与 Dynamic Type

    排版层级维度对显示、正文与说明文字的字号进行评分,需与 Apple HIG 保持一致,使用符合正确动态字号比例的 SF Pro。任何地方都不应出现 12pt 的正文文字。

  3. 间距必须遵循 4pt 或 8pt 网格

    间距节奏维度要求始终使用 4pt 或 8pt 网格,不得出现 17/23/31pt 之类的随意留白,且需尊重安全区域内边距。

  4. 触控目标最小为 44x44pt

    每个交互元素必须至少为 44x44pt。可点击文本不得小于 24pt。

  5. 对比度需符合 WCAG AA

    色彩层级维度要求正文文字(4.5:1)和大字号文字(3:1)的对比度符合 WCAG AA 标准,且深色模式渲染正确。

  6. 动画最多同时限制为 2 个

    动画规范维度将同时动画数量上限设为 2,UI 反馈动画时长为 200-300ms,弹簧阻尼要正确(严肃流程中不应有弹跳效果)。

  7. 使用原生 iOS 组件

    iOS 语汇一致性维度要求在适当情况下使用原生组件(NavigationStack、List、Form、系统 sheet),不应重新发明导航方式或在手机端使用网页风格的汉堡菜单。

  8. 标记 AI 生成的粗糙模式

    AI 粗糙度检测维度会捕捉泛泛的库存布局、遗留的占位文本、从 Android 照搬的 Material Design 元素以及 AI 生成的渐变。

04 投入使用

在 Claude Code 或 Codex 中安装 ios-design-review

一条 npx skills add 命令,然后在你的 Agent 中执行第一个任务和对结果的清单检查。

将 ios-design-review 添加到 Claude Code、Codex 或你的 Agent

在你的项目中运行;安装程序会询问要把它添加到哪个 Agent。

Terminal
npx skills add https://github.com/garrytan/gstack --skill ios-design-review

针对 ios-design-review/SKILL.md 的通用 skills CLI 形式;该仓库可能有自己记录的路径。

给 Skill 第一个移动应用设计任务

按 skill 自身的术语撰写;把括号中的部分换成你的内容。

Starter prompt
Review the iOS design of [MyApp] running on the connected iPhone. Focus on the onboarding flow, home screen, and settings. Check for typography hierarchy issues, spacing rhythm inconsistencies, and accessibility compliance. Write the report to the project folder.

来源:依据 SKILL.md,按 skill 自身的术语撰写。

检查首次结果

SKILL.md 本身如何描述正确的结果:

  • 确认会话以 observe 能力获取,且未进行任何变更调用

在 OpenDesign 中通过其 SKILL.md 链接导入 ios-design-review:Plugins → Add → Skill → Import from link,然后在顶部栏中选择它。

05 开源、可追溯

来源、许可与验证

本页面事实的来源,以及最后检查时间。

Author
Garry Tan
Repository
github.com/garrytan/gstack 分支 main
Skill 文件
ios-design-review/SKILL.md 内容校验和在验证时记录;提交 71f6048
License
MIT 来自 LICENSE。
仓库星标数
132,921 整个 garrytan/gstack 仓库的 GitHub 快照,拍摄于 2026-09-14,该仓库在此目录中包含 7 个 skills。不是 ios-design-review 的评分或使用次数。
已由 OpenDesign 验证
2026-09-14 已检查源文件、路径、许可文本和 star 数量。未内置在 OpenDesign 主程序(检查日期 2026-08-28);本页面未记录实际运行。

SKILL.md 内部

  1. 何时调用此 skill通过 StateServer 对真实设备上的 iOS 应用进行视觉审查,从十个维度进行 0-10 评分
  2. 连接使用正在运行的 gstack-ios-qa-daemon,若需要则通过 /ios-qa 流程启动,默认只读
  3. 维度与评分十维评分标准:排版、间距、色彩、触控目标、状态、无障碍、动画、iOS 惯用法、密度、AI 生成痕迹
  4. 循环流程获取会话、逐屏截图、应用评分标准、记录发现、生成 Markdown 报告
  5. 输出包含内嵌截图的 Markdown 报告、每屏评分、最具性价比的修复建议
  6. 故障处理处理 403 capability_insufficient、空白截图、缺失屏幕等情况
Skill 自身的描述
"在真实硬件上对 iOS 应用进行视觉设计审计。(gstack)"

来自 SKILL.md 的前言描述。完整文件约 33,841 个字符。在 GitHub 上阅读完整文件。

06 安装之前

关于 ios-design-review Skill 的常见问题

以下回答来自 2026-09-14 读取到的 SKILL.md,而非某次实际运行的记录。

这个 skill 与 /plan-design-review 有什么区别?

这个 skill 在真实 iOS 设备上运行,根据 Apple HIG 和 iOS 惯用法评估已发布或正在开发中的应用。/plan-design-review 则在实现之前评估设计规范。这个 skill 采用了移植到 iOS 上的相同评分标准。

iOS 设计审查

在真实移动应用设计任务中运行 ios-design-review。

下载 OpenDesign,从其 SKILL.md 链接导入 ios-design-review,粘贴上述提示,在结果之前阅读计划。

终端
npx skills add https://github.com/garrytan/gstack --skill ios-design-review

OpenDesign 桌面客户端

一套设计系统,让每一次创作都保持品牌一致

在完整的 Vibe Design Workspace 中,用同一套品牌规则生成网页、PPT、可交互原型、数据看板、图像与 HTML 视频。连接本地 Codex、Claude Code、Cursor 等编程助手,即可免费创作。

  • 覆盖网页、PPT、原型、数据看板、图像与视频
  • 140+ 设计系统,以及完整模板与技能库
  • 连接本地 Codex 与 21+ 款编程助手 · 免费使用
免费下载

支持 macOS 与 Windows