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
你能得到
- 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
适合场景
- 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
不适合
- 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
- 名称
- Apple-Style UI Design
- 下载数
- 1
- 分类
- 设计
- 包含 skills
- 1
下载与安装
更新内容: 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.
登录用户免费下载。
1. 下载 ZIP
点击上方按钮下载打包好的 skill，内含 SKILL.md 及全部配套文件。
2. 解压到 agent 的 skills 目录
解压后确保 SKILL.md 直接位于以 skill 命名的文件夹内：
unzip apple-style-ui-v1.1.0.zip -d ~/.claude/skills/apple-style-ui/各 Agent 的 skills 目录
- Claude Code
- ~/.claude/skills
- Cursor
- ~/.cursor/skills
- Codex
- ~/.codex/skills
- GitHub Copilot
- ~/.copilot/skills
3. 重启你的 agent
下次启动时 agent 会自动识别新 skill，直接问它能做什么。
版本历史 (2)
- v1.1.02026/10/2 · 532.9 KB · 12 个文件
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.02026/10/2 · 525.1 KB · 10 个文件
Initial release — SKILL.md, design tokens, components reference, and a complete demo landing page (Aura headphones) with product photography.
评价
相关技能
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.