🎁 Get the FREE AI Skills Starter Guide — Subscribe →
BytesAgainBytesAgain
BytesAgain › Skills › Apple Design Skill
🦀 ClawHub

Apple Design Skill

by @chaos-xxl

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

Versionv1.0.0
Downloads368
#crypto-defi#writing#legal
TERMINAL
clawhub install apple-design-skill

📖 About This Skill

Apple Design Skill 🍎

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 许可证 开源。