What does this skill do, and when should you use it?
A portable, markdown-based skill for AI coding agents that produces the calm, premium Apple look of apple.com, Apple Newsroom, and the latest macOS. It is not a component library to import but a design system plus decision discipline, built on rules like: unified panels over fragmented cards, frosted glass only where layers truly overlap, grayscale body with color reserved for accent. The skill ships a full design spec, portable CSS tokens, copy-paste components, a motion layer, an iOS shell layer, a line-icon layer, and a self-check gate — all framework-agnostic.
After reading SKILL.md, the agent follows a fixed build workflow: read design-system.md for the full spec; inject tokens.css :root custom properties into the project; pick a page recipe from patterns.md (720 reading / 1080 grid containers; detail/index/home/form archetypes); compose from components.md (glass nav, unified panel list, card grid, segmented control, buttons, colored CTA); apply motion.md to interactive layers (spring easing, same-path enter/exit, materialize, reduced-motion); read app.md for phone screens (exact-spec iPhone device frame, large-title-collapse nav, tab bar, bottom sheet); use icons.md for Lucide-based line icons; finally check against reference.html and pass the checklist.md gate. A separate review.md mode audits existing CSS/pages and returns a prioritized fix list with file:line citations.
- A frontend developer asking an agent to build any web page or component that should feel Apple-grade
- Redesigning a shipped UI that feels fragmented, card-stacked, or generic
- Prototyping App / iOS phone screens (device frame, tab bar, bottom sheet)
- Auditing an existing UI for "is this Apple" and fixing it against the token system
- Adding a portable Apple-style token set and component structure to a React/Vue project
- Any request triggered by "Apple style", "liquid glass", "苹果风", or "clean Apple UI"
How do you install this skill?
- Static review only — no code was executed; example pages and screenshots were not independently reproduced, so output quality awaits real-world validation.
- Publisher identity is unverified by the FollowSkills registry; repo license metadata is NOASSERTION — verify the LICENSE file (MIT) before use.
- No versioning or changelog; future revisions may change the rules — pin a specific commit when adopting.
- Third-party material (emilkowalski/skills, Lucide) should have its upstream license terms independently confirmed before redistribution.
- Local filesystem
Clone into your agent's skills directory. For Claude Code: git clone https://github.com/naplesblue/apple-design-skill.git ~/.claude/skills/apple-liquid-glass . For other agents, point them at SKILL.md — plain markdown + CSS, no build step, no dependency.
git clone --depth 1 https://github.com/naplesblue/apple-design-skill.git ~/.claude/skills/apple-design-skillGenerated from the source repository and skill path; it copies only this skill's folder. If the author's install steps above differ, follow those first. To scope it to one project, replace ~/.claude/skills with that project's .claude/skills.
How do you use this skill?
Once installed, send your agent any of these to trigger it:
- make it look like apple.com
- clean / premium / minimal UI
Once installed, the agent auto-discovers the skill via SKILL.md frontmatter and loads it when the task matches triggers ("Apple style", "liquid glass", "make it look like apple.com", "clean / premium / minimal UI", or any Apple-grade UI request). In Build mode the agent follows the fixed workflow; in Review mode, hand it existing CSS or a page to run the review.md audit. Interactive examples ship at examples/account.html and examples/wallet.html.
What are this skill's strengths and limitations?
- Pure Markdown + CSS, framework-agnostic, no build step or runtime dependencies
- Complete system: tokens, components, page recipes, motion, iOS shell, icons, reference page, self-check gate
- Anti-slop list explicitly names AI-page failure modes (fragmented cards, glass everywhere, rainbow gradients, warm cream ground)
- Ships full interactive example pages (account page, wallet app screen) to verify output
- Motion layer adapted from Emil Kowalski's MIT skill; icons from Lucide (ISC) — licensing is clear
- GitHub metadata lacks a description and topics; the License field is NOASSERTION, so rely on the in-repo LICENSE (README states MIT)
- README explicitly disclaims affiliation with Apple; trademarks belong to Apple Inc. — assess commercial branding use yourself
- No automated test suite; output quality depends on how well the agent actually follows the rules
- No published verification on agent platforms beyond Claude Code, though technically portable
- "Apple quality" is an aesthetic judgment; final results need human comparison against reference.html
How does this skill compare with similar options?
Side by side with related skills; every score comes from the same FSRS standard.
| Skill | FS score | Stars | Last updated | License |
|---|---|---|---|---|
| Apple Liquid Glass Design Skill this page | 58 · Recommended | ★ 273 | 3mo ago | NOASSERTION |
| Stitch Design Taste | 42 · Not recommended | ★ 8.5k | 2mo ago | Apache-2.0 |
| Frontend Design Skill | 52 · Use with care | ★ 5.5k | 5mo ago | MIT |
| OpenChamber Theme System Skill | 57 · Use with care | ★ 12k | 11d ago | MIT |
| Industrial Brutalist UI Skill | 48 · Use with care | ★ 96k | 11d ago | MIT |
How did FollowSkills review this skill?
Pure documentation/style-guidance skill: no scripts, network calls, credential access, or external effects — minimal privilege. Third-party material (motion.md adapted from emilkowalski/skills, Lucide icons) is clearly attributed and licensed in SKILL.md, README, and LICENSE, with explicit non-affiliation with Apple. Deducted for: unverified publisher identity, NOASSERTION license metadata in repo fields, and attribution chain that relies on self-description — cannot statically verify the examples/screenshots were produced by this workflow.
Internal cross-references are consistent (all files named in the SKILL.md workflow are documented), rules are self-consistent with explicit decision trees and self-check gates. Deducted for: static review cannot execute anything; no automated tests or CI evidence; failure-feedback quality is only inferable from docs — above the 'happy path plausible' anchor but below executed reproduction.
Triggers are precise and bilingual ('Apple style', 'liquid glass', '苹果风', '液态玻璃'), two modes (Build/Review), framework-agnostic positioning and non-fit boundaries (no Apple assets, web vs App layer split) are declared; PingFang stack supports Chinese. Fully local markdown+CSS with no overseas-service dependency, good environment fit. Deducted for: limited guidance on boundary cases (e.g., conflicts with existing design systems) and no real invocation evidence for semantic trigger precision.
Well-layered docs (entry → spec → components → patterns → checklist → reference), progressive disclosure, clear MIT license, complete third-party attribution, bilingual documentation. Deducted for: no version number, no changelog, no stated maintenance ownership or update path, NOASSERTION repo license metadata, unverified publisher — governance signals incomplete.
README ships end-to-end example pages (account.html, wallet.html) with screenshots and concrete, actionable rules, giving a clear marginal-value claim over unguided prompting. Deducted for: static review cannot confirm outputs are directly usable; screenshots and examples are not independently reproduced; comparative-benefit evidence is author-claimed only — capped at 7.
Multiple evidence types exist (SKILL.md, spec docs, tokens.css, example HTML, screenshots, LICENSE, third-party credits) — auditable primary material is present. Deducted for: no third-party execution evidence, no CI/tests, and the key claim that examples were built with the skill is author-asserted only; static cap of 5 applies.
Open a dimension to read why it scored that way
Evidence confidence：Low — Mostly static review, author material or a limited demo; useful for discovery, not high-risk decisions.
See the full review method →