Apple Liquid Glass Design Skill
Teach an AI coding agent to produce Apple-grade "macOS Liquid Glass" web UI through executable design rules instead of vague style prompts.
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.
- 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.
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"
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 do you install this skill?
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.
How do you use this skill?
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.