AI Guides › Workbench
By Nigel Guy · 7 min read
The usual way people ask an AI about design is to paste a screenshot and type "does this look good?". You get back a pleasant paragraph about "clean layout" and "consider more whitespace" that sounds like a senior designer and is based on nothing in particular. It feels like a review. It is review theatre: no rule is quoted, nothing is measured, and you can't check a word of it.
The rule: don't ask a model for taste. Give it the rulebook, make it quote the rule behind every finding, and treat anything it can't cite as opinion.
The tool here is an open-source skill on GitHub, dickwu/apple-design-skill. It is a folder that holds about 120 pages of Apple's Human Interface Guidelines (HIG), copied from developer.apple.com, along with instructions telling Claude how to review against them. It doesn't design anything for you. It checks your screens and writes a report in which each finding has three parts: what is wrong, which guideline says so, and the fix. Apple does not make or endorse it.
| Term | What it means here |
|---|---|
| Skill | A folder with a SKILL.md file of instructions, plus any reference files it needs. Claude loads it when a request matches the skill's description |
| HIG | Apple's Human Interface Guidelines: its public design rules for layout, colour, type, motion, accessibility and components |
| Claude Code | Anthropic's coding tool, used in a terminal or desktop app. It reads skills from folders on your computer |
| Repo / clone | A project hosted on GitHub. "Cloning" downloads a copy of it |
npx |
A command that comes with Node.js and runs a tool without installing it permanently |
| Route | What it does | Cost at time of writing | Best for | Catch |
|---|---|---|---|---|
Skills CLI (npx skills add) |
Vercel Labs' installer copies the skill into the right folder for your agent | Free (needs Node.js) | Most people using Claude Code | It's a third-party tool, so read what it will install with --list first |
Manual clone into ~/.claude/skills |
Puts the folder exactly where Claude Code looks | Free (needs Git) | People who want to see every file | You update it yourself |
| Upload to claude.ai | A zip of the folder added under Customize > Skills | Works on Free and paid plans; Claude Pro is listed at $20 a month (Anthropic doesn't list a UK £ price, so check what checkout shows) | People who don't use a terminal | Needs code execution turned on; I couldn't confirm that a folder this large uploads cleanly |
| Git submodule (Codex, Cursor, others) | Puts the rules inside your project for agents that aren't Claude | Free | Teams on mixed tools | You have to point your rules file at it by hand |
One correction before you start. Some write-ups tell you to run claude install-skill. That command doesn't exist. Claude Code's documentation says skills are found from where they sit on disk, and no install command is needed.
You need Node.js installed. Run this in your project folder:
npx skills add dickwu/apple-design-skill --list # preview, installs nothing
npx skills add dickwu/apple-design-skill -a claude-code -g
-a claude-code limits the install to Claude Code, and -g installs it for your user account (~/.claude/skills/) rather than this one project. Leave out -g if you want it in the project's .claude/skills/ so your team gets it too. To fetch a newer version later, run npx skills update apple-design.
git clone https://github.com/dickwu/apple-design-skill.git ~/.claude/skills/apple-design
The last part of the path matters. Claude Code expects skills/<name>/SKILL.md, so if you clone into the wrong folder, nothing loads and you get no error. Claude Code watches its skill folders and picks up changes without a restart. The exception is when the top-level skills folder didn't exist when your session started. In that case run /reload-skills.
First, under Settings > Capabilities, check that code execution is on. Download the repo as a zip from GitHub and make sure the zip holds the skill folder with SKILL.md inside it. Then go to Customize > Skills, click +, choose Create skill, then Upload a skill. Team and Enterprise admins control this under Organization settings, so if you can't see the option, ask yours.
git submodule add https://github.com/dickwu/apple-design-skill.git .design-rules
Then add a line to your AGENTS.md (or .cursorrules, or .windsurfrules) telling the agent to follow .design-rules/SKILL.md, to use .design-rules/references/hig-lookup.md to find the right page, and to read the relevant files under references/hig/ before it gives feedback.
In Claude Code you can call the skill directly by starting a message with /apple-design. It also triggers on its own when you ask for a design review. Give it the real material: code, exported colour values and screenshots. The skill's own instructions say contrast should be worked out from hex values, not guessed from a JPEG.
/apple-design
You are reviewing [SCREEN_OR_FLOW_NAME] for [PRODUCT_ONE_LINE], used by [AUDIENCE].
Platform and framework: [iOS / macOS / web app] built in [SwiftUI / Flutter / React Native / Electron / Tauri / HTML+CSS].
Material: [PATHS_TO_FILES_OR_SCREENSHOTS]. Colour tokens and font sizes: [PASTE_VALUES_OR_"in the code"].
What I want: [FULL_AUDIT / ONE_WORRY, e.g. "the settings screen feels cluttered"].
Steps:
1. Tell me which guideline files you are loading and why. Load only the ones that apply.
2. Audit in order: accessibility, platform conventions, visual design, interaction, writing.
3. For every finding give: What (one line), Why (quote the guideline and cite file › heading), Fix (in my framework's terms), and a severity of Critical, High, Medium or Low.
4. Anything you can't measure from what I sent, list under "Needs real values" rather than guessing.
Rules: if a point has no guideline behind it, label it "my judgement". Don't invent rules or numbers. If the design is strong, keep the review short. If the platform or framework is missing above, ask me before you start.
Before answering, check: does every finding have a citation or a "judgement" label, and is every fix something I could actually change?
Fill in the screen name, product, audience, platform, framework, file paths and what you're worried about.
If you're building a website rather than an app, say so. The skill's instructions apply Apple's principles and foundations (accessibility, colour, type, layout, writing) to web apps but leave out Apple's platform conventions, because a website has no tab bar or menu bar to get wrong. Expect a shorter review.
To check whether your fixes worked, run this follow-up afterwards:
Here is the revised [SCREEN_NAME]: [PATHS_OR_SCREENSHOTS]. Here is your earlier report: [PASTE_REPORT].
For each earlier finding, mark it Fixed, Partly fixed or Not fixed, and quote the evidence in the new material. Then list any new problems the changes introduced, using the same What / Why / Fix format. Don't repeat findings that are fixed. If you can't tell from what I sent, say what you need.
Paste the old report and the new screens.
npx skills update, git pull, or the repo's node scripts/pull-hig.mjs (Node 18 or newer), and check anything important against developer.apple.com.SKILL.md before installing this one or any other third-party skill.