# 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](https://github.com/dickwu/apple-design-skill) **Motion skill:** [github.com/emilkowalski/skills → apple-design](https://github.com/emilkowalski/skills/tree/main/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)** ```bash 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: ```bash 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** ```bash # 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](https://github.com/dickwu/apple-design-skill) - **Motion skill:** [github.com/emilkowalski/skills/tree/main/skills/apple-design](https://github.com/emilkowalski/skills/tree/main/skills/apple-design) - **Apple's Human Interface Guidelines:** [developer.apple.com/design/human-interface-guidelines](https://developer.apple.com/design/human-interface-guidelines) - **The original talk:** [Designing Fluid Interfaces, WWDC 2018](https://developer.apple.com/videos/play/wwdc2018/803/) Build something that finally feels right? Show me. Jesse / [@jesserurka](https://www.instagram.com/jesserurka)