Apple Design Skill for Claude: How to Audit Your Website With Apple’s Design Rules

Telling an AI to “make it look premium” gets you soft shadows and rounded corners. Giving it Apple’s actual design rules gets you a list of what is wrong with your page. That is the idea behind the Apple design skill for Claude, and the audit is the part most people will skip and shouldn’t.

A short video making the rounds makes the case in about 25 seconds. Someone turned Apple’s design language into a reusable Claude skill. Most people will use it to build a new site. The better use, the video argues, is to point it at a site you already have and ask what is off.

Here is how that works, how to set it up in about ten minutes, and the exact prompt to run.

What a Claude Skill Actually Is

A skill is a folder with a file called SKILL.md inside it. The file holds instructions, and it can bundle reference material too. Anthropic’s documentation says Claude loads a skill only when your request matches its description, so it does not clutter every chat.

An Apple design skill packages Apple’s Human Interface Guidelines into that format. One open-source example is NutshellEngineering’s apple-design-skill, which mirrors the guidelines for components, color, typography, motion and accessibility, and includes workflows for reviewing a screen as well as designing one.

One honest note. The video does not name which version it used, and several community versions exist. Pick one you can read end to end before you trust it. I will come back to why.

Why “Make It Premium” Fails and Rules Work

Here is the thing. “Premium” is a feeling. An AI has to guess what you mean, so it falls back on whatever looks premium in its training data: gradients, glass effects, big hero text. It copies how Apple looks.

Apple’s rules explain why Apple looks that way. Let’s break it down.

Vague prompt	Rule-based prompt
Make my homepage look more premium	Audit my homepage against the Apple design skill and list every violation
Output changes with every run	Output follows the same checklist each time
You get a restyle	You get a prioritized fix list
Hard to tell if it worked	Easy to re-run and compare

What this really means is that you stop asking for a vibe and start asking for a review.

Four Apple Rules That Catch Real Website Problems

You do not need to read the whole guidelines. These four show up on almost every site audit.

Rule	What Apple’s guidance says	What to check on your site
Tap targets	Controls need a hit area of at least 44 by 44 points	Buttons, menu icons and footer links on a phone
Text size	Body text defaults to 17 points on iPhone, with 11 points as the floor	Body copy, captions, form labels
Contrast	Text should meet roughly 4.5 to 1 against its background	Grey text on white, text over photos
Hierarchy	Size and weight, not decoration, show what matters most	Can you tell the main headline and main button in two seconds?

Sources for the numbers: Apple’s pages on accessibility and typography. The contrast figure matches the web standard, explained in the W3C’s WCAG guidance.

Small stuff, right? Not really. A 30 pixel icon button that people keep missing costs you clicks, and nobody files a bug report about it. They just leave.

Step by Step: Install the Skill

Always read the skill before you install it. Anthropic’s own guidance says to use skills only from sources you trust, because a skill can steer Claude to run code or touch files.

Option A: Claude on the web or desktop

Open the skill’s GitHub page and download it as a ZIP. In the NutshellEngineering repo, the portable skill lives in the folder skills/apple-design-skill.
Open that folder and read SKILL.md. Check that nothing asks Claude to send data anywhere or run scripts you do not understand.
Make sure the ZIP contains the skill folder, with SKILL.md inside it. Folder name and skill name should match.
In Claude, go to Settings, then Capabilities. Turn on Code execution and file creation.
Scroll to Skills, click Upload skill, and choose your ZIP.
Switch the skill on.

Skills in Claude need a Pro, Max, Team or Enterprise plan, per Claude’s help center. Custom skills you upload stay private to your account.

Option B: Claude Code

If you work in Claude Code, the NutshellEngineering repo doubles as a plugin marketplace. Run these two commands:

			
/plugin marketplace add https://github.com/NutshellEngineering/apple-design-skill
/plugin install apple-design-skill@apple-design-skill-marketplace

Or copy a skill folder into ~/.claude/skills/ for personal use, or .claude/skills/ inside a project.

Step by Step: Audit Your Own Website

Give Claude something to look at. Paste your page URL if your Claude setup can open it. If not, upload a full page screenshot for desktop and another for mobile. Pasting the page’s HTML and CSS works too.
Name the skill in your prompt. Claude picks skills by description, but being explicit helps.
Ask for a ranked list, not a rewrite. You want findings first, changes second.
Fix the top five. Do not try to clear the whole list in one sitting.
Run the same prompt again. Compare the two lists. That is your before and after.

Copy This Prompt

Use the Apple design skill to audit the attached homepage. Review the desktop and mobile screenshots separately. For each issue, give me: what is wrong, which design rule it breaks, where it appears on the page, and the exact fix. Rank issues as High, Medium or Low impact. Cover spacing, type size, contrast, tap target size, visual hierarchy and consistency between similar elements. Do not redesign the page. Finish with the five fixes that would make the biggest difference.

The “do not redesign” line matters. Without it, Claude tends to hand you a new layout when you asked for a diagnosis.

Follow Up With This

Take the five highest impact fixes and write the CSS changes for each one. Keep my existing fonts and brand colors.

What You Will Probably Find

Expect findings like these on a typical small business or blog site:

Light grey body text that fails contrast on white
Footer links packed too close together to tap on a phone
Three slightly different button styles that should be one
Headings that are bold but not meaningfully larger than body text
Inconsistent gaps between sections

That is the real value of the video’s pitch. These are the minor details you stop seeing after the hundredth look at your own site.

Honest Limitations

Apple’s rules are written for Apple platforms. The 44 point and 17 point figures are in points on iPhone, not CSS pixels. Treat them as strong benchmarks for the web, not law. For web specifically, the W3C’s WCAG 2.2 target size rule sets a lower floor of 24 by 24 CSS pixels, so ask Claude which standard it is applying.
Many versions are unofficial. The NutshellEngineering README says its guideline files are an unofficial mirror that may lag behind Apple, and that Apple owns the content. Check the current guidelines before a big design decision.
Claude can only judge what it sees. A screenshot will not reveal hover states, animation or how the page behaves at every width.
An audit is not a user test. It finds rule violations. It cannot tell you whether real visitors understand your offer.
Your brand still matters. A rule-based review can push every site toward the same look. Tell Claude what to keep.
Skills are code-adjacent. Read before you install. This is the one step not to skip.

Your Ten Minute Checklist

Pick one skill and read its SKILL.md.
Upload it in Settings, then Capabilities.
Take a desktop and a mobile screenshot of your homepage.
Run the audit prompt above.
Fix the top five issues.
Run it again and save both lists.

Most people will use a skill like this to generate something shiny and new. You will use it to find what is quietly costing you readers. That is a smaller idea and a more useful one.

For more on how skills work across AI tools, see my post on Gemini skills and the Opal shutdown, or browse the Claude and Design archives.

Know someone whose website has not been touched in a year? Send them this post and tell them to run the audit prompt. It takes ten minutes and the results are usually humbling.