🍎
Claude Skillsで簡単にApple風デザインを自動生成！AIっぽいデザインから脱却する方法

2025/11/19に公開
こんにちは、とまだです。
「AI にデザインを任せると AI っぽさが出る」
「サイト全体に一貫性のあるデザインを作りたい」
そんな悩みを解決できるのが、Claude Code Skillsという機能です。
先日の記事でも触れましたが、Anthropic公式もおすすめしているデザインの改善方法となります。
https://zenn.dev/tmasuyama1114/articles/anthropic_claude_skills_design
この記事では、AIにデザインルールを教えて、誰でもApple風のUIを自動生成できる方法を解説します。

実際にスキルを作って、デザインの違いを比較してみましょう。
Claude Skills に苦手意識を持つ方も多いと思いますが、一度作ってみると意外と簡単に作成できることがわかると思います。

また、Claude Skills を簡単に作る方法も紹介しますので、ぜひ試してみてください！

 著者についてとまだ
Claude Code・Cursor・Codex などAI駆動開発の実践者
本業はフリーランスエンジニア、ならびに法人向けAI駆動開発の導入コンサルタント
AI駆動開発を学ぶ方が集まる Vibe Coding Studio コミュニティを運営
UdemyでAI駆動開発を学べる複数のベストセラー講座を展開

東京AI祭プレイベントに登壇
SNS
X (Twitter)
YouTube
Qiita
Zenn

 忙しい人のために要約この記事のポイントは以下の通りです。

Claude Code Skillsは、AIに専門知識を教える「拡張機能」
必要な時にだけデザインに関する知識が読み込まれるので、トークン消費を抑えられる
この記事で紹介したスキルを使えば、新しいスキルを簡単に作成できる

apple-designスキルを作れば、Apple風デザインを自動生成可能

referencesフォルダで詳細ルールを整理すると、より高品質なデザインが実現

 Claude Code Skillsとは？Claude Code Skillsの仕組みと、なぜデザイン作成に便利なのかを見ていきましょう。

 Skillsの基本的な仕組みClaude Code Skillsは、AIに専門知識を教えるための仕組みです。

たとえるなら、料理のレシピ本のようなもので、「Apple風デザインの作り方」というレシピをAIに教えることができます。
また、スキルの中にもドキュメントを複数に分けたり、Pythonスクリプトを自動的に実行したりすることができます。
開発以外の場面ですと、スライド作成だったり、メールの作成だったり、テキストの校閲だったり、様々な場面で使えるようになります。

 なぜSkillsが便利なのかSkillsの最大のメリットは、必要な時にだけ読み込まれる点です。たとえば、テストを書く時やバックエンドの機能を実装する時には、デザインの知識は呼び出されません。つまり、普段のコンテキスト（トークン）を圧迫することなく、必要な時にだけデザインに関する知識が読み込まれるわけですね。
簡単に言うと、引き出しに整理された工具箱のようなもので、デザイン作業の時だけ「デザイン用の工具」を取り出し、テストを書く時は「テスト用の工具」を取り出すイメージです。
これまで、AI に教えたい知識は CLAUDE.md に書いたり、ドキュメントを @./docs/xxxx のように書いていました。

しかし、これですと常にその知識を読み込んでしまうため、不要な知識が読み込まれて、コンテキストを圧迫＆トークン消費が増えてしまいます。
一方、Skillsを使うと、必要な時にだけ読み込むことができるため、コンテキストを圧迫せずに、必要な知識を読み込むことができます。

 Skillsの作成方法このスキルを作るためのAnthropic公式のskill-creatorスキルがあります。

しかし、マーケットプレイスの設定やプラグインのインストールが少し複雑ですよね。
https://github.com/anthropics/skills/tree/main/skill-creator
そこで今回は、私が実際に使っているオリジナルのスキル「claude-skill-creator」を準備しましょう。Claude Code Skillsをまだ使ったことがない方も、これから一緒に作っていくので心配いりません。

 claude-skill-creatorスキルの準備apple-designスキルを作る前に、スキルを簡単に作成できる「claude-skill-creator」を準備します。このスキル自体も、一度作っておけば他のプロジェクトでも使い回せるため、まず設定しておきましょう。

 フォルダとファイルの作成まず、プロジェクトの中に .claude/skills フォルダを作成します。
