// Apple's UI design system. Use when building interfaces inspired by Apple's aesthetic - light mode, Inter font, 4px grid.
| name | apple-ui-skills |
| description | Apple's UI design system. Use when building interfaces inspired by Apple's aesthetic - light mode, Inter font, 4px grid. |
| license | MIT |
| metadata | {"author":"design-skills","version":"1.0.0","source":"https://apple.com"} |
Opinionated constraints for building Apple-style interfaces with AI agents.
Reference these guidelines when:
#FFFFFF as page background (surface-base)#155BD0 for primary actions and focus states (accent)| Token | HEX | RGB | Usage |
|---|---|---|---|
surface-base | #FFFFFF | rgb(255,255,255) | Page background |
surface-raised | #0858DC | rgb(8,88,220) | Cards, modals, raised surfaces |
text-primary | #808080 | rgb(128,128,128) | Headings, body text |
text-secondary | #6D89B5 | rgb(109,137,181) | Secondary, muted text |
text-tertiary | #90C5F1 | rgb(144,197,241) | Additional text |
border-default | #B5C7D8 | rgb(181,199,216) | Subtle borders, dividers |
accent | #155BD0 | rgb(21,91,208) | Primary actions, links, focus |
Inter as primary font family51px / 700 for primary headings27px / 500 for body texttext-balance for headings and text-pretty for body texttabular-nums for numeric data| Style | Font | Size | Weight | Color | Count |
|---|---|---|---|---|---|
heading-1 | Inter | 51px | 700 | #2D2B30 | 1 |
text-43px | Inter | 43px | 700 | #272729 | 1 |
body | Inter | 27px | 500 | #454547 | 1 |
body-secondary | Inter | 26px | 500 | #3D3C41 | 1 |
text-16px | Inter | 16px | 400 | #6D89B5 | 1 |
text-15px | Inter | 15px | 400 | #8EC7F2 | 1 |
text-14px | Inter | 14px | 400 | #90C5F1 | 1 |
text-12px | Inter | 12px | 300 | #808080 | 1 |
caption | Inter | 11px | 300 | #707070 | 1 |
label | Inter | 10px | 400 | #7E7E7E | 1 |
Font Families:
Inter (used 18x)Font Sizes: 9px, 10px, 11px, 12px, 14px, 15px, 16px, 26px, 27px, 43px, 51px
Scale: 21px
h-screen, use h-dvh for full viewport heightsafe-area-inset for fixed elementssize-* for square elements instead of w-* + h-*| Variant | Background | Text | Border | Height | Radius |
|---|---|---|---|---|---|
| Ghost | transparent | #6D89B5 | none | - | - |
2px outline with accent color (#155BD0)2px outline-offset#0858DC background#0858DC backgroundopacity: 0.5cursor: not-allowedAlertDialog for destructive or irreversible actionsinput or textarea elementsaria-label to icon-only buttonstransform, opacity)width, height, top, left, margin, padding)ease-out on entrance animations200ms for interaction feedbackprefers-reduced-motionblur() or backdrop-filter surfaceswill-change outside an active animationuseEffect for anything that can be expressed as render logicWhen the user wants to plan, design, or implement an A/B test or experiment. Also use when the user mentions "A/B test," "split test," "experiment," "test this change," "variant copy," "multivariate test," "hypothesis," "should I test this," "which version is better," "test two versions," "statistical significance," or "how long should I run this test." Use this whenever someone is comparing two approaches and wants to measure which performs better. For tracking implementation, see analytics-tracking. For page-level conversion optimization, see page-cro.
When the user wants to generate, iterate, or scale ad creative — headlines, descriptions, primary text, or full ad variations — for any paid advertising platform. Also use when the user mentions 'ad copy variations,' 'ad creative,' 'generate headlines,' 'RSA headlines,' 'bulk ad copy,' 'ad iterations,' 'creative testing,' 'ad performance optimization,' 'write me some ads,' 'Facebook ad copy,' 'Google ad headlines,' 'LinkedIn ad text,' or 'I need more ad variations.' Use this whenever someone needs to produce ad copy at scale or iterate on existing ads. For campaign strategy and targeting, see paid-ads. For landing page copy, see copywriting.
When the user wants to optimize content for AI search engines, get cited by LLMs, or appear in AI-generated answers. Also use when the user mentions 'AI SEO,' 'AEO,' 'GEO,' 'LLMO,' 'answer engine optimization,' 'generative engine optimization,' 'LLM optimization,' 'AI Overviews,' 'optimize for ChatGPT,' 'optimize for Perplexity,' 'AI citations,' 'AI visibility,' 'zero-click search,' 'how do I show up in AI answers,' 'LLM mentions,' or 'optimize for Claude/Gemini.' Use this whenever someone wants their content to be cited or surfaced by AI assistants and AI search engines. For traditional technical and on-page SEO audits, see seo-audit. For structured data implementation, see schema-markup.
When the user wants to set up, improve, or audit analytics tracking and measurement. Also use when the user mentions "set up tracking," "GA4," "Google Analytics," "conversion tracking," "event tracking," "UTM parameters," "tag manager," "GTM," "analytics implementation," "tracking plan," "how do I measure this," "track conversions," "attribution," "Mixpanel," "Segment," "are my events firing," or "analytics isn't working." Use this whenever someone asks how to know if something is working or wants to measure marketing results. For A/B test measurement, see ab-test-setup.
When the user wants to reduce churn, build cancellation flows, set up save offers, recover failed payments, or implement retention strategies. Also use when the user mentions 'churn,' 'cancel flow,' 'offboarding,' 'save offer,' 'dunning,' 'failed payment recovery,' 'win-back,' 'retention,' 'exit survey,' 'pause subscription,' 'involuntary churn,' 'people keep canceling,' 'churn rate is too high,' 'how do I keep users,' or 'customers are leaving.' Use this whenever someone is losing subscribers or wants to build systems to prevent it. For post-cancel win-back email sequences, see email-sequence. For in-app upgrade paywalls, see paywall-upgrade-cro.
Write B2B cold emails and follow-up sequences that get replies. Use when the user wants to write cold outreach emails, prospecting emails, cold email campaigns, sales development emails, or SDR emails. Also use when the user mentions "cold outreach," "prospecting email," "outbound email," "email to leads," "reach out to prospects," "sales email," "follow-up email sequence," "nobody's replying to my emails," or "how do I write a cold email." Covers subject lines, opening lines, body copy, CTAs, personalization, and multi-touch follow-up sequences. For warm/lifecycle email sequences, see email-sequence. For sales collateral beyond emails, see sales-enablement.