Apple Design Skill for Claude: Fix Vibe Coded UI (2026)

10 min read

Coming here from Instagram, X or LinkedIn? Here is the link you came for.

The skill is here: emilkowalski/skills → apple-design

Install it in one line:

npx skills@latest add emilkowalski/skills --skill apple-design

That is the link. Now stay for the part a 40 second reel could never fit, which is what is actually inside it and how to point it at a site you already shipped.

Your site does not look cheap because of your colors

It looks cheap because nothing on it responds like a real object.

The Apple design skill for Claude is a set of 17 design and motion principles pulled from Apple's WWDC talks, mostly Designing Fluid Interfaces, and rewritten for the web. You drop it into Claude Code as a skill, and instead of you begging for a "premium" website, Claude gets actual rules: spring damping values, velocity handoff math, rubber band formulas, translucency rules, tracking and leading rules. Rules beat adjectives. Every single time.

Emil Kowalski built it. He is the person behind Sonner and Vaul, so this is not a random scrape of Apple's marketing pages. It is a working animation engineer writing down what he already knew.

TL;DR

• apple-design is a Claude skill with 17 principles covering motion, materials, typography and design foundations.
• It replaces vague prompts like "make it premium" with numbers Claude can actually execute.
• Its biggest idea is interruptibility. Any animation must be grabbable and reversible mid flight.
• Most people will use it on new projects. The higher return is pointing it at a site you already have.
• Skills load only when the task matches, so you are not burning tokens on a design system you pasted into every prompt.
• It is not a magic premium button. It is heavy on motion and light on layout, and you still have to taste check the output.

Why does "make it premium" never work as a prompt?

Because "premium" is not information. It is a feeling you have, compressed into eight letters, and the model has to guess which of the ten thousand things you saw once you actually meant.

I have done this. When I was building out the tools section on artofcode, my prompts looked like "make this feel more polished" and "add smooth animations." What came back was a transition: all 0.3s ease on everything and a drop shadow. Technically I asked for it. Technically I got it.

Here is the thing nobody tells you about prompting for design. The model is not failing at taste. It is failing at specification. It has no default opinion about whether your sheet should bounce, so it picks the statistical average of every tutorial ever written, and the statistical average of the internet is a Bootstrap page from 2019.

A skill is just you writing down your taste once, so you never have to describe it again.

Swap "make it feel smooth" for "critically damped spring, damping ratio 1.0, response 0.35, animate from the presentation value, never the target" and suddenly there is nothing left to guess.

[Image: Split screen showing the same card component, left labeled "make it premium" with a generic drop shadow, right labeled "damping 1.0, response 0.35" with a spring curve overlay]

What is actually inside the 17 principles?

I read the whole file so you can decide before you install. Three parts matter most.

Motion that starts from where the thing already is

This is the spine of the entire skill. The core line is that an interface feels alive when motion starts from the current on screen value, inherits the user's velocity, projects that momentum forward, and can be grabbed and reversed at any instant.

Read that again, because it quietly kills the way most of us animate. A CSS transition cannot do this. A CSS transition has a fixed duration and it does not care that your finger is already moving at 900 pixels per second. Springs care.

The skill gives real defaults instead of vibes:

Interaction	Damping	Response
Move or reposition	1.0	0.4
Rotation	0.8	0.4
Drawer or sheet	0.8	0.3

And it hands over the two formulas people always get wrong. Momentum projection, which is how you work out where a flick would have landed:

function project(initialVelocity, decelerationRate = 0.998) {
  return (initialVelocity / 1000) * decelerationRate / (1 - decelerationRate);
}

And rubber banding, which is why an iOS list feels like it has weight when you overscroll instead of hitting a wall:

function rubberband(overshoot, dimension, constant = 0.55) {
  return (overshoot * dimension * constant) / (dimension + constant * Math.abs(overshoot));
}

You could have found both of these yourself. You did not. That is the point of a skill.

Materials, and the translucency trap

Everyone copies the frosted glass nav bar. Almost nobody follows the second rule that makes it work.

The principle is that material weight encodes hierarchy. Darker layers are structure, lighter layers are interactive. And the rule people break constantly: never stack light translucent surfaces. The moment you put a glass card on a glass sheet on a glass nav, the depth cue collapses and the whole thing reads as mud.

.toolbar {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(20px) saturate(180%);
  border-top: 1px solid rgba(255, 255, 255, 0.4);
}

That saturate(180%) is the part most tutorials skip. Blur on its own gives you gray. Saturation is what makes the color behind the glass feel like it is still alive under there.

It also tells you to fade gradients at scroll edges instead of dropping a hard 1px divider, which is one of those changes that takes four minutes and instantly makes a page look like someone cared. If you are still hand tuning depth in dev tools, our box shadow generator will get you to a usable value faster than guessing.

Typography, where most vibe coded sites actually die

Here is my honest read after running this against my own pages: your motion is probably not the reason your site looks amateur. Your type is.

