Make Claude Design to Apple's Standard: The Two Skills

Original: https://glamorous-pencil-2e4.notion.site/3f6f8ee1272181bd8c0df0df5f912e8a

These are the two Claude skills from the reel. One gives Claude Apple's rules for how an app should look, from 123 pages of the Human Interface Guidelines. The other gives it Apple's rules for motion on the web, from Apple's WWDC design talks. Below: how to install both, and the prompts for the two ways to use them.

Look skill: github.com/dickwu/apple-design-skill Motion skill: github.com/emilkowalski/skills → apple-design

The Two Skills

	The look skill	The motion skill
Built from	123 pages of Apple's Human Interface Guidelines (incl. 57 component pages), pulled from developer.apple.com	Apple's WWDC design talks, chiefly Designing Fluid Interfaces (WWDC 2018)
Gives Claude	Apple's rules for how an app should look: layout, spacing, type, color, controls, accessibility, platform conventions	Apple's rules for how things should move on the web: springs, response, gestures, interruption
For	Mobile & desktop apps: SwiftUI, UIKit, AppKit, Flutter, React Native, Tauri, Electron	Web: CSS, Pointer Events, spring libraries like Motion / Framer Motion
Made by	dickwu	Emil Kowalski

The look skill is for apps, not websites. For web UI, the motion skill is the one that applies.
Neither makes your product "look like Apple." They make Claude follow the rules Apple published, so the spacing, type and motion decisions stop being guesses.

Heads-Up: Both Skills Are Named `apple-design`

Both repos declare the same skill name. Install them side by side unchanged and Claude can't tell them apart. The fix is to give each its own folder and rename one line. The steps below do that, calling them `apple-look` and `apple-motion`.

Install (Claude Code)

Requires: Claude Code and git.

1. The look skill (Apple's HIG, for apps)

git clone --depth 1 https://github.com/dickwu/apple-design-skill.git ~/.claude/skills/apple-look

2. The motion skill (Apple's WWDC talks, for the web). It lives inside a larger repo, so copy just that folder:

git clone --depth 1 https://github.com/emilkowalski/skills.git /tmp/emil-skills
cp -R /tmp/emil-skills/skills/apple-design ~/.claude/skills/apple-motion

3. Give each one its own name

# macOS
sed -i '' 's/^name: apple-design$/name: apple-look/' ~/.claude/skills/apple-look/SKILL.md
sed -i '' 's/^name: apple-design$/name: apple-motion/' ~/.claude/skills/apple-motion/SKILL.md

# Linux: same commands without the ''  →  sed -i 's/.../.../' ...

4. Check. Open a new Claude Code session and type /. You should see apple-look and apple-motion. Or just ask: "What skills do you have?"

Only want it in one project? Put the folders in that repo's .claude/skills/ instead of ~/.claude/skills/.
Only want one of the two? Skip the rename. The skills CLI works too: npx skills add dickwu/apple-design-skill -a claude-code (look), or npx skills add https://github.com/emilkowalski/skills --skill apple-design (motion).
Cursor / Codex: the look skill installs with npx skills add dickwu/apple-design-skill -a cursor (or -a codex).

Way 1: Claude Follows the Rules While It Builds

Name the skill in your prompt so Claude loads it before writing code.

Building an app screen (look skill):

Use the apple-look skill. Build the settings screen for my app following Apple's Human Interface Guidelines. Get the spacing, type sizes, control sizes, grouping, and dark mode right. Before you write code, list the guideline decisions you're making.

Building web interactions (motion skill):

Use the apple-motion skill. Add a bottom sheet to this page that I can drag, flick and grab mid-animation. Use springs instead of fixed durations, respond on pointer-down, carry my drag velocity into the release, and make it interruptible at any point.

Polishing what's already moving (motion skill):

Use the apple-motion skill. Go through every animation in this component and rebuild it the way the skill describes: springs instead of easing curves, no artificial delays, motion that starts from the current on-screen value.

Way 2: Point Them at Something You Already Made

This is the "it works, but it feels off and I can't say why" fix.

Review an app screen (look skill). Attach a screenshot, or point it at the UI code:

Use the apple-look skill to review this screen against Apple's guidelines. For every issue give me What / Why / Fix, most important first. Then show me the fixed version.

Review web motion (motion skill):

Use the apple-motion skill to review the animations in this page. Flag anything that reacts on release instead of on press, can't be interrupted mid-move, ignores my gesture's velocity, or uses a fixed duration where a spring belongs. Then fix them.

Make it less generic (look skill):

Use the apple-look skill. This looks like every other AI-generated app. Give it a point of view without breaking platform conventions.

The Stuff You Could Feel, With Names

What felt off	What it's called	Which skill catches it
Things look crowded or randomly spaced	Spacing and layout rhythm	Look
Text hierarchy feels flat or chaotic	Type sizes, weights, and leading	Look (both cover typography)
Buttons hard to hit, text hard to read	Control sizes, contrast, text scaling	Look (accessibility)
It doesn't feel native	Platform conventions: tab bars, sheets, navigation	Look
Taps feel laggy	Response: feedback on press, not release	Motion
Animations feel canned	Springs vs. fixed-duration curves	Motion
You can't stop a moving thing	Interruptibility	Motion
Flicks feel dead	Velocity handoff and momentum projection	Motion
Hitting an edge feels harsh	Rubber-banding	Motion

One Safety Note Before You Install Skills

A skill is instructions your AI agent reads and acts on, so treat it like code you're running.

Read the actual `SKILL.md` (and anything it tells the agent to load), not just the README. It's short.
Prefer a pinned copy. You cloned a snapshot above. Re-check what changed before you pull updates.
Be wary of skills that fetch remote content at runtime. That's where prompt injection hides.
Don't trial new skills in a project with live credentials (production keys, payment or deploy access) until you've read them.

Resources

Look skill: github.com/dickwu/apple-design-skill
Motion skill: github.com/emilkowalski/skills/tree/main/skills/apple-design
Apple's Human Interface Guidelines: developer.apple.com/design/human-interface-guidelines
The original talk: Designing Fluid Interfaces, WWDC 2018

Build something that finally feels right? Show me. Jesse / @jesserurka