Design web pages in Apple's marketing-site visual language — gallery-like product storytelling, the SF type ramp, binary light/dark panels, and one blue reserved for action.
/apple-style-ui Design an Apple-style landing page for my noise-cancelling headphones
What you get
- SKILL.md — the Apple marketing-site design system: when to use it, page assembly order, copy voice rules
- references/design-tokens.md — exact color, typography, spacing and radius tokens sampled from apple.com
- references/components.md — build specs for nav, hero, promo tiles, feature panels, spec strip and footer
- examples/landing-page.html — a complete demo page (Aura headphones) with AI-generated product photography
Good fit
- Premium product landing pages and device showcases
- Keynote-style feature narratives with alternating light/dark panels
- Marketing sites where typography and product photography carry the story
Not for
- Dashboards, admin panels or other dense application UI
- Playful, illustrated or highly decorative styles
- Projects that need a multi-color brand system — this language uses one blue only
- Name
- Apple-Style UI Design
- Downloads
- 1
- Category
- Design
- Skills inside
- 1
Download & install
What's new: Merged community design notes: copy-paste code skeletons (sticky scroll story, scroll reveal, nav, hero, tile grid), Chinese copywriting guide, mobile type ramp and breakpoints, spec comparison component, IP guardrails, and a pre-delivery QA checklist.
Free for signed-in users.
1. Download the ZIP
Use the button above to download the packaged skill. It contains the SKILL.md plus all supporting files.
2. Unzip into your agent's skills folder
Extract the archive so that SKILL.md sits directly inside a folder named after the skill:
unzip apple-style-ui-v1.1.0.zip -d ~/.claude/skills/apple-style-ui/Skills folder per agent
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. Restart your agent
Your agent picks up the new skill automatically on next launch. Ask it what it can do.
Version history (2)
- v1.1.010/2/2026 · 532.9 KB · 12 files
Merged community design notes: copy-paste code skeletons (sticky scroll story, scroll reveal, nav, hero, tile grid), Chinese copywriting guide, mobile type ramp and breakpoints, spec comparison component, IP guardrails, and a pre-delivery QA checklist.
- v1.0.010/2/2026 · 525.1 KB · 10 files
Initial release — SKILL.md, design tokens, components reference, and a complete demo landing page (Aura headphones) with product photography.
Reviews
Related skills
Vercel-Style UI Design
Vercel-Style UI Design
Teach your AI agent to design like Vercel: monochrome palette, oversized tight typography, hairline borders, subtle gradient glows and grid textures. Ships with design tokens, copy-paste components, and a complete example landing page.
Claude Code · Codex · Cursor · Copilot +1
Linear-Style UI Design
Linear-Style UI Design
Design dark, developer-grade SaaS pages in Linear's visual language — near-black canvas, Inter with signature 510 weight, hairline white borders, indigo accent, keyboard-first product storytelling.
Claude Code · Codex · Cursor · Copilot +3
taste-skill
Leonxlnx/taste-skill
Taste-Skill - gives your AI good taste. Stops the AI from generating boring, generic slop.
archify
tt-a1i/archify
Agent skill for beautiful, verifiable architecture, workflow, sequence, data-flow, and lifecycle diagrams.