mkdir -p .claude/skills
もし色んなプロジェクトで使うのであれば、ホームディレクトリの .claude/skills フォルダを作成します。
# いろんなプロジェクトでクロードスキルを作りたい場合
mkdir -p ~/.claude/skills
その中に、claude-skill-creator というフォルダを作成します。
mkdir -p .claude/skills/claude-skill-creator

# いろんなプロジェクトでクロードスキルを作りたい場合
mkdir -p ~/.claude/skills/claude-skill-creator
その中に、SKILL.md ファイルを作成します。
touch .claude/skills/claude-skill-creator/SKILL.md

# いろんなプロジェクトでクロードスキルを作りたい場合
touch ~/.claude/skills/claude-skill-creator/SKILL.md

 SKILL.mdの内容を貼り付ける以下の内容を貼り付けましょう。

これは、Claude Code Skillsを作成するための知識をまとめています。
ポイントは、YAML形式でスキルの名前や説明を記述することです。

特に description には、スキルの説明と、どのような場面で使うかを記述しており、Claude Code は常にここだけを参照してスキルを呼び出します。
一通りスキル作成に必要な知識をあえて分割せずに詰め込んでいるため、長くてすみません。

（細かく読まなくても大丈夫です）
---
name: claude-skill-creator
description: Guide for creating effective Claude Code skills with proper YAML frontmatter, directory structure, and best practices. Use when creating new skills, updating existing skills, or learning about skill development.
---

# Claude Skill Creator Guide

This guide helps you create well-structured, effective skills for Claude Code that extend capabilities with specialized knowledge, workflows, or tool integrations.

## When to Use This Skill

Use this skill when:
- Creating a new skill from scratch
- Updating an existing skill
- Learning about skill structure and best practices
- Troubleshooting why a skill isn't being activated
- Converting documentation into a skill format

## What Are Skills?

Skills extend Claude's capabilities through organized folders containing instructions and resources. They are **model-invoked**—Claude autonomously decides when to use them based on request context, unlike slash commands which require explicit user activation.

## Directory Structure

Skills can be stored in three locations:

1. **Personal Skills**: `~/.claude/skills/skill-name/`
   - Available across all projects for the user
   - Perfect for personal workflows and preferences

2. **Project Skills**: `.claude/skills/skill-name/`
   - Specific to a project, committed to git
   - Shared with team members automatically

3. **Plugin Skills**: Bundled with installed plugins
   - Distributed as packages

## Creating a New Skill

### Step 1: Create the Directory Structure

```bash
# For personal skills
mkdir -p ~/.claude/skills/my-skill-name

# For project skills
mkdir -p .claude/skills/my-skill-name
```

### Step 2: Create SKILL.md with Required Frontmatter

Every skill MUST have a `SKILL.md` file with YAML frontmatter:

```yaml
---
name: skill-identifier
description: Brief description of what this skill does and when to use it
---

# Skill Name

[Your skill content here]
```

**Critical Requirements:**

- **name**:
  - Lowercase letters, numbers, hyphens only
  - Maximum 64 characters
  - Example: `comprehensive-testing`, `api-docs-writer`, `db-migration-helper`

- **description**:
  - Must describe BOTH what the skill does AND when to use it
  - Maximum 1024 characters
  - Include trigger keywords users would mention
  - Be specific, not generic

**Good Description Examples:**

```yaml
# ✅ GOOD: Specific with clear triggers
description: Implement comprehensive tests with test design tables, equivalence partitioning, boundary value analysis, and 100% branch coverage. Use when writing tests, adding test cases, or improving test coverage for React Native/Expo TypeScript code with Jest.

# ✅ GOOD: Clear functionality and use case
description: Analyze Excel spreadsheets, generate pivot tables, create charts from CSV data. Use when working with Excel files, spreadsheet analysis, or data visualization tasks.

# ❌ BAD: Too vague
description: Helps with data processing

# ❌ BAD: Missing when to use
description: This skill handles database migrations and schema changes
```

### Step 3: Write the Skill Content

Follow this recommended structure:

