Apple Design System

Apple-inspired UI/UX design language (from getdesign.md/apple) as adapted into a production app. Use when building, restyling, or reviewing any UI — screens, components, buttons, headers, alerts, sheets, cards, forms, typography, color, or spacing — so the result matches this Apple design language: photography-first, a single blue accent, pill CTAs, no chrome shadows, and a strict weight ladder. Trigger on "design a screen", "style this component", "make it look Apple / like QueenSkiilia", "build the UI", or "review my UI for design consistency".

19 stars 2 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add rukkiecodes/claude-apple-design-system --skill apple-design-system

Manual install

git clone --depth 1 https://github.com/rukkiecodes/claude-apple-design-system.git /tmp/claude-apple-design-system
mkdir -p ~/.claude/skills
cp -r /tmp/claude-apple-design-system/. ~/.claude/skills/apple-design-system

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# Apple Design System

An Apple Human-Interface-inspired design language, distilled from the canonical
[getdesign.md/apple](https://getdesign.md/apple/design-md) spec and hardened into a
shipping product. Use it to build and review UI so everything reads as one quiet,
photography-first, single-accent Apple system — not a pile of one-off styles.

## Foundation — where this design comes from

The base language was installed with **getdesign**:

```bash
npx getdesign@latest add apple
```

That command drops a canonical `DESIGN.md` (Apple's web design language: product
tiles, SF Pro type ramp, one Action Blue accent, the single product drop-shadow).
That file is preserved verbatim at **`references/apple-design-source.md`** — it is the
source of truth for *why* every rule below exists. When a decision isn't covered
here, defer to that document.

This skill then captures how that language was **adapted into a real app** (an
Expo / React Native client): semantic design tokens, responsive normalizers, and a
set of component recipes that already passed design review. The values are
platform-agnostic; the code samples are React Native but translate directly to web
(swap `View`→`div`, `StyleSheet`→CSS, keep the tokens and rules).

## The 8 non-negotiable rules

Read these first. They are what make the system feel Apple; breaking one is the
fastest way to look off-brand.

1. **One accent, ever.** Every interactive element — links, primary CTAs, focus,

Read the full skill on GitHub

Details

Skill name: apple-design-system
Repository: rukkiecodes/claude-apple-design-system
License: MIT
Repo updated: 11 July 2026

FAQ

What does the Apple Design System skill do?

How do I install the Apple Design System skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add rukkiecodes/claude-apple-design-system --skill apple-design-system. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Apple Design System popular?

It lives in rukkiecodes/claude-apple-design-system, which has 19 GitHub stars and 2 forks.

Related skills

Screenshot to HTML

sevzq/screenshot-to-html

Replicate a UI screenshot/image/mockup into a high-fidelity, self-contained HTML page. Faithful image-to-HTML / screenshot-to-code cloning that matches the RENDERED result (not copied computed numbers) through a render -> screenshot -> compare -> refine loop using the local Chrome. Use whenever the user gives an image/screenshot/mockup/Figma export and wants HTML/CSS (plain or Tailwind), or asks to "复刻 / 还原 / clone / recreate / turn this design into a webpage".

Frontend & Design

Typescript React Nextjs Patterns

leejpsd/typescript-react-nextjs-patterns

Production-grade TypeScript reference for React & Next.js frontend development. Covers type narrowing, component Props, generic hooks, discriminated unions, as const, satisfies, Zod validation, TanStack Query, server/client boundaries, forms, state management, performance, accessibility, debugging, and code review. Use when the user works with TypeScript in React or Next.js: type errors, Props design, generics, API typing, SSR/CSR boundaries, hydration issues, form validation, state management, performance, or code review. Also use for "how should I type this?", "why does this type error happe

Frontend & Design

Web Motion

Schmandarine/web-motion-skill

Closes the agentic coding loop for web animation. Lets Claude scroll the user's page while recording it (Playwright), extract frames, build a labelled contact sheet, and reason about timing/easing/trajectory frame-by-frame — plus motion design principles (Disney's 12, adapted for web, GSAP, CSS, scroll input) to name and fix what's wrong. Use whenever the user wants to add, improve, debug, or review any animation — scroll effects, transitions, hover states, entrance/exit, loading states, micro-interactions. Trigger even if the user doesn't say "animation" but describes something moving, appear

Frontend & Design

Components

AnayDhawan/Components

Use when building a frontend and the user wants a distinctive / animated / "wow" UI element in React + Tailwind - e.g. a laptop-opening-on-scroll, 3D tilt card, spotlight hero, animated beams/background, marquee, bento grid, interactive globe, meteor/particle background, shimmer button, or scroll/reveal motion. Fetches the showpiece component LIVE at build time from code libraries (Aceternity, Magic UI, Cult UI, ReactBits, 21st.dev) via their shadcn registry command (or WebFetch fallback), then adapts it to brand tokens. Also covers plain components (button, form, modal, table, etc.) as a fall

Frontend & Design

Find Domain

paveldevyatov/ai-domain-name-generator

AI domain name generator, domain finder and domain availability checker — brainstorms brandable names and domain hacks for a project, then checks which are really free at the registries (RDAP and whois), honest about zones it can't verify. Use when the user wants to find, brainstorm, generate or check a domain name, asks whether a domain like X.com is available or taken, wants domain hacks (bit.ly-style names), or needs a brand or product name with a free domain for a project, startup or app.

Frontend & Design

UI Sift

Ciao1019/ui-sift

设计、实现、评审或打磨简洁且交互精致的前端页面与组件。提供项目画像、视觉判断、精选组件检索、官方 skills/MCP 与源码发现、多库集成和证据验收。适用于新页面、后台、AI 对话、文档工作台、参考还原和局部 UI 改善；纯后端、仅修复业务逻辑或机械改字时不使用。

Frontend & Design

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.