Communitygithub.com

directions

新しいUIの外観を決める際に使用します。6つのスタイル方向を提示し、選択したものをDESIGN.mdに保存します。

directions とは?

このスキルは、新しいUIや画面のスタイル方向を決定するためのツールです。製品に関する一行の説明を与えると、6つの異なるスタイル方向をカード形式で提案し、ユーザーが選択したものを「DESIGN.md」ファイルに保存します。Claude Code、Cursor、Codex、およびSmithワークフローに対応しています。 スキルは、まず製品とターゲットユーザーを理解し、事前に定義された「ルック」ライブラリやスタイルバンクから方向を引き出します。ユーザーの好みは「sampo looks」コマンドで学習され、過去の選択に基づいて推奨順位が変わります。各カードには、色、タイポグラフィ、密度、動き、角丸などの調整つまみ(knobs)が設定され、アクセシビリティ基準(コントラスト比4.5:1以上)も自動チェックされます。 実際の手順は、カードの作成からユーザーとの比較表示、選択、そしてDESIGN.mdへの保存までをカバーします。完全自律モードでは、AIが最適な方向を自動選択します。このスキルは、デザインの選択肢を構造化し、チーム内で一貫した意思決定プロセスを提供するのに役立ちます。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/ChaseSunstrom/sampo/tree/HEAD/plugin/skills/directions

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

サンポ:スタイル方向

製品に関する一文を入力すると、6つの異なるスタイル方向をカードとして出力し、そのうち1つが選択されて「DESIGN.md」に保存されます。「/sampo:directions <文章>」で開始します(Claude CodeまたはSmith(sampo smith)セッション内)。ユーザーがUIが存在する前にルックスやスタイルを選択肢として求めるときも、自分で開始してください。Web・アプリ画面向けです。ターミナルUIやClaude Codeモッドは、代わりにプレイブックの terminal-ui.md を使用します。

このスキルは、UIプレイブック ../playbooks/references/ui/design-direction.md を1つの方向から6つの選択肢に拡張します。このファイルには、味の言葉(taste words)、方向バンク、大胆さのダイヤル、回避すべきデフォルト、DESIGN.mdテンプレートが含まれています。まずそれを読み、次に references/cards.md(カードの形式、セットのルール、汎用デフォルト、プレビューページのレシピ、実際の例)を読んでからドラフトしてください。

方向は3つの棚から引き出します:プレイブックの12行バンク、20のルックス(sampo lib list --area looks で一覧表示、その後 sampo lib show look-NAME:計測済みパレット、タイポグラフィ、レイアウト、モーション、コントラストテスト)、およびシェーダールックス(sampo lib show shader-NAME)は1つのサーフェス上のオプショナルなテクスチャであり、方向自体としては使用しません。

ユーザーの味がルックスの順序を決定します:sampo looks は、ユーザーが保持したもの、戻したもの、「そうじゃない」と言ったもの、またはキャリブレーション(/sampo:looks calibrate)で選んだものに基づいて、20のルックスをランク付けします。提供するルックスはその上位から引き出し、0未満のものは、ユーザーが名前を挙げた場合、または0以上で適切なものが存在しない場合、もしくは最も負の値が小さいものを除いて使用しないでください。そして、そのランキングがどのカードを好んだかを伝えてください。信号がない場合、すべてのルックスは0です。保持されたり戻されたりしたルックスを自動で検出する機能はありません:ユーザーがルックスを保持または戻した場合、自分で sampo looks keep または sampo looks revert を実行してください(手順5にタイミングの記載があります)。