```markdown
---
name: my-skill-name
description: [What it does and when to use it]
---

# Skill Title

Brief introduction explaining the skill's purpose.

## When to Use This Skill

Explicitly list scenarios:
- Use case 1
- Use case 2
- Use case 3

## Core Concepts / Philosophy

Explain the underlying principles or approach.

## Instructions

Provide clear, step-by-step guidance:

1. **Step 1**: Do this
2. **Step 2**: Then do this
3. **Step 3**: Finally do this

## Examples

Show concrete, practical examples:

### Example 1: [Scenario]

```[language]
[code or content example]
```

### Example 2: [Another Scenario]

```[language]
[code or content example]
```

## Best Practices

- Practice 1
- Practice 2
- Practice 3

## Common Patterns

[Common use cases with templates]

## Troubleshooting

Common issues and solutions:

**Issue**: [Problem]
**Solution**: [How to fix]

## AI Assistant Instructions

Specific guidance for Claude on how to use this skill:

When invoked, you should:
1. [Instruction 1]
2. [Instruction 2]
3. [Instruction 3]

Always/Never:
- Always do X
- Never do Y

## Additional Resources

- [Link to documentation]
- [Link to related tools]
```

## Optional: Tool Restrictions

Use `allowed-tools` to limit Claude's capabilities when the skill is active:

```yaml
---
name: safe-file-reader
description: Safely read and analyze files without making modifications
allowed-tools: Read, Grep, Glob
---
```

This restricts Claude to only specified tools, useful for:
- Read-only operations
- Safety-critical workflows
- Preventing accidental modifications

## Optional: Supporting Files

Organize additional resources alongside SKILL.md:

```
my-skill-name/
├── SKILL.md              # Main skill file (required)
├── reference.md          # Additional reference documentation
├── templates/
│   ├── template1.txt
│   └── template2.txt
└── examples/
    ├── example1.ts
    └── example2.ts
```

Reference these files from SKILL.md:

```markdown
See [reference documentation](reference.md) for more details.

Use this [template](templates/template1.txt) as a starting point.
```

## Best Practices for Skill Creation

### 1. Keep Skills Focused

**✅ DO**: One skill = one capability
- `api-docs-writer`: Generate API documentation
- `test-strategy`: Implement comprehensive tests
- `db-migration`: Handle database schema changes

**❌ DON'T**: Create broad, multi-purpose skills
- `developer-helper`: Does everything (too vague)
- `backend-tools`: Mixed unrelated capabilities

### 2. Write Trigger-Rich Descriptions

Include keywords users would naturally use:

```yaml
# ✅ GOOD: Rich with triggers
description: Generate OpenAPI/Swagger documentation from Express routes, FastAPI endpoints, or GraphQL schemas. Use when documenting APIs, creating API specs, or working with OpenAPI, Swagger, REST, or GraphQL.

# ❌ BAD: Missing triggers
description: Helps with API documentation
```

### 3. Provide Concrete Examples

Users and Claude learn best from examples:

```markdown
## Example: Creating a REST API Endpoint

```typescript
// Given this Express route
app.get('/users/:id', async (req, res) => {
  const user = await db.getUser(req.params.id);
  res.json(user);
});

// Generate this OpenAPI spec
paths:
  /users/{id}:
    get:
      summary: Get user by ID
      parameters:
        - name: id
          in: path
          required: true
          schema:
            type: string
```
```

### 4. Be Explicit About Workflow

Tell Claude exactly what to do:

```markdown
## AI Assistant Instructions

When this skill is activated:

1. **First**: Analyze the codebase structure
2. **Then**: Ask clarifying questions if needed
3. **Next**: Generate the initial version
4. **Finally**: Validate and test the output

Always:
- Use TypeScript for type safety
- Include error handling
- Add JSDoc comments

Never:
- Skip validation steps
- Generate code without examples
- Assume user preferences
```

### 5. Test Your Skills

After creating a skill, test it:

1. **Test Activation**: Does it trigger with expected keywords?
2. **Test Instructions**: Does Claude follow the workflow correctly?
3. **Test Examples**: Are they clear and helpful?
4. **Test Edge Cases**: Does it handle unusual scenarios?

### 6. Version Your Skills

Track changes in your skill over time to help users understand updates and improvements. You can maintain a changelog section in your SKILL.md to document versions, new features, and bug fixes.

## Common Skill Patterns

### Pattern 1: Code Generation Skill

```yaml
---
name: component-generator
description: Generate React/Vue/Angular components with TypeScript, tests, and stories. Use when creating new components, scaffolding UI elements, or building component libraries.
---

# Component Generator

## Instructions

1. Ask user for component type (React/Vue/Angular)
2. Request component name and props
3. Generate:
   - Component file with TypeScript
   - Test file with comprehensive tests
   - Storybook story file
4. Follow project conventions from existing components
```

