「デザイン」の検索結果

5つの異なるUIデザインバリエーションを並列エージェントチームで生成し、Pencil(.pen)で比較するスキル。 各バリエーションに デザイナー + レビュアー + コピーライター の3人チーム（計15エージェント）。 デザイナーが直接 Pencil に構築するため、5画面が同時並行で出来上がる。 固定プリセットは使わず、現在のアプリのコードベース・ドメイン・ペルソナ・トンマナ・競合を分析し、 そのアプリに最適な5つのスタイル方向を毎回ゼロから生成する。 Use when: UIのバリエーションを比較したい、複数のデザイン案を出したい、 デザインの方向性を探りたい、A/Bテスト用のデザインが欲しい。 Triggers: "UIバリエーション", "デザイン比較", "デザイン案", "5案出して", "バリエーション", "デザインパターン", "UI variations", "design alternatives", "複数案", "A/Bテスト", "デザイン探索", "スタイル比較"

5つの専門エージェント（UXデザイナー・ビジュアルデザイナー・アクセシビリティ専門家・ モバイルUI専門家・コピーデザイナー）がチームでUIを添削・改善するスキル。 Pencil(.pen)で画面デザインを作成・修正しながら、リアルタイムで議論する。 新規画面デザインの作成と既存UIのレビュー・改善の両方に対応。 iOS / Web / 汎用プラットフォームに対応。 Use when: UIを添削したい、画面デザインをレビューしたい、UIを改善したい、 デザインの品質を上げたい、UIのフィードバックがほしい、画面を作りたい。 Triggers: "UIレビュー", "UI添削", "デザインレビュー", "画面レビュー", "UIを見て", "デザインチェック", "UI改善", "画面デザイン", "ui review", "design review", "UI作成", "画面作成", "UIフィードバック"

ClaudeDesign（claude.ai/design）とClaude Codeの連携。DesignSyncツールで デザインプロジェクトからプロトタイプHTML等を取得（インポート）、または ローカルのコンポーネントをデザインシステムプロジェクトへ同期（プッシュ）する。 「ClaudeDesignからデザインを取得して」「claude.ai/design のURLを取り込んで」 「デザインプロジェクトに同期して」「デザインシステムをプッシュして」 などのリクエスト、または claude.ai/design のURLが渡されたときに使用する。 取得したデザインのコード実装への適用は apply-design を使う。

実装済みサイトのデザイン品質を体系的にチェックする。配置・余白・比率・レスポンシブなどデザイン的な問題を検出し、修正は行わず問題のリストアップに集中する。 Trigger: デザインQA, デザインチェック, レイアウト確認, デザイン検証, 表示崩れ確認, /design-e2e-qa

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", "ネイティブアプリ風", "アプリのデザイン"

Figmaデザインをノード情報を活用してレビューし、該当箇所に個別コメントを投稿する。Use when (1) ユーザーがFigmaデザインのレビューを依頼した時 (2) 実装者目線、エンジニア視点でのフィードバックが必要な時 (3) デザインに対してFigma上にコメントを残したい時。padding/margin、色のコントラスト、グリッド整合性などベーシックなデザインチェックも実施。Requires Figma MCP connection and FIGMA_TOKEN environment variable.

Figmaの個別デザインを、既存design repoにあるデザインシステムの正本・仕様・実データの基準に従ってレビューする。明示トリガーは「デザインについてレビューして」「このデザインレビューして」「/design-review URL」。

プロジェクトのデザインシステムを SSOT として作成・監査・更新する。トークン、デザインシステムに関わるアクセシビリティ、Typography、Motion、aesthetic direction の作業に使う。デザインシステムに紐づかない単発UI実装や個別デザインレビューには使わない。ユーザーが /ai-design-system と入力したら使う。

pen.dev CLI（`pencil` / `pen`コマンド）だけを使って.penファイル（pen.devで作成されたデザインファイル）をAIプロンプトまたは決定論的な編集操作で修正・更新・新規作成するスキル。.penファイルの編集、ボタン追加、レイアウト変更、UIデザインの調整、pen.devデザインの更新、新しい.penデザインの作成などの依頼で必ず使用する。AI任せの編集・新規作成はエージェントモード（`pencil --in --out --prompt`）で行い、既存ファイルは同一パスを指定して上書き、新規作成は`--in`を省略して`--out`に新しいパスを指定する。決定論的な編集はインタラクティブモード（`pencil interactive`）の`execute`（`Insert` / `Update` / `Delete` など）で行い、最後に`save()`する。編集・作成後は「**編集・作成したコンポーネントのNodeだけ**」を`execute`の`Export` / `TakeScreenshot`でPNG出力し、`.pen`と同階層の`snapshots/`ディレクトリに保存する。pen.dev MCPには依存せず`pencil`コマンドのみで完結する。.penファイルのgitコンフリクト解消・破損復旧は本スキルではなく`resolve-pencil-conflict`スキルの担当。

