dickwu/apple-design-skill

Cross-platform UI/UX design reviewer based on Apple HIG. Works with Flutter, Tauri, Electron, React Native. Compatible with Claude Code, Cursor, Codex.

Apple Design Skill – AI‑powered reviewer for Apple‑style UI

What it is – A plug‑in (called a skill) for AI coding assistants such as Claude Code, Cursor, Codex, OpenCode, Windsurf, etc. The skill lets the assistant act as a design reviewer that checks a UI against Apple’s Human Interface Guidelines (HIG). It works for many front‑end frameworks (Flutter, React Native, Tauri, Electron, SwiftUI, UIKit, AppKit) and can suggest concrete fixes in the language of the chosen framework.

How it works – The repository contains:

  • 122 Markdown files that are generated from the official Apple HIG pages (the raw wording, headings, tables and change‑log are kept intact).
  • A small Node script (scripts/pull-hig.mjs) that can re‑download the latest HIG pages and regenerate those Markdown files.
  • A SKILL.md that defines the agent’s “stance”, the review checklist, the report format and an optional improvement mode that proposes a design token system (palette, typography, motion, etc.).
  • Routing tables (references/hig-lookup.md) that map a request (e.g., “review my Flutter home screen”) to the relevant HIG pages.

When an agent receives a design‑review prompt, the skill loads the appropriate HIG markdown, then:

  1. Checks Apple’s eight design principles (purpose, agency, responsibility, familiarity, flexibility, simplicity, craft, delight).
  2. Verifies accessibility numbers (text scaling, contrast, control size, VoiceOver, keyboard, motion settings).
  3. Confirms platform‑specific conventions (tab bars, menus, safe areas, shortcuts, etc.).
  4. Reviews visual craft (color, type, layout, icons, motion, “point of view”).
  5. Looks at interaction patterns (loading, alerts, undo, destructive actions).
  6. Checks content and writing (labels, capitalization, error messages).

Each finding is returned as What, Why (citing the exact HIG heading), and Fix written in the developer’s framework. Specialized sub‑modes cover app icons, dark‑mode, “Liquid Glass” effects, onboarding, permissions, forms, generative‑AI components, and single UI components.

Installation – The skill is distributed via the generic skills CLI:

npx skills add dickwu/apple-design-skill          # installs for all supported agents
npx skills add dickwu/apple-design-skill -a claude-code   # only for Claude Code
npx skills add dickwu/apple-design-skill -g               # user‑wide install

For agents that read a local .claude/skills/, .cursorrules, .windsurfrules, etc., you can also clone the repo directly into the appropriate folder.

Typical usage – In the chat with your assistant you simply ask, for example:

  • “Review my Flutter app’s home screen against Apple’s guidelines.”
  • “Audit this Tauri app for accessibility.”
  • “Does this macOS settings window follow platform conventions?”
  • “Give this UI a point of view without breaking iOS patterns.” The assistant will respond with a structured review and concrete code‑level suggestions.

Keeping the data fresh – Run the bundled script:

node scripts/pull-hig.mjs   # requires Node 18+

It makes ~150 requests to developer.apple.com, rewrites the references/hig/*.md files, and updates the lookup table. The script is deterministic; a second run should produce no changes.

License & provenance – The guideline text is reproduced from Apple’s public Human Interface Guidelines and is attributed in every generated file. The repository itself is not affiliated with Apple. The code and the skill are provided “as‑is” under the repository’s license (see the LICENSE file in the repo).


Bottom line – Apple Design Skill turns a general‑purpose LLM coding assistant into a specialized UI‑design auditor that enforces Apple’s design standards across multiple development frameworks, with up‑to‑date reference material and actionable, framework‑specific fixes.

Related

  • Project
  • Project
  • Project
  • Project