Apple Design Skill

Guides AI assistants to generate frontend UI code with Apple's design tokens, typography, layouts, copywriting, and image curation for Apple-style web pages.

Security Scan

The skill's files, instructions, and requirements are coherent with its stated purpose (generating Apple‑style frontend code); there are no unexplained credential requests, opaque installers, or hidden endpoints in the provided materials.

Purpose & Capability

Name/description match the included prompts, examples, and design token content. The repository contains CSS tokens, typography rules, copywriting heuristics, layout templates, and example outputs — all appropriate for an 'Apple Design' UI code generator. The use of Unsplash/Pexels and Google Fonts is explicitly described as optional/for-fallback and aligns with the image/font features.

Instruction Scope

SKILL.md only instructs installing via the OpenClaw CLI or copying CLAUDE.md into a project and describes which prompt modules to load. It does not ask the agent to read unrelated system files, access credentials, or transmit data to unexpected endpoints. References to external resources (images.googleapis.com, images.unsplash.com) appear only in examples and are called out as third‑party resources.

Install Mechanism

No install spec is declared (instruction‑only). The SKILL.md's suggested install methods are platform‑native (OpenClaw CLI, copying CLAUDE.md). There are no downloads from untrusted URLs or extract/install steps in the manifest. The repo does include package.json/package-lock and tests, but SKILL.md does not instruct running npm install — this is a repository artifact, not an installer behavior.

Credentials

requires.env and required binaries are empty. The skill does not request secrets or environment variables. The only network resources referenced are public CDNs (Google Fonts) and image hosts (Unsplash), which are expected for frontend examples.

Persistence & Privilege

No elevated privileges or permanent 'always' presence are requested (always: false). disable-model-invocation is false (normal). The skill does not modify other skills or system configuration in the provided instructions.

Assessment

This skill appears coherent and focused on generating Apple‑style HTML/CSS and copy. Before installing: (1) confirm you trust the skill source — the manifest references a placeholder GitHub clone URL and the registry owner is an ID string; (2) review CLAUDE.md and SKILL.md yourself because these files become instructions the agent will follow; (3) be aware example outputs load Google Fonts and sample images from public CDNs (these cause network requests when viewing generated HTML); (4) do not run npm install or other repository-level install commands unless you inspect package.json and the packages it would pull. Also note potential trademark/branding concerns using 'Apple' in the name — this is not a security risk but may have legal/brand implications.

English | 中文

---

English

An open-source AI Skill that guides AI coding assistants to generate frontend UI code in Apple's iconic design style. Compatible with both OpenClaw and Claude Code ecosystems.

Features

• Design Token System — Colors, spacing, font weights, shadows, gradients, and responsive breakpoints faithful to Apple's visual language
• Typography Engine — Multi-language font stacks (EN, zh-CN, zh-TW, JA, KO) with automatic fallback to Google Fonts
• Copywriting Optimizer — Transforms ordinary copy into Apple-style "crisp & punchy" headlines and descriptions
• Image Curator — Recommends high-quality free images from Unsplash/Pexels with CSS gradient fallbacks
• Layout Patterns — Hero sections, product grids, feature cards, and scroll-animated blocks

Installation

OpenClaw (Recommended)

# Install via OpenClaw CLI
openclaw install apple-design-skill

Once installed, the Skill is automatically loaded by your AI coding assistant within the OpenClaw ecosystem.

Claude Code

Copy the CLAUDE.md file from this repository into your project root. Claude Code will automatically pick it up as a custom instruction file.

# Clone and copy
git clone https://github.com/user/apple-design-skill.git
cp apple-design-skill/CLAUDE.md /path/to/your/project/CLAUDE.md

Usage Examples

After installing the Skill, simply ask your AI coding assistant to generate Apple-style pages:

Example 1 — Product Landing Page

Generate a product landing page for a wireless headphone in Apple style.

Example 2 — Feature Showcase Page

Create a feature showcase page highlighting 4 key features of a smartwatch, Apple style.

Example 3 — Pricing Page

Build a pricing comparison page with 3 tiers in Apple's clean design language.

See the examples/ directory for full prompt-input / HTML-output pairs.

Responsibility Boundaries

This project clearly separates what is implemented by the Skill itself, what relies on the OpenClaw platform, and what depends on third-party services.

Capability	Implemented By
Design Token System (colors, spacing, shadows, etc.)	✅ Skill itself
Typography Engine (font stacks, sizes, weights)	✅ Skill itself
Copywriting Optimizer (copy rules & patterns)	✅ Skill itself
Layout Patterns (Hero, grid, cards, scroll)	✅ Skill itself
Image Curator — selection rules & CSS fallbacks	✅ Skill itself
Image Curator — live API search (Unsplash/Pexels)	🔌 Optional extension (third-party API)
Skill installation & distribution	🏗️ OpenClaw platform
Version management	🏗️ OpenClaw platform
Dependency resolution	🏗️ OpenClaw platform
User ratings & reviews	🏗️ OpenClaw platform