SwiftUI ViewのDesign System準拠性を監査する。既存UIのレビュー、デザインチェック時に使用。「デザインレビュー」「UIチェック」「design audit」「デザイン監査」「UI監査」「デザインチェック」「トークン確認」などのキーワードで自動適用。

penpotを含む場合は必ず読み込む。セルフホスト環境管理、MCP経由デザインシステム構築・ UI/UXデザイン作成・プロトタイプ参照、デザインからのアプリケーション生成、 外部パイプライン（トークン同期・Style Dictionary・Storybook）、デザインレビュー・コメント操作。

[omh] Entire product design problem to delegate: prepare a bounded design direction, existing-lane composition, and executor-neutral handoff. Use when the user says: design-orchestration, design orchestration, design ownership, handle this product design, take on the design, デザインを任せる, デザイン全体を任せ, プロダクトデザインを任せ.

デザインデータ（Figma などのデザインカンプ）を参照してコーディングするときの解釈原則とアセットの扱い。Figma の URL・MCP・デザイン画像・カンプをもとに実装や修正をするときに必ず使う。

Pencil CLI（`pencil`コマンド）だけを使って、.penファイル（Pencilで作成されたデザインファイル）の中のNodeのデザインデータ（属性・構造）とスクリーンショット画像を読み取り専用で取得するスキル。Node IDが分かっているケースだけでなく、名前の正規表現（例: 「ヘッダー」「.*Button」）、Nodeタイプ（frame / text / image など）、再利用可能コンポーネント、特定フレーム配下、ドキュメント全体のトップレベルなど、**ID以外の指定方法**にも対応する。ユーザーが「.penのこのNodeの中身を見せて」「特定コンポーネントのデザインデータを取り出して」「Nodeのスクリーンショットだけ欲しい」「ヘッダーの構造を確認したい」「ボタンのスタイルをコピーしたい」「再利用可能コンポーネント一覧を見せて」「ドキュメント全体の構造を覗きたい」「全てのテキストNodeを取得して」のように.pen内の要素の調査・参照・確認・抜き出しを依頼した場合に必ずこのスキルを使う。インタラクティブモード（`pencil interactive`）で `batch_get` の `nodeIds` / `patterns` / `parentId` を使い分けてNode属性をJSONで取得し、`get_screenshot` / `export_nodes` で画像を`.pen`と同階層の`snapshots/`にPNG出力する。編集はしない（`save()`を呼ばない）ため、対象ファイルは絶対に書き換わらない。Pencil MCPには依存せず`pencil`コマンドのみで完結。

Pencil CLI（`pencil`コマンド）だけを使って既存の.penファイル（Pencilで作成されたデザインファイル）をAIプロンプトで修正・更新するスキル。ユーザーが.penファイルの編集、ボタン追加、レイアウト変更、UIデザインの調整、Pencilデザインの更新などを依頼した場合に必ずこのスキルを使用する。エージェントモード（`pencil --in --out --prompt`）で同一パスを指定して既存ファイルを上書き編集し、編集後はインタラクティブモード（`pencil interactive`）でNodeツリーから「**編集したコンポーネントのNodeだけ**」を特定して`get_screenshot` / `export_nodes` でPNG出力し、`.pen`と同階層の`snapshots/`ディレクトリに保存する。Pencil MCPには依存せず、`pencil` コマンドのみで完結する。

任意のURLから動的レンダリング済みのHTML/CSS/JSを取得し、 アニメーション情報を含むデザイン仕様（VANILLA.md と INTERPRETED.md の 2 段階）を自動生成するスキル。 VANILLA.md は推測なしの生抽出、INTERPRETED.md は VANILLA を唯一の入力とした意味付け解釈。 以下の状況で使用: - 「このURL抽出して」「このサイトの仕様取ってきて」 - 「このサイトのデザイン情報取ってきて」 - 「このURLからアニメーション情報抜き出して」 - 「design-extractorで解析して」 - URLと「抽出」「解析」「VANILLA」「INTERPRETED」等のキーワードが同時に来たとき 以下には使用しない: - 「既存ファイルを編集したい」 - 「このデザインを実装して」（実装タスク） - 「アニメーションを作って」（生成タスク）