### Pattern 2: Analysis Skill

```yaml
---
name: code-complexity-analyzer
description: Analyze code complexity, identify refactoring opportunities, calculate cyclomatic complexity, and suggest improvements. Use when reviewing code, planning refactoring, or improving code quality.
---

# Code Complexity Analyzer

## Instructions

1. Scan provided code files
2. Calculate metrics:
   - Cyclomatic complexity
   - Function length
   - Nesting depth
3. Identify issues:
   - Functions > 50 lines
   - Complexity > 10
   - Deep nesting > 3 levels
4. Suggest specific refactorings
```

### Pattern 3: Documentation Skill

```yaml
---
name: readme-generator
description: Generate comprehensive README files with installation, usage, API docs, and examples. Use when creating new projects, improving documentation, or standardizing README format.
---

# README Generator

## Instructions

1. Analyze project structure and package.json
2. Generate sections:
   - Project description
   - Installation steps
   - Usage examples
   - API documentation
   - Contributing guidelines
3. Include badges for CI, coverage, license
4. Add table of contents for long READMEs
```

## Troubleshooting

### Issue: Claude Doesn't Use the Skill

**Possible Causes:**

1. **Description lacks trigger keywords**
   - ✅ Fix: Add specific terms users would mention
   - Example: Add "Jest", "testing", "test coverage" to description

2. **Skill name has invalid characters**
   - ✅ Fix: Use only lowercase, numbers, hyphens
   - Example: Change `My_Skill_Name` to `my-skill-name`

3. **YAML frontmatter is malformed**
   - ✅ Fix: Validate YAML syntax
   - Check for proper `---` delimiters
   - Ensure no tabs (use spaces)

4. **File is not named SKILL.md**
   - ✅ Fix: Rename to `SKILL.md` (exact case)

5. **Directory structure is wrong**
   - ✅ Fix: Ensure path is `~/.claude/skills/skill-name/SKILL.md`

### Issue: Skill Activates at Wrong Times

**Possible Causes:**

1. **Description is too broad**
   - ✅ Fix: Make description more specific
   - Example: Instead of "helps with files", use "analyze CSV files and generate reports"

2. **Trigger keywords overlap with other skills**
   - ✅ Fix: Use more specific, unique keywords

### Issue: Skill Doesn't Follow Instructions

**Possible Causes:**

1. **Instructions are unclear or ambiguous**
   - ✅ Fix: Use numbered steps, be explicit

2. **Examples don't match instructions**
   - ✅ Fix: Ensure examples demonstrate the workflow

3. **Missing AI Assistant Instructions section**
   - ✅ Fix: Add explicit guidance for Claude

## Sharing Skills with Teams

### For Project Skills

1. Create skill in `.claude/skills/skill-name/`
2. Commit to git:
   ```bash
   git add .claude/skills/skill-name/
   git commit -m "feat: add [skill-name] skill"
   git push
   ```
3. Team members get the skill automatically on `git pull`

### For Plugin Distribution

1. Package skill as npm module
2. Include installation instructions
3. Document required dependencies
4. Provide usage examples

## Quick Reference: Skill Checklist

When creating a skill, ensure:

- [ ] Directory created: `~/.claude/skills/skill-name/` or `.claude/skills/skill-name/`
- [ ] File named exactly `SKILL.md`
- [ ] YAML frontmatter present with `---` delimiters
- [ ] `name` field: lowercase, hyphens, <64 chars
- [ ] `description` field: describes what + when, <1024 chars
- [ ] Description includes trigger keywords
- [ ] Clear "When to Use This Skill" section
- [ ] Step-by-step instructions provided
- [ ] Concrete examples included
- [ ] Best practices documented
- [ ] AI Assistant Instructions added
- [ ] Tested with realistic scenarios
- [ ] No typos or formatting issues

## Example: Complete Skill Template

