デザイン&モーション · daymade/claude-code-skills

design-style-picker

ユーザーが本当に求めているスタイルを選択できるよう、視覚デザインの方向性を一括生成して比較します。抽象的なビジュアルスタイルを言語化できないとユーザーが述べている場合、多数のスタイルオプションを求められた場合、生成されたUI/デザインシステムの画像から選びたい場合、出力が「カラフルすぎる/活気がない/ありきたりすぎる」と却下された場合、または既存の資産を破棄せずに既存のUI/デザインシステムを進化させる必要がある場合に使用します。

L3 ネットワーク · ドメインとキー範囲を宣言V1 コミット固定ネットワーク通信ファイル書き込みDual-pass Audit
Author daymadeGitHub daymade/claude-code-skills ↗Stars 1385License MIT(仓库根 LICENSE;GitHub API spdx MIT)Commit d5c4678cb5
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

純粋なプロンプトオーケストレーションスキル:スクリプト、ファイル、依存関係は一切不要。SKILL.md および references/selection-playbook.md に記述されたエージェント向けワークフローとプロンプトテンプレートのみで構成され、ホスト既存の画像生成およびファイル読み込み機能により実行されます。

daymade-codex/design-style-picker/SKILL.md
Use this skill to turn vague taste into concrete visual choices.
ディレクトリ構成は SKILL.md + agents/openai.yaml + references/selection-playbook.md のみです。「画像生成」はエージェントがホストの画像ツールを呼び出すことで完了し、SKILL はプロンプトパターンとプロセスの規律のみを規定します。

基本原則:ユーザーが抽象的なスタイルを明確に説明できない場合は追及をやめ、構造化された視覚的証拠(マトリクス)を生成して選択させる——「言語化可能な語彙」を「目に見える選択肢」に置き換えます。

daymade-codex/design-style-picker/SKILL.md
Do not ask the user to describe an abstract style if they already said they cannot. Generate comparable visual evidence, let them pick, then implement from the selected references.
「Generate A Matrix, Not Minor Variants(わずかなバリエーションではなく、マトリクスを生成せよ)」が方法論の根幹です(次項で詳述)。

マトリクス生成の2軸設計:垂直ラダー=単一ディメンションの大幅なステップ変化(例:彩度強度 20/35/50/65/80)、水平軸=異なる構造化戦略(data-driven color、brand spine、warm product imagery、scenario modules、governance-led layout)。2枚の画像が兄弟のように似通っている場合は、いずれかを再生成する必要があります。

daymade-codex/design-style-picker/SKILL.md
Vertical ladder: one dimension changes by large steps, such as color intensity 20/35/50/65/80.
selection-playbook.md に第1ラウンドの具体的な構成が示されています:垂直ラダー5枚 + 水平戦略5枚 + 境界サンプル1〜2枚(overload/underload)。

カラーをシステムとして扱う:「less colorful」は彩度の除去を意味するのではなく、均等な焦点の数を減らすことを意味します——カラーに明確な役割を与え(広い構造領域/データ可視化の意味論/シグナルの高いブランドアクセント/ニュートラルな標準コンポーネント)、「過剰」を可視化するための境界サンプルを作成します。

daymade-codex/design-style-picker/SKILL.md
"Less colorful" does not mean black-and-white. It usually means fewer competing focal points.
playbook は構造化ルールの例を示しています:「Data colors live in charts, legends...」、「Brand red lives in logo, active spine, must-block governance...」、および Bad organization のアンチパターン例(各タグ/行/アイコンごとに異なる飽和色を使うなど)。

選択画像から「ピクセルではなく原則」を抽出して実装:カラーの役割、レイアウト密度、焦点の階層、コンポーネントの扱い、画像の活用法、ガバナンス配置を明示的に分解し、ファイル命名に基づいて統合(「Use H02 for color placement and V04 for palette intensity」)することで、既存UIのスコープを維持します。

daymade-codex/design-style-picker/SKILL.md
Extract principles, not pixels: color roles, layout density, focal hierarchy, component treatment, image use, governance/data placement.
Playbook の Implementation Handoff では、作業前に統合宣言(「I will take <file A> for <specific attribute> and <file B> for ...」)の記述を義務付け、実装完了後にレンダリング後のビジュアルQAを実施します。

既存資産を再利用する「進化」の姿勢:現状をゼロから上書きする無関係な fresh 概念の生成を禁じ、まず既存のUI、スクリーンショット、トークン、CSS変数、コンポーネント名、ブランドの手がかりを収集して初期語彙とします。ユーザーが破棄を指示しない限り保持します。