Project Structure

apple-design-skill/
├── README.md                   # This file
├── LICENSE                     # MIT License
├── CONTRIBUTING.md             # Contribution guide
├── CHANGELOG.md                # Version history
├── manifest.json               # OpenClaw Skill metadata
├── CLAUDE.md                   # Claude Code compatible entry
├── prompts/
│   ├── main.md                 # Core entry prompt
│   ├── design-tokens.md        # Design token definitions
│   ├── typography.md           # Multi-language font system
│   ├── copywriting.md          # Copywriting optimization rules
│   ├── image-curation.md       # Image curation strategy
│   └── layout-patterns.md      # Layout pattern templates
└── examples/
    ├── product-landing/        # Product landing page example
    ├── feature-showcase/       # Feature showcase page example
    └── pricing-page/           # Pricing page example

License

This project is licensed under the MIT License.

---

中文

一个开源的 AI Skill 项目，指导 AI 编码助手生成具有苹果官网设计风格的前端 UI 代码。同时兼容 OpenClaw 和 Claude Code 生态。

功能特性

• 设计令牌系统 — 颜色、间距、字重、阴影、渐变、响应式断点，极致还原苹果视觉语言
• 排版引擎 — 多语言字体栈（英文、简中、繁中、日文、韩文），自动回退至 Google Fonts
• 文案优化器 — 将普通文案转化为苹果风格的"果味"文案，简洁有力
• 配图策略 — 从 Unsplash/Pexels 推荐高质量免费图片，并提供 CSS 渐变替代方案
• 布局模式 — Hero 区块、产品展示网格、特性对比卡片、滚动动效区块

安装方式

OpenClaw（推荐）

# 通过 OpenClaw CLI 安装
openclaw install apple-design-skill

安装后，Skill 会被 OpenClaw 生态中的 AI 编码助手自动加载。

Claude Code

将本仓库中的 CLAUDE.md 文件复制到你的项目根目录。Claude Code 会自动将其作为自定义指令文件加载。

# 克隆并复制
git clone https://github.com/user/apple-design-skill.git
cp apple-design-skill/CLAUDE.md /path/to/your/project/CLAUDE.md

使用示例

安装 Skill 后，直接向 AI 编码助手描述你的需求即可：

示例 1 — 产品落地页

生成一个无线耳机的产品落地页，使用苹果设计风格。

示例 2 — 特性介绍页

创建一个智能手表的特性介绍页，展示 4 个核心功能，苹果风格。

示例 3 — 定价页

构建一个包含 3 个套餐的定价对比页面，使用苹果简洁的设计语言。

完整的 prompt 输入和 HTML/CSS 输出示例请参见 examples/ 目录。

职责边界说明

本项目明确区分了 Skill 自身实现的功能、依赖 OpenClaw 平台的功能，以及依赖第三方服务的功能。

能力	实现方
设计令牌系统（颜色、间距、阴影等）	✅ Skill 自身
排版引擎（字体栈、字号、字重）	✅ Skill 自身
文案优化器（文案规则与模式）	✅ Skill 自身
布局模式（Hero、网格、卡片、滚动）	✅ Skill 自身
配图策略 — 选图规则与 CSS 回退方案	✅ Skill 自身
配图策略 — 图片搜索 API 调用（Unsplash/Pexels）	🔌 可选扩展（第三方 API）
Skill 安装与分发	🏗️ OpenClaw 平台
版本管理	🏗️ OpenClaw 平台
依赖解析	🏗️ OpenClaw 平台
用户评价系统	🏗️ OpenClaw 平台

项目结构

apple-design-skill/
├── README.md                   # 本文件
├── LICENSE                     # MIT 许可证
├── CONTRIBUTING.md             # 贡献指南
├── CHANGELOG.md                # 变更日志
├── manifest.json               # OpenClaw Skill 元数据
├── CLAUDE.md                   # Claude Code 兼容入口
├── prompts/
│   ├── main.md                 # 核心入口 prompt
│   ├── design-tokens.md        # 设计令牌定义
│   ├── typography.md           # 多语言字体系统
│   ├── copywriting.md          # 文案优化规则
│   ├── image-curation.md       # 配图策略
│   └── layout-patterns.md      # 布局模式模板
└── examples/
    ├── product-landing/        # 产品落地页示例
    ├── feature-showcase/       # 特性介绍页示例
    └── pricing-page/           # 定价页示例

许可证

本项目基于 MIT 许可证 开源。