手順

  1. 概要と既存の方向を確認する。 DESIGN.mdの保存は編集作業なので、フォーカスしたタスク内で作業してください。タスクがない場合は、sampo task new "<製品>のスタイル方向" --type FEATURE --tier S --ac "DESIGN.mdが方向、次点、および大胆さを指定していること :: grep -qE '大胆さ (セーフ|ボールド|ワイルド)' DESIGN.md" --focus を実行してください。リポジトリに既に方向(## Direction セクションのあるDESIGN.md、ブランドガイド、または出荷済みのデザインシステム)がある場合、それが優先されます(プレイブックの手順1):名前を挙げて停止してください。ただし、ユーザーが新しいルックスを求めた場合は除きます。その場合、既存の方向に基づいてドラフトし(その方向は再度提示しない)、ファイルを置き換えます。gitは古いバージョンを保持し、新しいDirectionセクションは、どの方向を置き換えたかを示します。トークンファイル、またはDESIGN.mdが## Tokensセクションのみを含む場合(sampo design extractが書き込んだもの)、それはパレットであり方向ではありません:通常どおりドラフトし、各カードはそのパレットを保持するかどうかを示します。
  2. 文章を読む。 製品、対象ユーザー、味の言葉(プレイブックのテーブル;空の単語はつまみを設定しない)を取得します。文章から面接の質問1(誰が、1分前まで何をしていたか)と3(何と間違われてはいけないか)に答え、それ以外はリポジトリ(README、既存のコピー)から取得し、推測とマークします。質問2は聞かないでください:6つのカードがその答えであり、それぞれ1つの物理的なものです。文章が製品を全く挙げていない場合(「きれいにして」など)、1つの質問をします(何で、誰のためか)。完全自律モードでは、READMEから読み取ります。
  3. 6つのカードをドラフトする。 references/cards.md の形式で6つのカードをドラフトし、その後セット全体をそのルールに従って確認します:
    • 少なくとも4つはバンクまたはルックスから、最大2つは own(独自);
    • 広がり:暗い背景と中間または色付きの背景、3つのタイプクラス、疎と密のカード各1、静かと活発なカード各1、各大胆さ設定(セーフ、ボールド、ワイルド)を最低1回;
    • 任意の2つのカードは、5つのつまみのうち少なくとも3つで異なり、物理的なものやシグネチャームーブを共有しない;
    • 各カードの本文テキストペアは4.5:1以上で計測(ルックスのパレットは既に計測済み;それ以外は sampo lib show look-lido --section "最初にテスト" のスクリプトを使用)、アクセントカラーはステータス色相から30°以上離れている;
    • いずれもcards.mdの汎用デフォルトではない、「回避すべきデフォルト」に違反しない、Not for: にこの種の製品が含まれるルックスは使用しない。 条件に合わないカードは最大2回まで再ドラフトし、それでもダメな場合は別のバンク行やルックスでスロットを埋めます。ドロップした各カードにつき1行、理由を残します。
  4. カードを表示する。 6枚すべてのカードを1つのメッセージで表示し、その後比較表(各行:背景、タイプ、密度、モーション、角丸、大胆さ)を表示して広がりを示します。ドロップしたもの、あなたの推奨と次点、それぞれの理由も示します。推奨は、サーフェスに対するプレイブックのデフォルトダイヤル(設定・管理・フォーム系はセーフ、製品のホーム画面はボールド、ゲーム・ポートフォリオ・イベント系はワイルド)に従います。ただし、ユーザーの言葉によって変更する場合があります。プレビューページは、ユーザーが要求した場合(「見せて」「モックアップして」)または2つのカードで迷っている場合にのみ作成します:cards.mdのレシピを、リポジトリ外で使用し、その後 sampo design lint を実行します。 収束前に発散する ユーザーが迷っているとき、またはすべてのカードが似ていると感じるとき:3バリアントラウンド(sampo design diverge 3 <画面> --out DIR:ルックスが大きく異なるブリーフ、それぞれ独立したレーンで構築、勝者を sampo design diverge pick LOOK で保持);味決闘または4ルックストーナメントをユーザーが回答(/sampo:looks tournament);反対日(sampo looks opposite LOOK、現在のルックスから最も遠いもの);ルックブックページ(sampo looks book --out FILE);または1つのレイアウトに関する5つの歴史的な表現方法(references/idioms.md)。
  5. 選択。
    • 標準自律モード:2つの質問を含む1つのAskUserQuestion。「どの方向?」:4つの選択肢、あなたの推奨を最初に、次に3つ。自由形式の回答は1から6の数字、または2つのブレンド(一方がタイプ、他方が色。3つは不可)。「どのくらい大胆に?」:選ばれたカードの大胆さを最初に、次に他の2つの設定。選ばれたルックスは台帳に記録:sampo looks keep look-NAME。表示したルックスをユーザーが断った場合(「そうじゃない」):sampo looks not look-NAME --why '<ユーザーの言葉>'(引用符のない言葉。または--whyを省略)を実行し、そのスロットを再ドラフト。保存したルックスを後でユーザーが置き換えたり戻したりした場合:sampo looks revert look-NAME。拒否されたAskUserQuestionは何も記録しません。
    • 完全自律モード(sampo autonomy がfullと表示):質問なし。あなたの推奨をその大胆さで採用し、記録:sampo decide "スタイル方向: <名前>, 大胆さ <設定>" --task <ID> --why "<文章に合う理由>" --rejected "<他の5つ、それぞれの理由>"。最終報告で選択したものと次点を名前で示し、ユーザーが一言で切り替えられるようにします。sampo looks には何も記録しません:これはユーザーの選択のみを保持します。
  6. DESIGN.mdを保存する。 リポジトリルート(または既存のデザインシステムパッケージの横)に保存し、プレイブックのDESIGN.mdテンプレートを、全ての見出しを順番に埋めます:視点、面接、方向、つまみ、シグネチャームーブ、禁止、許可される例外。既存のトークンセクションはそのまま残します(選択に従ってトークンファイルが作成されたら sampo design extract <UIルート> を再実行)。トークンがない場合は、トークンファイルが作成され、sampo design extract が書き込むまで待ちます。
    • 視点と面接は手順2から。「感じ」は選択されたカードの物理的なもので、ユーザーが選んだ場合は ユーザー指定、完全自律モードでは 推測 とマーク。
    • 方向:<バンク行, look-NAME または "独自: NAME">, 大胆さ <セーフ | ボールド | ワイルド>.、次点とその理由、味の言葉の分割。ブレンドの場合は両方を示し、それぞれが何を担当するかを記載:ギャラリー(タイプ)+ ネガティブファイル(色), 大胆さ ボールド.
    • つまみ:カードをテンプレートの詳細に拡張。すべての色に役割を、各テキストと背景ペアの計測したコントラストを記載。
    • シグネチャームーブ:大胆さの行で許可される数(セーフ1、ボールド2、ワイルド3)、カードのものを最初に。サウンドを呼び出すルックスは references/sonic.md から取得(デフォルトではオフ、唯一の信号にはしない)。
    • 禁止:アンチリファレンス、セットが最も近づいた汎用デフォルト、「回避すべきデフォルト」の該当する各行。 確認し、その確認をステップの証拠として記録(sampo task evidence <ID> --step N --run "<コマンド>"):grep -cE '^## (視点|面接|方向|つまみ|シグネチャームーブ|禁止|許可される例外)$' DESIGN.md が7を出力し、grep -E '大胆さ (セーフ|ボールド|ワイルド)' DESIGN.md が方向の行を見つける。
  7. 引き継ぎ。 構築はプレイブックの手順7に従います:構築、その後チェック(カバーテストを含む)。プレビューページはリポジトリ外に保持。Smithループを通じてタスクを閉じるか、ルックスがより大きなタスクの1ステップである場合は続行します。

2回目の実行では、最初の実行で保存されたDESIGN.mdを見つけ、手順1で停止します。ただし、ユーザーが新しいルックスを求めた場合を除きます。

Individual skills in this repo

This repo contains 1 individual skill — each has its own dedicated page.

関連スキル