Help us improve
Share bugs, ideas, or general feedback.
From swift-design-system
Swift Design Systemを使用したiOS UI実装スキル。デザイントークン、UIコンポーネント(Button、Card、Chip、FAB、Snackbar、Picker等15種)、レイアウトパターンのベストプラクティスを提供。「デザイン」「UI」「テーマ」「カラー」「タイポグラフィ」「スペーシング」「ボタン」「カード」「FAB」「Snackbar」「Picker」「SwiftUI」「DesignSystem」などで自動適用。
npx claudepluginhub no-problem-dev/claude-code-plugins --plugin swift-design-systemHow this skill is triggered — by the user, by Claude, or both
Slash command
/swift-design-system:design-system-workflowThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
no problem製iOSアプリのUI実装に必須のデザインシステム。一貫性のあるUIを効率的に構築するためのトークン・コンポーネント・パターンを提供。
references/AESTHETIC.mdreferences/CLAUDE_MD_TEMPLATE.mdreferences/DESIGN_SYSTEM_CONTEXT.mdreferences/PREVIEW_PATTERNS.mdreferences/TOKENS.mdreferences/VIEW_VERIFICATION_TESTS.mdreferences/VISUAL_LOOP.mdreferences/components/BUTTON.mdreferences/components/CARD.mdreferences/components/CHIP.mdreferences/components/COLOR_PICKER.mdreferences/components/EMOJI_PICKER.mdreferences/components/FAB.mdreferences/components/ICON_BADGE.mdreferences/components/ICON_BUTTON.mdreferences/components/ICON_PICKER.mdreferences/components/IMAGE_PICKER.mdreferences/components/PROGRESS_BAR.mdreferences/components/SNACKBAR.mdreferences/components/STAT_DISPLAY.mdGuides iOS app design and SwiftUI implementation following Human Interface Guidelines, with layouts, navigation patterns, accessibility, and adaptive UI for iPhone/iPad.
Generates production-grade SwiftUI code for Apple Design Award-quality iOS interfaces—screens, components, redesigns—with bold aesthetics and screenshot-driven iteration.
Guides iOS UI implementation with UIKit, SnapKit, SwiftUI covering navigation, layouts, touch targets, safe areas, accessibility, Dark Mode, Dynamic Type, and Apple HIG.
Share bugs, ideas, or general feedback.
no problem製iOSアプリのUI実装に必須のデザインシステム。一貫性のあるUIを効率的に構築するためのトークン・コンポーネント・パターンを提供。
// Package.swift
dependencies: [
.package(url: "https://github.com/no-problem-dev/swift-design-system.git", from: "X.X.X")
]
// ターゲット
.target(
name: "YourApp",
dependencies: [
.product(name: "DesignSystem", package: "swift-design-system")
]
)
Note:
X.X.Xには最新バージョンを指定してください。 最新バージョンは GitHub Releases で確認できます。
Primitive Tokens (基本値) - 直接使用禁止
↓ 参照
Semantic Tokens (意味的トークン) - 推奨
↓ 参照
Component Tokens (コンポーネント固有) - 自動適用
重要: Primitiveトークンは直接使用せず、必ずSemantic/Componentトークンを使用すること。
@Environment(\.colorPalette) var colors
@Environment(\.spacingScale) var spacing
@Environment(\.radiusScale) var radius
@Environment(\.motion) var motion
プロトコルベースの設計により、カスタムテーマ・トークンの拡張が可能。
アプリ起動時に必ずThemeProviderを設定:
import DesignSystem
@main
struct MyApp: App {
@State private var themeProvider = ThemeProvider()
var body: some Scene {
WindowGroup {
ContentView()
.theme(themeProvider) // 必須
}
}
}
詳細は → references/patterns/THEME.md
// ✅ Good: セマンティックカラーを使用
Text("エラー").foregroundColor(colors.error)
// ❌ Bad: ハードコードされた色
Text("エラー").foregroundColor(.red)
// ✅ Good: typographyモディファイアを使用
Text("見出し").typography(.headlineLarge)
// ❌ Bad: 直接フォント指定
Text("見出し").font(.system(size: 32, weight: .semibold))
// ✅ Good: スペーシングトークンを使用
VStack(spacing: spacing.lg) { ... }
// ❌ Bad: マジックナンバー
VStack(spacing: 16) { ... }
// ✅ Good: デザインシステムのコンポーネントを使用
Card(elevation: .level2) { content }
// ❌ Bad: 独自実装
RoundedRectangle(cornerRadius: 8)
.fill(Color.white)
.shadow(radius: 4)
デザイン実装時は、該当するリファレンスを参照してください。
すべてのUI実装で必須の知識
→ references/TOKENS.md
| コンポーネント | 用途 | リファレンス |
|---|---|---|
| Button | アクションボタン | → references/components/BUTTON.md |
| Card | コンテンツコンテナ | → references/components/CARD.md |
| Chip | タグ、フィルター | → references/components/CHIP.md |
| FAB | 浮遊アクションボタン | → references/components/FAB.md |
| Snackbar | 一時的通知 | → references/components/SNACKBAR.md |
| IconPicker | SF Symbols選択 | → references/components/ICON_PICKER.md |
| EmojiPicker | 絵文字選択 | → references/components/EMOJI_PICKER.md |
| ColorPicker | カラー選択 | → references/components/COLOR_PICKER.md |
| ImagePicker | 画像選択 | → references/components/IMAGE_PICKER.md |
| IconButton | アイコンボタン | → references/components/ICON_BUTTON.md |
| TextField | テキスト入力 | → references/components/TEXT_FIELD.md |
| ProgressBar | プログレスバー | → references/components/PROGRESS_BAR.md |
| StatDisplay | 数値表示 | → references/components/STAT_DISPLAY.md |
| IconBadge | アイコンバッジ | → references/components/ICON_BADGE.md |
| VideoPlayer | 動画再生 | → references/components/VIDEO_PLAYER.md |
| パターン | 用途 | リファレンス |
|---|---|---|
| Theme | テーマ設定・切り替え | → references/patterns/THEME.md |
| AspectGrid | アスペクト比統一グリッド | → references/patterns/ASPECT_GRID.md |
| SectionCard | タイトル付きカードセクション | → references/patterns/SECTION_CARD.md |
UIの視覚的検証には Swift Snapshot Testing を使用する。
xcodebuild test)詳細は → references/VISUAL_LOOP.md
| ドキュメント | 内容 |
|---|---|
| references/AESTHETIC.md | 美的方向性ガイド(AIスロップ回避、Apple HIG) |
| references/PREVIEW_PATTERNS.md | SwiftUI Preview ベストプラクティス |
| references/VISUAL_LOOP.md | Visual Feedback Loop 実践ガイド |
| references/DESIGN_SYSTEM_CONTEXT.md | デザインシステム全体リファレンス |
| references/CLAUDE_MD_TEMPLATE.md | CLAUDE.md デザインセクションテンプレート |
| references/VIEW_VERIFICATION_TESTS.md | スナップショットテスト テンプレート |