```markdown
---
name: example-skill
description: [What this does] and [specific use case]. Use when [trigger scenario 1], [trigger scenario 2], or [working with keyword1, keyword2].
---

# Example Skill

Brief introduction to the skill's purpose and value.

## When to Use This Skill

- Scenario 1
- Scenario 2
- Scenario 3

## Core Concepts

Explain the underlying approach or methodology.

## Instructions

1. **Step 1**: First action
2. **Step 2**: Second action
3. **Step 3**: Final action

## Examples

### Example 1: Common Use Case

```typescript
// Code example here
```

### Example 2: Advanced Use Case

```typescript
// Another example
```

## Best Practices

- Practice 1
- Practice 2

## Common Patterns

Pattern templates or reusable snippets.

## Troubleshooting

**Issue**: Problem description
**Solution**: How to resolve

## AI Assistant Instructions

When this skill is activated:

1. Always do X
2. Never do Y
3. Follow this workflow: [steps]

## Additional Resources

- [Documentation link]
- [Tool link]
```

---

## Tips for Effective Skills

1. **Start Simple**: Begin with basic functionality, iterate based on usage
2. **Use Real Examples**: Draw from actual use cases, not hypothetical ones
3. **Be Specific**: Avoid vague language like "helps with" or "handles"
4. **Test Thoroughly**: Verify skill activates correctly and produces expected results
5. **Document Assumptions**: Clarify prerequisites, dependencies, or required knowledge
6. **Iterate**: Skills improve with feedback—update based on real usage

---

This guide ensures you can create high-quality, effective skills that seamlessly extend Claude Code's capabilities!

 スキルが認識されているか確認するでは、実際に Claude Codeを起動して、スキルが認識されているか確認してみましょう。
claude
慣れないうちは、まずClaude Codeが認識しているスキルを聞いてみるのがおすすめです。不安な方も多いと思いますが、以下のようなプロンプトを渡してみましょう。
> あなたが認識している Claude Skills を教えてください。
うまく認識されていれば、以下のような回答が返ってくるはずです。

先ほどの claude-skill-creator スキルが認識されていることが確認できます。
⏺ 現在認識している Claude Skills は以下の通りです：

  利用可能なスキル

  1. claude-skill-creator
    - Claude Code スキルの作成ガイド
    - 適切な YAML フロントマター、ディレクトリ構造、ベストプラクティスの説明
    - 新しいスキルの作成や既存スキルの更新時に使用

  これらのスキルは Skill ツールを使用して呼び出すことができます。特定の作業内容に応じて、適
  切なスキルを選択して使用します。

  何か特定のスキルについて詳しく知りたいことはありますか？

 apple-designスキルを作成してみるここまで準備ができたら、実際にApple風デザインのスキルを作成してみます。本当にこれだけで使えるようになるのか、実際に試してみましょう。

 Claude Codeにスキル作成を依頼するでは、claude-skill-creator スキルを使用して、Apple風のおしゃれデザインを作成するスキルを作りましょう。
Claude Skillsは、使えそうなスキルを勝手に判断して呼び出してくれるのがメリットですよね。

ただし、絶対にスキルを使用してほしい場面では、そのスキルの名前を明示的にプロンプトの中に含めるのがおすすめです。

そうすることで、ほぼ確実に呼び出せますし、複数のスキルを組み合わせて作業してもらうこともできます。
今回は、AppleのデザインシステムであるHuman Interface Guidelinesを参考にしながら、Appleっぽいスタイリッシュなデザインを作成するためのスキルを作成してみましょう。

もちろん、他にも Google Material Design や Atlassian Design System など、他のデザインシステムを作成するためのスキルも作成できますので、好きにカスタマイズしてOKです。
以下のようなプロンプトを渡してみましょう。
> claude-skill-creator スキルを使って、Apple風のおしゃれデザインを作成するための新たな Claude Skills である "apple-design" をプロジェクト内に作成してください。
ここでは claude-skill-creator スキルの存在を明示的にプロンプトの中に含めていますので、まず先ほど作ったスキルが確実に認識されるはずです。
このプロンプトだけで、プロジェクト内にApple風のおしゃれデザインを作成するためのClaude Skillsが作成されます。
その際、以下のようにSkills使用の許可を求められれば、ちゃんとSkillsが使用されることが確認できます。
 Use skill "claude-skill-creator"?
 Claude may use instructions, code, or files from this Skill.

   Guide for creating effective Claude Code skills with proper YAML frontmatter, directory
   structure, and best practices. Use when creating new skills, updating existing skills, or
   learning about skill development. (user)

 Do you want to proceed?
 ❯ 1. Yes
   2. Yes, and don't ask again for claude-skill-creator in
   /Users/masuyama/Desktop/test/apple-design-skills
   3. No, and tell Claude what to do differently (esc)