daymade-codex/design-style-picker/SKILL.md
Preserve any existing UI, assets, tokens, layout, brand cues, and domain context unless the user explicitly asks to discard them.
生成プロンプトパターンの冒頭は「This is an evolution of the existing UI/design system, not a replacement. Preserve these assets: ...」で始まります。

2コア機能

01言語化しにくい好みを、選択可能な構造化された複数案(マトリクス)へ変換
02垂直ラダー軸(単一ディメンションの大幅ステップ)と水平構造化戦略軸による2軸比較
03体系的なカラー役割配分と「不足/適正/過剰/過負荷」の境界サンプル生成
04生成前の既存資産収集(スクリーンショット/トークン/コンポーネント名/ブランドの読み取り)と進化的生成プロンプトパターンのカプセル化
05候補の自己レビュー(too dead / too colorful / too generic / closest のフラグ付け)およびパス・決定ノート付きの提示
06選択画像に基づく明示的統合実装(ファイル命名による属性割り当て)とレンダリング後ビジュアルQA

4推奨統制措置と判定根拠

安全運用のための推奨統制措置
Agent 向け
アクセス可能ドメインとキー範囲を宣言
管理者向け
最小権限のキー、リクエストログを保持
判定根拠(ファイルパスと抜粋)
  • 网络端点: 外部ネットワークアクセスの宣言: なし(スキル本体にはネットワークコードが一切含まれません。画像生成はホスト既存のツール/APIを経由し、ホスト環境側の機能面に属します)
  • 本地工作目录: ファイル読み書きおよび成果物出力: なし(既存UI/スクリーンショットの読み取りおよび生成・実装をエージェントに指示するのみで、書き込みパスは一切規定しません)
監査ノート: 純粋なプロンプトオーケストレーション:スクリプト実行、外部ネットワーク送信、認証情報の読み取り、ローカルファイル書き込みはいずれも存在しません(スキル自体にコードファイルなし)。画像生成はホスト既存のツールを経由するため、そのネットワークおよびAPIキーのセキュリティ境界は本スキルではなくホスト環境に委ねられます。留意事項は、対話的な誘導(サンプル評価ラベルがユーザーの選択を固定化させる可能性)とホストツールの権限境界のみです。

5二重目の独立検証

  • [ok] 无脚本/可执行代码 — 目录仅 3 文件:SKILL.md、agents/openai.yaml、references/selection-playbook.md,无 scripts/。
  • [ok] SKILL 与 playbook 一致性 — playbook Session Pattern 8 步与 SKILL Workflow 1-6 对应;色彩阶梯 20/35/50/65/80/Overload 与 SKILL 'color intensity 20/35/50/65/80' 一致。
  • [ok] 无网络/凭证/写盘代码 — 三文件均为 markdown/yaml 文本,token 扫描零网络与密钥模式。
  • [unlocatable] 图像生成实现位置 — SKILL 只说 'Generate comparable visual evidence' 与给 prompt pattern,不声明用哪个生成后端——实现落在宿主工具,源码内无法定位生成 API。
  • [ok] 流程有效性(矩阵是否真能逼出口味边界) — 属方法论主张,无法代码验证;SKILL 内嵌 Lessons 与反例显示其基于真实迭代沉淀。

6結論

  • 直感に反した設計アプローチ:ユーザーがスタイルを説明できないときに質問攻めにせず、一括選択肢を提示して指名させる方式を採用
  • マトリクス規律(大幅ステップ+類似画像の再生成義務)により、肉眼で明確に識別できる選択肢を保証
  • カラー役割システムと境界サンプルによって「やりすぎ」を可視化し、無駄なやり取りを削減
  • 進化的実装(デフォルトでの資産保持+明示的統合命名)により、既存のデザインシステムが破棄されるのを防止
  • 最適な用途: 視覚スタイルが不確定な初期フェーズでの迅速な収束に最適:デザインシステム、ランディングページ、業務UI、コンポーネントライブラリで「肉眼で明確に異なる複数の方向性」が必要な場合。既存資産を破棄せず、カラー/密度/焦点階層を進化させたいシナリオ。一括画像生成が可能なホスト環境(Codex画像出力、マルチ画像並列生成)。
    不向きな用途: クリック後の挙動やステート遷移の判断に依存するインタラクション課題(interaction-design-board を利用すべきケース);ホストに画像生成機能がないテキスト限定環境;正確なスタイル仕様がすでに存在し、仕様通りの実装のみが求められるタスク(過剰生成の防止);最終成果物として複数案の比較ではなく単一の確定デザインが求められるシナリオ。
    Install Agent-Ready
    ① Verified Mirror 2026-09-09
    Option A · Direct DownloadDownload design-style-picker.tar.gz
    sha256: 7a6d0b59f417923b…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit d5c4678cb5.