TEKION Slide Generator v4 のブランドデザインを対話形式でカスタマイズするセットアップスキル。branding.md の Asset 層・Guideline 層（ロゴ／配色／フォント／トーン／ブランドムード／参考デザイン／禁止事項）を 1 問ずつ対話で設定し、次回のスライド生成に自動適用されるプリセットを生成する。「デザインを設定したい」「ブランドをカスタマイズしたい」「テーマを変えたい」「自社カラーに設定して」「ロゴを設定して」で発動。

AI生成UIの没個性的パターン（AIスロップ美学）を検出・回避し、文脈に根ざした意図あるデザインを生成するためのガード。フロントエンドのUI実装、デザイン生成、コンポーネント設計、CSSスタイリング、カラーパレット選定、フォント選択、レイアウト構築を行う際に自動的に適用する。「UIを作って」「画面を実装して」「デザインして」「スタイルを当てて」「ランディングページを作って」「Webサイトを作成して」「ダッシュボードを構築して」「コンポーネントを実装して」等のUI生成タスク全般で使用する。Claude Code、Codex、GitHub Copilot、Cursor、その他AIエージェント共通で適用可能。

デザインの差し替え。ロジックは一切触らず見た目（HTML/CSS/テンプレート）だけを更新する。 「このデザインに差し替えて」「UIをFigmaの通りに変えて」「見た目だけ変えて」 「デザインを更新して」「CSSだけ直して」などのリクエストで使用する。 ロジック変更を伴う場合はrevise-specを使う。

Japanese brand design guidelines with traditional color palettes (伝統色), typography (ゴシック体/明朝体), ma (間) spacing, wabi-sabi (侘寂) aesthetics, and logo design for Japanese characters. Triggers on requests for 和風デザイン, ブランドデザイン, 伝統色, 日本語タイポグラフィ, ロゴデザイン, 配色ガイド.

pen.dev CLI（`pencil` / `pen`コマンド）だけを使って、.penファイル（pen.devで作成されたデザインファイル）の中のNodeのデザインデータ（属性・構造）とスクリーンショット画像を読み取り専用で取得するスキル。Node ID指定に加え、名前の正規表現（例: 「ヘッダー」「.*Button」）、Nodeタイプ（frame / text / image など）、再利用可能コンポーネント、特定Node配下、ドキュメント全体のトップレベルなど、**ID以外の指定方法**にも対応する。ユーザーが「.penのこのNodeの中身を見せて」「特定コンポーネントのデザインデータを取り出して」「Nodeのスクリーンショットだけ欲しい」「ヘッダーの構造を確認したい」「ボタンのスタイルをコピーしたい」「再利用可能コンポーネント一覧を見せて」「ドキュメント全体の構造を覗きたい」「全てのテキストNodeを取得して」のように.pen内の要素の調査・参照・確認・抜き出しを依頼した場合に必ずこのスキルを使う。インタラクティブモード（`pencil interactive`）で `execute` の `Get` / `Print`（読み取り専用関数のみ）を使ってNode属性を取得し、同じ `execute` の `Export` / `TakeScreenshot` で画像を`.pen`と同階層の`snapshots/`にPNG出力する。編集はしない（`save()` も変更系関数も呼ばない）ため、対象ファイルは絶対に書き換わらない。pen.dev MCPには依存せず`pencil`コマンドのみで完結。

既存のスライド・画像・WebサイトからデザインシステムSLIDE.mdと6ページのHTMLサンプルスライドを生成する。「このスライドのデザインシステムを作って」「SLIDE.mdを生成して」「SLIDE.mdを作りたい」「このサイトのデザインでSLIDE.mdを生成して」「slide-md-creator」と言われたときに使用する。

黒地のMarpテーマ（minorun-dark）でスライドを組むときのデザインバランスと検査。余白の測り方、縦のバランス、配色の決め方、表・コード・補足ボックスの確定デザイン、Marp固有の罠、書き出し後の検査手順。「スライドのバランスを整えて」「色を変えて」「余白が変」「黒地のテーマで作って」と言われたら読む。

UI/UX デザインガイド。50スタイル・97パレット・57フォント組み合わせ・9スタック対応。 「UI設計して」「デザインシステムを作って」「画面レビュー」等のリクエストで発動。