apple-design
Apple風のモダンUIデザイン。モノトーンダークモード基調、青系アクセントカラー、ミニマルで洗練されたインターフェース。UIコンポーネント作成時に使用。Use when "dark mode", "minimal UI", "Apple style", "ダークモード", "ミニマルデザイン" と言われた時。
When & Why to Use This Skill
This Claude skill automates the creation of modern, Apple-inspired user interfaces with a focus on minimalist aesthetics and high-end dark mode design. It provides a comprehensive design system including a specific color palette, spacing rules, and animation guidelines to ensure a consistent, sophisticated, and professional look across all UI components.
Use Cases
- Case 1: Generating new UI components (buttons, cards, inputs) that adhere to a sleek, monochrome dark mode aesthetic with blue accents.
- Case 2: Implementing a consistent design language across a web application to achieve a premium 'Apple-style' user experience.
- Case 3: Standardizing interface elements with specific accessibility and usability standards, such as 44x44px touch targets and 200-300ms fluid animations.
- Case 4: Refactoring existing UI code to align with minimalist design principles and clear visual hierarchies.
| name | apple-design |
|---|---|
| description | Apple風のモダンUIデザイン。モノトーンダークモード基調、青系アクセントカラー、ミニマルで洗練されたインターフェース。UIコンポーネント作成時に使用。Use when "dark mode", "minimal UI", "Apple style", "ダークモード", "ミニマルデザイン" と言われた時。 |
| allowed-tools | Read, Grep, Glob, Edit, Write |
| user-invocable | true |
Apple Design System
このプロジェクトのデフォルトUIスタイル。
When to Use This Skill
- 新規UIコンポーネントを作成する時（デフォルト）
- ダークモードのデザインを実装する時
- ミニマルで洗練されたインターフェースを作成する時
- アニメーションやトランジションを実装する時
- 既存コンポーネントのスタイルを統一する時
詳細なガイドライン
UIコンポーネント編集時は .claude/rules/ui-design.md が自動適用されます。
デザイン哲学
- ミニマリズム: 必要最小限の要素で最大の効果
- 明確な階層: 視覚的な優先順位が一目で分かる
- 流動性: スムーズなアニメーションと自然な動き
- 余白の美学: 適切なスペーシングで呼吸する空間
カラーパレット（簡略）
const colors = {
background: '#000000',
card: '#1C1C1E',
accent: '#0A84FF',
text: '#FFFFFF',
textSecondary: '#EBEBF5',
};
主要原則
- モノトーン（黒・グレー・白）を基調
- アクセントカラーは青系（#0A84FF）のみ
- ミニマルでクリーンなデザイン
- アニメーション: 200-300ms
- タッチターゲット: 最小44x44px
AI Assistant Instructions
このスキルが有効化された時:
- デフォルト適用: このプロジェクトの標準スタイル
- カラーパレット確認: モノトーン基調、青系アクセントのみ
- 余白の確認: 適切なスペーシングで「呼吸する空間」を確保
Always:
- ダークモード（背景#000000）を基本にする
- アクセントカラーは青系（#0A84FF）のみ使用する
- アニメーションは200-300msで自然な動きにする
- タッチターゲットは最小44x44pxを確保する
- 余白を十分に取り、視覚的な階層を明確にする
Never:
- 派手な色やグラデーションを使用しない
- 複数のアクセントカラーを混在させない
- アニメーションを過度に長くしない（300ms超）
- Material Designスタイルと混在させない