The skill is blunt about it. Tracking is size specific and you must never ship one letter spacing value for every size. Tighten large text toward -0.02em. Keep body near 0. Leading moves inversely with size, so headings get tight line height and body gets loose. Build hierarchy from weight, size and leading as a set, not by picking a random font size and hoping.

.display {
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-optical-sizing: auto;
}

Four lines. That is the difference between a heading that looks designed and a heading that looks like a default <h1>.

Why is redesigning better than starting fresh?

This is where I disagree with how most people are going to use this thing.

The obvious move is to fire up a new project and let the skill shape it from line one. Fine. But a brand new project has no users, no traffic and no proof that anyone wants it. Running a design skill on it is polishing a thing nobody has looked at yet.

The unglamorous move is better. Point it at what you already shipped.

I have 17 tools live on artofcode and a blog that Google actually sends people to. Those pages already have attention. A design pass on a page that gets traffic every day compounds. A design pass on a project you started this morning does not.

And an audit is genuinely the thing Claude is best at here. You are not asking it to invent taste. You are asking it to check 17 specific rules against code that already exists, which is a checklist task, and models are excellent at checklist tasks. Ask it plainly:

Review this page against the apple-design skill.
List every violation with the file, the line, and the specific
principle it breaks. Do not fix anything yet.

You will get back a list of things you knew were slightly off but never had the language for. That is the real unlock. Not new code. Vocabulary.

[Image: Terminal screenshot of Claude returning a numbered audit list of design violations with file paths and principle names]

Does using a skill actually save tokens?

Yes, and for a reason that is not obvious.

A skill is not glued to your context on every request. It carries a short description, and it loads its full instructions only when the task matches. So the 17 principles cost you nothing while you are fixing an API route, and they arrive in full the moment you touch a sheet component.

Compare that to what most people do, which is keep a giant design system block in CLAUDE.md or paste it into every prompt. That block sits in context for every single message, including the fifty messages that have nothing to do with design. You pay for it constantly and it dilutes attention across everything else.

Same rules. Fraction of the cost. That is the whole argument for skills over mega prompts.

Where this skill will not save you

I am not going to sell you a cure.

It is motion heavy and layout light. Most of the 17 principles are about gestures, springs, velocity and materials. If your actual problem is that your spacing scale is random and your page has no grid, this skill will make your broken layout animate beautifully.

It assumes an interactive surface. A static marketing page or a blog post has very few gestures to get right. You will genuinely use maybe five of the seventeen sections.

It cannot see your screen. It reviews code, not rendered pixels. It will never tell you your green is the wrong green. Screenshot the result and judge it with your own eyes.

It is a style, not the only style. Apple's language is restraint, depth and physics. If your brand is loud and maximal, following this rulebook line by line will quietly sand your personality off. Take the physics. Argue with the rest.

Actionable takeaways

• Install it now: npx skills@latest add emilkowalski/skills --skill apple-design.
• Run an audit before you run a fix. Ask for violations with file and line, no edits.
• Fix typography first. Size specific tracking and inverse leading buy more than any animation.
• Replace CSS transitions with springs anywhere a user can touch, drag or swipe.
• Never stack two light translucent layers. One glass surface per depth level.
• Handle prefers-reduced-motion in the same commit as the animation, not in a future ticket.
• Point it at pages that already have traffic before you point it at anything new.

Frequently Asked Questions

What is the apple-design Claude skill?

It is an open source Claude skill by Emil Kowalski that encodes 17 design and motion principles from Apple's WWDC talks, mainly Designing Fluid Interfaces, translated to web technologies like CSS, Pointer Events and spring animation libraries. You install it into Claude Code and it gives the model concrete rules, including spring damping values and typography tracking guidance, instead of vague instructions like "make it premium."

How do I install a Claude skill from GitHub?

Run npx skills@latest add emilkowalski/skills --skill apple-design in your terminal, or drop the --skill flag to install every skill in that repository. The skill lands in your skills directory and Claude loads it automatically when a task matches its description, so there is nothing else to wire up.

Is this the same as copying Apple's design?

No. The skill teaches the principles behind why Apple interfaces feel good, such as interruptible animation, velocity handoff, momentum projection and size specific typography. It does not ship Apple's fonts, icons, colors or components. You are borrowing the physics and the discipline, not the visual identity, which is also the only version of this that is worth doing.

Can I use it on an existing website instead of a new one?

Yes, and that is the higher value use. Ask Claude to audit an existing page against the skill and report every violation with file and line before it changes anything. Because the skill is a fixed checklist of 17 principles, review is what it is best at, and applying it to pages that already get traffic pays back faster than polishing a brand new project.

Do design skills reduce token usage?

They do, because a skill only loads its full instructions when the current task matches its description. A design system pasted into CLAUDE.md or into every prompt sits in context permanently and costs tokens on unrelated work. Same rules, loaded on demand, at a fraction of the context cost.

Pick one page you already shipped, run the audit, and fix only the typography findings today. If you want the rest of how I build and ship this stuff, the free workshop walks through it, and you can pull a starting palette from the gradient generator while you are in there.

Written by Adithya Guttha, Founder of Art of Code.