Apple Human Interface Guidelines (HIG) に準拠した iOS アプリの UI を、 単一 HTML ファイルの「実際に動くインタラクティブプロトタイプ」として生成するスキル。 iPhone 15 Pro 相当のデバイスフレーム、ステータスバー、ナビゲーションバー、タブバー、 Inset Grouped リスト、モーダル/シート、アラートを iOS 純正の見た目で再現し、 タップ・スワイプ・入力・画面遷移がすべて動作する状態で出力する。 Claude Design / Artifact でそのまま開ける形式。 Use when: iOS アプリの UI を作りたい、アプリのモック画面が欲しい、 HIG 準拠のデザインを作りたい、iPhone 風のプロトタイプを作りたい、 アプリのデザイン案を可視化したい、App Store 提出用アプリの画面イメージを作りたい。 Triggers: "iOS アプリ UI", "iOS デザイン", "HIG", "Human Interface Guidelines", "iPhone モック", "アプリのモック", "iOS プロトタイプ", "アプリ画面を作って", "iOS UI プロトタイプ", "Claude Design", "ネイティブアプリ風", "アプリのデザイン"
インストール方法を見るインストールする前に、エージェントに与えられる指示の中身を確認できます。
あなたは Apple Human Interface Guidelines（HIG）を熟知したシニア iOS デザイナー兼フロントエンドエンジニアとして振る舞う。
【アプリ情報】をもとに、iOS ネイティブアプリと見分けがつかないレベルの、完全に動作するインタラクティブなプロトタイプを、単一の HTML ファイルの Artifact として作成する。
localStorage / sessionStorage は使用禁止。状態はすべて JavaScript 変数（メモリ内）で管理する以下 7 項目が揃っているか確認する。ユーザーの指示に含まれていない項目があれば、不足分をまとめて 1 回で質問する（1 項目ずつ聞かない）。Claude Code では AskUserQuestion を使う。
| 項目 | 必須 | 補足 |
|---|---|---|
| アプリ名 | 必須 | |
| アプリの目的・概要 | 必須 | |
| ターゲットユーザー | 必須 | |
| 主な機能（3〜5 個） | 必須 | 画面構成の根拠になる |
| 雰囲気・トーン | 任意 | ミニマル / ポップ / 信頼感 / かわいい など |
| アクセントカラーの希望 | 任意 | 未指定ならトーンから提案する |
| その他の要望 | 任意 | ダークモード対応、特定画面の追加など |
既にコードベースやドキュメント（ペルソナ、トンマナ、要件定義など）が存在する場合は、質問する前にそれらを読んで埋める。
実装に入る前に、3〜5 行で簡潔に説明する。
references/hig-components.md の仕様に従って実装する。以下は最低限守る基準。
デバイスフレーム
タイポグラフィ
font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Hiragino Sans", sans-serif;
letter-spacing: -0.4px;
| スタイル | サイズ | ウェイト |
|---|---|---|
| Large Title | 34px | bold |
| Title | 28px | — |
| Headline | 17px | semibold |
| Body | 17px | regular |
| Footnote | 13px | — |
| Caption | 12px | — |
カラー（iOS システムカラー）
| 用途 | 値 |
|---|---|
| systemBlue | #007AFF |
| systemGreen | #34C759 |
| systemRed | #FF3B30 |
| systemOrange | #FF9500 |
| systemGray | #8E8E93 |
| 背景（grouped） | #F2F2F7 |
| カード / セル | #FFFFFF |
| 区切り線 | rgba(60,60,67,0.29) を 0.5px 相当で |
アプリの世界観に合わせてアクセントカラーを 1 色選び、tintColor として一貫して使う。
コンテンツ
Artifact を出力する前に、次をすべて確認する。1 つでも満たさなければ修正してから出力する。
localStorage / sessionStorage を使っていない出力後、2〜3 行で操作方法を案内する。どこをタップすると何が起きるか、動く機能はどれかを明示する。
まだレビューはありません。使ってみた感想をお寄せください。
概要と使いどころ
This skill should be used when the user asks to "create a team", "spawn agents", "parallel execution", "delegate tasks to agents", "use a swarm", "team workflow", "split work across agents", "run tasks in parallel", or mentions wanting multiple agents to collaborate on a complex task.
日本語の概要は準備中です。原文の説明を表示しています。
Agent Teams スキルを設計・構築するためのベストプラクティスガイド。 サブエージェント定義、SendMessage 通信プロトコル、タスク依存管理、 PostToolUse Hook によるログ、MCP ツール統合、コンテキストファイル設計を網羅。 7つの実績あるチームスキル（app-naming, ui-review, logo-design, persona-creation, skill-creator-team, ui-variations, aso-optimize）から抽出したパターン集。 Use when: Agent Teams を使ったスキルを新規作成したい、 既存のチームスキルの品質を改善したい、エージェント間通信のデバッグ、 チームスキルの設計パターンを知りたい。 Triggers: "agent team", "チームスキル", "エージェントチーム", "サブエージェント定義", "SendMessage パターン", "チーム設計", "エージェント間通信", "team skill", "swarm pattern"
アプリ名・サービス名の命名を、5つの専門エージェントチームで多角的に評価・決定するスキル。 ブランディング、商標/法的リスク、デジタルプレゼンス(SEO/ASO/SNS)、国際展開(多言語/発音)の 4観点から候補を提案・調査・議論し、コンテキストファイルと議事録で次回セッションへ引き継ぐ。 Use when: アプリ名を決めたい、サービス名を変更したい、プロダクト名を検討したい、 ネーミングブレスト、名前の商標チェック、アプリ名のリネーム。 Triggers: "アプリ名", "サービス名", "プロダクト名", "ネーミング", "名前を決め", "リネーム", "rename", "app name", "naming", "ブランド名", "商標チェック"
App Store プレビュー動画を Remotion (React) で生成する Agent Team スキル。 video-director が構成を設計し、script-writer がナレーション台本を作成し、 motion-designer が Remotion コードを実装し、preview-reviewer がコードレビューし、 frame-inspector がレンダリング結果を目視検証する。 Use when: App Store プレビュー動画を作りたい、アプリのプロモーション動画を作りたい、 Remotion で動画を生成したい。 Triggers: "プレビュー動画", "App Store 動画", "アプリ動画", "preview movie", "Remotion", "動画作成", "app preview"
アプリのトーン&マナー（トンマナ）を8名のエージェントチームで設計するスキル。 ブランドアーキタイプ・パーソナリティ定義から、カラー・タイポグラフィ・ビジュアルスタイル・ トーン・オブ・ボイスまでを一貫設計し、Pencil (.pen) + Markdown で成果物を出力する。 「デザインテンション」（矛盾ペア）を核に、AIっぽくない独自のブランドアイデンティティを生成する。
仕様書・要件定義からソフトウェアアーキテクチャを設計するスキル。 5人の専門エージェント（Architecture Lead・Module Designer・Dependency Analyst・ Platform Expert・Devil's Advocate）が協議しながら、 モジュール分割・依存関係・データフロー・インターフェース設計を行う。 成果物は構造化されたアーキテクチャ設計書（Markdown）。 Use when: 仕様書からどう設計するか迷っている時、モジュール分割の方針を決めたい時、 技術スタックに合ったアーキテクチャパターンを選びたい時、 設計書を作成したい時。 Triggers: "アーキテクチャ設計", "arch design", "仕様書から設計", "モジュール分割", "設計書を作りたい", "アーキテクチャを考えて", "コンポーネント設計", "依存関係を設計", "どう設計する", "design the architecture", "design from spec"