ここでは、Yesを選択しましょう。
2番目の選択肢でもOKで、そちらを選択すると、以後このプロジェクト内でclaude-skill-creatorスキルを使用する際に、許可を求められなくなります。
では、あとは待つだけです。

 生成されたスキルの確認先ほど指示した通り、プロジェクト内にapple-designスキルが作成されているはずです。
以下のようなディレクトリ構造で作成されているはずです。
.claude
└── skills
    └── apple-design
        └── SKILL.md
ここでは省略しますが、SKILL.mdの中にはApple Design Systemに関する詳細が記述されています。このドキュメント（スキル）は必要な時にだけ読み込まれるため、たとえばテストを書く時や、バックエンドの機能を実装する時には呼び出されません。つまり、普段のコンテキストを圧迫することなく、トークンの消費を抑えながら、必要な時にだけこのデザインに関する知識が読み込まれるわけですね。
ちなみに、SKILL.md という名前じゃないと認識されないので注意してください。

私の claude-skill-creator スキルを使っていれば、ちゃんと SKILL.md という名前で作成されるはずです。

 referencesフォルダで詳細ルールを整理する基本的なスキルができたところで、さらに充実させることもできます。もっと細かくデザインルールを設定したい場合は、referencesフォルダを活用しましょう。

 より充実したデザインシステムへClaude Skillsでは、referencesフォルダ内に参考になるドキュメントを置いておくことができます。たとえるなら、料理本の「補足資料」のようなものですね。メインのレシピ（SKILL.md）はシンプルに保ちつつ、詳しい調理法は別冊として参照できます。
それらも必要な時に参照されるため、SKILL.md自体を小さく保ちつつ、必要な時にだけ読み込むことが可能です。したがって、より柔軟にカスタマイズできますし、効率的にスキルの機能を使うことができます。
そのようにカスタマイズするプロンプトを与えてみましょう。
> claude-skill-creator を使って、apple-design Skills をカスタマイズしてください。references フォルダを活用しつつ、よりデザインシステムとして充実させてください。

 生成された詳細構造上記のプロンプトを与えたところ、以下のようにカスタマイズしてくれました。
.claude
├── settings.local.json
└── skills
    └── apple-design
        ├── references
        │   ├── animations.md
        │   ├── colors.md
        │   ├── components
        │   │   ├── buttons.md
        │   │   ├── cards.md
        │   │   └── navigation.md
        │   ├── examples
        │   │   └── landing-page.md
        │   ├── frameworks
        │   │   ├── react.md
        │   │   └── tailwind.md
        │   ├── glassmorphism.md
        │   ├── principles.md
        │   └── typography.md
        └── SKILL.md
全体として、より詳細なドキュメントに分かれつつ、カスタマイズ性を高めてくれました。
具体的には、buttons.mdのように各コンポーネントごとにルールを細かく記述できます。たとえばbuttons.mdを見てみると、以下のような内容が記述されています（冒頭のみ抜粋）。
# Apple スタイルボタン

Apple のボタンデザインパターンとコンポーネント実装。

## プライマリボタン

### 基本スタイル

