iTranslated by AI
Easily Generate Apple-Style Designs with Claude Skills: How to Move Beyond "AI-Looking" UI
Hello, I'm Tomada.
"Leaving design to AI results in an 'AI-ish' look."
"I want to create a design with consistency across the entire site."
Claude Code Skills is the feature that can solve these concerns.
As I mentioned in a previous article, this is a design improvement method recommended by Anthropic officially. I explained the "Convergence of Distribution" problem in UI/UX design and its solutions in detail in the following article.
How to Escape 'AI-ish' UI with Claude Code Skills! Recommended by Anthropic Official
In this article, I will explain how to teach design rules to AI so that anyone can automatically generate Apple-style UIs.
Let's actually create a skill and compare the design differences.
Many people may feel hesitant about Claude Skills, but you'll find it's surprisingly easy once you try creating one.
I will also show you an easy way to create Claude Skills, so please give it a try!
(Update: A demonstration video has been released! It also introduces how to apply this to other design systems.)
About the Author
Tomada
- Practitioner of AI-driven development using Claude Code, Cursor, Codex, etc.
- Main career as a freelance engineer and a consultant for implementing AI-driven development for corporations.
- Operates the Vibe Coding Studio community for those learning AI-driven development.
- Offers several best-selling courses on Udemy for learning AI-driven development.
- Speaker at the Tokyo AI Festival Pre-event.
SNS
Summary for Busy People
The points of this article are as follows:
- Claude Code Skills are "extensions" for teaching expertise to AI.
- Knowledge about design is loaded only when necessary, so token consumption can be suppressed.
- By using the skill introduced in this article, you can easily create new skills.
- Creating an apple-design skill enables the automatic generation of Apple-style designs.
- Organizing detailed rules in the references folder achieves even higher-quality designs.
What is Claude Code Skills?
Let's look at the mechanism of Claude Code Skills and why it is useful for design creation.
Basic Mechanism of Skills
Claude Code Skills is a mechanism for teaching specialized knowledge to AI.
To use an analogy, it's like a recipe book for cooking; you can teach the AI a "recipe" for "How to create an Apple-style design."
Also, within a skill, you can split documents into multiple parts or automatically execute Python scripts.
In scenarios other than development, it can be used for various tasks like creating slides, writing emails, or proofreading text.
The basic concepts of Skills are explained in detail in another article.
What are Claude Code Skills? Explaining the mechanism for giving knowledge to AI
Why Skills are Useful
The biggest advantage of Skills is that they are loaded only when needed. For example, when writing tests or implementing backend features, design knowledge is not invoked. In other words, knowledge about design is loaded only when necessary without bloating your usual context (tokens).
Simply put, it's like an organized toolbox in a drawer; you take out "design tools" only during design work, and "test tools" when writing tests.
Previously, the knowledge you wanted to teach the AI was written in CLAUDE.md or documents like @./docs/xxxx.
However, this always loaded that knowledge, leading to unnecessary knowledge being read, bloating the context, and increasing token consumption.
On the other hand, using Skills allows you to load knowledge only when needed, enabling you to load necessary information without bloating the context.
How to choose between the six Claude Code extensions (CLAUDE.md, Skills, Sub-agents, MCP, etc.) is explained in detail in another article.
Claude Code's 6 extensions: How should you choose between them?
How to Create Skills
There is an Anthropic official skill-creator skill to make these skills.
However, the setup for the marketplace and plugin installation is a bit complex.
So this time, let's prepare my original skill, "claude-skill-creator," which I actually use. Even if you haven't used Claude Code Skills yet, don't worry—we'll create it together.
Tips for beginners on using Claude Code, such as custom commands and context management, are explained in detail in another article.
【For Beginners】Tips for Utilizing Claude Code - Fully Understand Efficient Usage
Preparing the claude-skill-creator Skill
Before creating the apple-design skill, let's prepare "claude-skill-creator," which makes it easy to create skills. This skill itself can be reused in other projects once created, so let's set it up first.
Creating Folders and Files
First, create the .claude/skills folder within your project.
mkdir -p .claude/skills
If you intend to use it across various projects, create the .claude/skills folder in your home directory.
# If you want to create Claude skills for various projects
mkdir -p ~/.claude/skills
Inside that, create a folder named claude-skill-creator.
mkdir -p .claude/skills/claude-skill-creator
# If you want to create Claude skills for various projects
mkdir -p ~/.claude/skills/claude-skill-creator
Inside that folder, create the SKILL.md file.
touch .claude/skills/claude-skill-creator/SKILL.md
# If you want to create Claude skills for various projects
touch ~/.claude/skills/claude-skill-creator/SKILL.md
Pasting the Content of SKILL.md
Let's paste the following content. This summarizes the knowledge for creating Claude Code Skills.
The key point is to describe the skill's name and description in YAML format. In particular, the description should include what the skill does and when to use it; Claude Code always refers only to this section to invoke the skill.
I've packed all the knowledge necessary for skill creation into this without splitting it up, so it's quite long—sorry about that. (You don't need to read it in detail.)
---
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. Context Window is a Shared Resource
Skills consume context tokens when activated. Write efficiently:
**✅ DO**:
- Assume Claude's base knowledge (don't explain programming basics)
- Include only task-specific context
- Keep SKILL.md under 500 lines
- Use reference files for extensive documentation
**❌ DON'T**:
- Explain concepts Claude already knows
- Include unnecessary background information
- Create monolithic skill files
### 7. Test Across Different Models
Skills that work well with Claude Opus may need more detail for Haiku:
- **Opus**: Can handle more implicit instructions
- **Sonnet**: Good balance of capability and speed
- **Haiku**: Needs more explicit, step-by-step guidance
Test your skill with all models you plan to support.
### 8. Use Progressive Disclosure for Large Skills
For complex skills with extensive documentation:
**Structure**:
```
my-skill-name/
├── SKILL.md # Core instructions (< 500 lines)
├── reference.md # Detailed reference (loaded on-demand)
├── examples.md # Extended examples (loaded on-demand)
└── templates/ # Reusable templates
```
**In SKILL.md, reference other files**:
```markdown
For detailed API reference, see [reference.md](reference.md).
More examples available in [examples.md](examples.md).
```
Claude will only load these files when needed, saving context tokens.
### 9. Provide Utility Scripts for Complex Tasks
**Checklisted Workflows**: Include ordered steps Claude can track progress through
**Pre-written Scripts**: For deterministic operations, provide ready-to-use scripts rather than having Claude generate them
- More reliable
- Saves tokens
- Faster execution
**Choose the Right Language**:
Use **Shell Scripts (.sh)** for:
- Simple, single-purpose operations
- File handling and command chaining
- Logging, notifications, quick validation
- Operations with minimal logic (5 lines or less)
Use **Python Scripts (.py)** for:
- Complex logic and conditional operations
- Data processing and transformation
- Cross-platform compatibility (especially if Windows users exist)
- Reusable modules and libraries
**Cross-Platform Considerations**:
- Shell scripts require WSL/Git Bash on Windows
- Python offers better cross-platform support for team-shared skills
- Use POSIX-compliant commands if you choose shell scripts
**Example**:
```bash
scripts/
├── setup.sh # Shell: Simple environment setup
├── validate.py # Python: Complex validation logic
├── format.py # Python: Data transformation
└── notify.sh # Shell: Simple notifications
```
Reference from SKILL.md:
```markdown
Run validation: `python scripts/validate.py`
Run setup: `bash scripts/setup.sh`
```
## 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]
```
---
## Additional 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. **Document Assumptions**: Clarify prerequisites, dependencies, or required knowledge
5. **Iterate Based on Feedback**: Skills improve with real-world usage—update accordingly
6. **Consider Performance**: Every token in your skill uses context window space
7. **Write for Autonomous Use**: Claude should be able to use the skill without asking clarifying questions
Verifying if the Skill is Recognized
Now, let's start Claude Code and check if the skill is recognized.
claude
If you're not used to it, I recommend first asking Claude Code which skills it recognizes. For those who feel unsure, try passing a prompt like the following:
> Please tell me which Claude Skills you recognize.
If recognized correctly, you should receive a response like the one below. You can see that the claude-skill-creator skill we just made is being recognized.
⏺ Here are the Claude Skills I currently recognize:
Available Skills
1. claude-skill-creator
- Guide for creating Claude Code skills
- Explanation of proper YAML frontmatter, directory structure, and best practices
- Used when creating new skills or updating existing ones
These skills can be invoked using the Skill tool. Choose and use the appropriate skill depending on the specific task.
Is there anything specific you would like to know about these skills?
Trying to Create the apple-design Skill
Now that we're ready, let's actually create a skill for Apple-style design. Let's see if it really becomes usable with just this.
Requesting Skill Creation from Claude Code
Now, let's use the claude-skill-creator skill to create a new Claude Skill called "apple-design" for creating stylish Apple-style designs.
One of the benefits of Claude Skills is that Claude automatically decides which usable skill to invoke.
However, when you definitely want a specific skill to be used, it's recommended to explicitly include the name of that skill in your prompt.
This way, you can invoke it almost certainly, and you can even have it work with multiple skills combined.
In this instance, we will create a skill for generating stylish Apple-like designs while referring to the Human Interface Guidelines, Apple's design system.
Of course, you can customize this as you like, such as creating skills for other design systems like Google Material Design or Atlassian Design System.
Try passing the following prompt.
> Use the claude-skill-creator skill to create a new Claude Skill called "apple-design" in the project for creating stylish Apple-style designs.
Since we've explicitly mentioned the claude-skill-creator skill in the prompt, the skill we just created should definitely be recognized first.
With just this prompt, the Claude Skill for creating stylish Apple-style designs will be generated within your project.
During the process, if you're asked for permission to use the skill as shown below, you can confirm that the Skill is being properly utilized.
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/tomada/Desktop/test/apple-design-skills
3. No, and tell Claude what to do differently (esc)
Select "Yes" here.
Choosing the second option is also fine; if you select it, you won't be asked for permission again when using the claude-skill-creator skill within this project.
Now, all that's left is to wait.
Verifying the Generated Skill
As instructed, the apple-design skill should now be created within your project.
It should have been created with the following directory structure:
.claude
└── skills
└── apple-design
└── SKILL.md
I'll omit the details here, but the SKILL.md contains specifics regarding the Apple Design System. Since this document (skill) is loaded only when necessary, it won't be called upon when you're writing tests or implementing backend features, for example. This means that design-related knowledge is loaded only when needed, suppressing token consumption without bloating your usual context.
By the way, please note that it won't be recognized unless it's named exactly SKILL.md.
If you're using my claude-skill-creator skill, it should be created with the name SKILL.md correctly.
The way to write SKILL.md and how to utilize the references folder are explained in detail in another article.
How to Create Claude Code Skills! From writing SKILL.md to utilizing the references folder
Organizing Detailed Rules with the references Folder
Now that the basic skill is ready, you can enhance it further. If you want to set more detailed design rules, make use of the references folder.
Towards a More Comprehensive Design System
In Claude Skills, you can place reference documents inside the references folder. To use an analogy, it's like "supplementary materials" for a cookbook. While keeping the main recipe (SKILL.md) simple, detailed instructions can be referred to as separate volumes.
Since these are also referenced only when necessary, it's possible to keep SKILL.md itself small and load information only when needed. Therefore, you can customize more flexibly and use the skill's features efficiently.
The differences between Skills and Sub-agents are explained in detail in another article.
Let's provide a prompt to customize it that way.
> Use claude-skill-creator to customize apple-design Skills. Enhance it as a design system while utilizing the references folder.
Generated Detailed Structure
When I gave the above prompt, it customized it as follows.
.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
Overall, it has been divided into more detailed documents while increasing customizability.
Specifically, you can describe rules in detail for each component, such as in buttons.md. For example, looking at buttons.md, the following content is written (excerpt from the beginning only).
# Apple Style Button
Apple button design patterns and component implementation.
## Primary Button
### Basic Style
```css
.apple-button-primary {
/* Background and text */
background: var(--accent-blue);
color: white;
/* Size and spacing */
padding: 12px 24px;
font-size: 17px;
font-weight: 500;
line-height: 1.24;
...
Actually Creating Designs and Comparing Them
Let's check how much the apple-design skill we've created so far actually improves the design. Does it really make a difference?
Let's try the same prompt with and without the skill and compare the differences.
Design Created Without the Skill
Now, let's actually use it.
First, we'll try creating a design normally without using the skill. Let's start Claude Code in a different directory where the Skills haven't been created yet.
claude
I'll try passing a prompt like the following. This prompt asks to create a design that looks like a collection of common website components.
Create a one-page settings screen for a fictional smart home management app. Please include the following elements:
• Page title and description
• Navigation menu (3-5 items)
• Settings item cards (3 or more)
• Toggle switches or buttons
• Primary and secondary buttons
• Icons (those expressible with CSS/HTML)
Implement using only HTML and CSS, fitting it onto a single screen without requiring scrolling.
Here is the design that was created.
While it's a decent-looking design, doesn't it end up looking like a typical AI-generated UI—with an overall purple theme and an unusual amount of gradients—as mentioned in another article?
Design Created with apple-design Skill
Next, let's start Claude Code in the directory (within the project) where you created the apple-design skill.
claude
Try passing the following prompt.
While the key point is that Claude Skills are invoked automatically, we'll include the name apple-design in the prompt to ensure it's used.
Create a one-page settings screen for a fictional smart home management app. Please include the following elements:
・Page title and description
・Navigation menu (3-5 items)
・Settings item cards (3 or more)
・Toggle switches or buttons
・Primary and secondary buttons
・Icons (those expressible with CSS/HTML)
Implement using only HTML and CSS, fitting it onto a single screen without requiring scrolling.
Please use the apple-design skill.
The phrase "Please use the apple-design skill" at the end means to use the apple-design skill we just created.
When you actually run it, you can confirm on the Claude Code console that the skill is being used, as shown below:
> The "apple-design" skill is running
And here is the design that was created.
Overall, there is a sense of unity, and the spacing is appropriately provided for each element.
Furthermore, the design of the headings and cards is well-organized, and it is clearly a design that follows the rules.
Looking at the Design Differences in Detail
It's hard to pinpoint exactly what makes it "Apple-esque," but I think the toggle buttons, in particular, are designed close to the settings screen in iOS.
In the actual Apple design guidelines, the current toggle buttons look like this:
The button size is now a bit more elongated, but it was created quite close to this design (though the toggle buttons in my memory might have been a bit older).
Other than that, it might be difficult to accurately judge whether it's Apple-style overall.
However, wouldn't many people at least prefer this design?
This time, I had it create a single page all at once, but following these design rules becomes even more important when you're adding multiple pages incrementally.
If you keep adding elements without design rules, you'll end up with an inconsistent design.
Summary
In this article, I introduced how to automatically generate Apple-style designs using Claude Code Skills.
While many people may feel hesitant about Claude Skills, you'll find it's surprisingly easy once you actually try creating one.
After creating the apple-design skill using the claude-skill-creator skill and actually comparing the designs, I was able to confirm that it makes a clear difference.
By using Claude Code Skills, even those who aren't confident in their design sense can automatically generate high-quality designs by teaching specialized knowledge to the AI. Please give it a try in your projects!
How to Catch Up on the Latest AI-Driven Development Info?
I also release practical videos on AI-driven development on YouTube!
If you'd like, please subscribe to the channel to help you stay updated on practical AI-driven development information.
Also, for those who want to dive deeper into the topics covered in this article:
I have released a Udemy course that systematically explains the six extensions: CLAUDE.md, rules, custom commands, sub-agents, Skills, and Hooks. You can learn how to maximize development efficiency while saving context through a hands-on format.
You can enroll with a special 1,500 yen coupon from the link above.
Additionally, there is a free Discord community where peers learning AI-driven development gather, so please feel free to join.
Discussion