```css
.apple-button-primary {
  /* 背景とテキスト */
  background: var(--accent-blue);
  color: white;

  /* サイズとスペーシング */
  padding: 12px 24px;
  font-size: 17px;
  font-weight: 500;
  line-height: 1.24;
...

 実際にデザインを作って比較してみるここまで作成したapple-designスキルが、実際にどれだけデザインを改善するか確認してみましょう。本当に違いが出るのでしょうか？
では、スキルなしとスキルありで同じプロンプトを試して、その違いを比較します。

 スキルなしで作ったデザインでは、実際に使ってみましょう。
まずはスキルを使わずに、普通にデザインを作成してみます。Skillsをまだ作っていない別のディレクトリでClaude Codeを起動してみましょう。
claude
以下のようなプロンプトを渡してみます。Webサイトでよくあるコンポーネントを集めたようなデザインを作成させるプロンプトです。
架空のスマートホーム管理アプリの設定画面を1ページで作成してください。以下の要素を含めてください:
・ページタイトルと説明文
・ナビゲーションメニュー(3-5項目)
・設定項目のカード(3つ以上)
・トグルスイッチまたはボタン
・プライマリボタンとセカンダリボタン
・アイコン(CSS/HTMLで表現可能なもの)
HTMLとCSSのみで実装し、スクロール不要で1画面に収めてください。
作成されたデザインがこちらです。
それなりに見れるデザインが作成されていますが、別の記事でも触れているように、全体として紫系統だったり、妙にグラデーションが多かったりと、よくあるAI生成UIになってしまっていませんか？

 apple-designスキルありで作ったデザインでは次に、apple-designスキルを作ったディレクトリ（プロジェクト内）でClaude Codeを起動してみましょう。
claude
以下のようなプロンプトを渡してみます。
Claude Skillは勝手に呼び出されるのがポイントではあるのですが、確実に使用するためにapple-designという名前をプロンプトの中に含めておきます。
架空のスマートホーム管理アプリの設定画面を1ページで作成してください。以下の要素を含めてください:
・ページタイトルと説明文
・ナビゲーションメニュー(3-5項目)
・設定項目のカード(3つ以上)
・トグルスイッチまたはボタン
・プライマリボタンとセカンダリボタン
・アイコン(CSS/HTMLで表現可能なもの)
HTMLとCSSのみで実装し、スクロール不要で1画面に収めてください。

apple-design skillを使ってください。
末尾の「apple-design skillを使ってください。」というのは、先ほど作成したapple-designスキルを使ってくださいという意味です。
実際に動かしてみると、Claude Codeのコンソール上では以下のように、スキルを使用していることが確認できます。
> The "apple-design" skill is running
そして作成されたデザインがこちらです。
全体として統一感があり、余白もそれぞれ要素ごとに適度に設けられています。
さらに、見出しやカードのデザインも整っており、明らかにルールに則ったデザインになっていますね。

 デザインの違いを詳しく見るどこが特にApple風なのかを見分けるのは難しいですが、特にトグルボタンなんかは、iOSでの設定画面に近いデザインになっていると思います。
実際のAppleのデザインガイドラインだと、現在のトグルボタンは以下のようになっていました。
https://developer.apple.com/jp/design/human-interface-guidelines/toggles
ボタンの大きさは今では少し横長になっていますが、かなりこちらのデザインに近いデザインで作ってくれていますね（記憶にあったトグルボタンは少し古かったのかもしれませんが）。
その他、全体としてApple風かどうかを正確に判別するのは難しいかもしれません。
しかし、少なくともこちらのデザインの方が好きという方が多いのではないでしょうか？
今回は一気に一枚絵を作成してもらいましたが、複数のページを継ぎ足し継ぎ足しで追加していく時ほど、こういったデザインルールを守ることが重要になってきます。

デザインルールがない状態で追加していくと、一貫性のないデザインになってしまいますからね。

 まとめこの記事では、Claude Code Skillsを使って、Apple風のデザインを自動生成する方法を紹介しました。
Claude Skills に苦手意識を持つ方も多いと思いますが、実際に作ってみると意外と簡単に作成できることがわかると思います。
claude-skill-creatorスキルでapple-designスキルを作成し、実際にデザインを比較してみたところ、明らかな違いが出ることを確認できました。
Claude Code Skillsを使えば、デザインセンスに自信がない方でも、AIに専門知識を教えることで高品質なデザインを自動生成できます。ぜひプロジェクトでも試してみてください！

 AI駆動開発の最新情報をキャッチアップするには？Youtube でも AI 駆動開発の実践動画を公開しています！
よければチャンネル登録していただき、AI駆動開発の実践的な情報をキャッチアップにお役立ていただければと思います。
https://www.youtube.com/@vibe-coding-studio
また、Discord で AI 駆動開発を学ぶ同士が集まる無料コミュニティもありますので、気軽に参加してみてください。
https://www.vibecodingstudio.dev/community
著者について

忙しい人のために要約

Claude Code Skillsとは？

Skillsの基本的な仕組み

なぜSkillsが便利なのか

Skillsの作成方法

claude-skill-creatorスキルの準備

フォルダとファイルの作成

SKILL.mdの内容を貼り付ける

スキルが認識されているか確認する

apple-designスキルを作成してみる

Claude Codeにスキル作成を依頼する

生成されたスキルの確認

referencesフォルダで詳細ルールを整理する

より充実したデザインシステムへ

生成された詳細構造

実際にデザインを作って比較してみる

スキルなしで作ったデザイン

apple-designスキルありで作ったデザイン

デザインの違いを詳しく見る

まとめ

AI駆動開発の最新情報をキャッチアップするには？

Discussion
