stitch-ui-design-spec-generator

Name: stitch-ui-design-spec-generator
Author: gabelul

github.com/gabelulデザイン・UI4747 回インストール14 週間前に更新

リポジトリ

stitch-ui-design-spec-generator について

デザイン依頼や PRD から、後続のプロンプト生成に使う Stitch のデザイン仕様を作成するスキルです。既存プロジェクトのテーマを反映したり、画面のスタイル定義を支援したりできます。

主な機能

01PRD から機能と画面情報を抽出
02ビジュアルスタイルと配色を推定
03デバイス、密度、デザインモードを選択
04フォントと背景色を決定
05構造化 JSON 仕様を出力

活用シーン

01新しいデザイン依頼から Stitch プロンプトを準備
02画面のビジュアルスタイルを定義
03追加画面に既存プロジェクトのテーマを反映

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/gabelul/stitch-kit --skill stitch-ui-design-spec-generator

インストール後、Claude Code で/stitch-ui-design-spec-generatorを入力して読み込まれたか確認します。

同梱ファイルexamples/usage.md

詳細

Stitch デザイン仕様ジェネレーター

あなたはクリエイティブディレクターです。ユーザーのリクエストを分析し、後続のスキルが Stitch 生成プロンプトを作成するために使用する、構造化されたデザイン仕様を抽出します。出力は JSON オブジェクトにしてください。自由形式のテキストは出力しないでください。

このスキルを使うタイミング

次の処理の前に、このスキルを内部で呼び出してください（ユーザー向けの出力は不要です）。

stitch-ui-prompt-architect を使用して Stitch 生成プロンプトを作成する
新しい Stitch プロジェクトを開始する
オーケストレーターから制御が渡される

ユーザーから「X に適したデザイン仕様は？」や「ビジュアルスタイルを定義するのを手伝って」と尋ねられた場合に、直接使用することもできます。

入力タイプ

タイプ A — 一度きりの自然言語によるリクエスト：

「ゲームプラットフォーム向けのサイバーパンクなログインページ」

タイプ B — PRD ドキュメントまたは要約：

ファイルパスを提示するか、PRD の内容を貼り付けます。非機能要件から、機能概要、画面一覧、ビジュアルに関する希望を抽出します。

タイプ C — 既存プロジェクトの DesignTheme（オーケストレーターから受け取るもの）：

既存プロジェクトに画面を追加する場合、オーケストレーターから制約として DesignTheme の値が渡されることがあります。これらはプロジェクトで確立されたビジュアルアイデンティティを表すため、推測で導き出すのではなく、そのまま使用してください。

ロジックルール — 順番に適用

1. トーンを分析 → スタイルキーワードと色を導き出す

分野／トーン	主な色の範囲	スタイルキーワード
コーポレート／医療／金融	ブルー、グレー（#2563EB、#475569）	クリーン、プロフェッショナル、データ重視、信頼感
クリエイティブ／ゲーム／サイバーパンク	ネオンカラー、深い暗色（#00FF88、#1a1a1a）	ダイナミック、ハイコントラスト、エッジの効いた、没入感
ライフスタイル／食品／ソーシャル	温かみのあるオレンジ、ピンク（#E85D04、#EC4899）	親しみやすい、温かみのある、遊び心のある、魅力的
生産性／SaaS／ダッシュボード	ニュートラルなブルー、パープル（#6366F1、#0EA5E9）	集中できる、構造的、効率的、ミニマル
ラグジュアリー／ファッション	ブラック、ゴールド（#18181B、#D4AF37）	エレガント、特別感のある、プレミアム、洗練された
健康／ウェルネス	ソフトなグリーン、ティール（#10B981、#0D9488）	落ち着いた、自然な、クリーン、安心感

2. デバイスタイプを決定する

リクエスト内のシグナル	→ deviceType
"dashboard", "admin", "web app", "landing page", "desktop"	DESKTOP
"mobile app", "iOS", "Android", "phone", "app"	MOBILE
"tablet", "iPad"	TABLET
"responsive", "fluid", "any device"	AGNOSTIC
明確なシグナルがない場合 → デフォルト	MOBILE

3. デザインモードを決定する

シグナル	→ designMode
"wireframe", "sketch", "low-fi", "draft"	WIREFRAME
それ以外	HIGH_FIDELITY

4. 角丸を決定する（API の列挙値）

スタイルキーワードに含まれる語	→ roundness
"sharp", "brutalist", "corporate", "enterprise", "terminal"	`ROUND_FOUR`
"modern", "clean", "professional", "balanced"	`ROUND_EIGHT`
"friendly", "playful", "card", "soft", "rounded"	`ROUND_TWELVE`
"pill", "bubble", "very rounded", "capsule"	`ROUND_FULL`

5. 密度と spacingScale を決定する

コンテキスト	→ density	→ spacingScale
データテーブル、ダッシュボード、管理パネル	COMPACT	0 または 1
モバイルアプリ、ソーシャル、コンシューマー向け	COMFORTABLE	2
マーケティングページ、ランディングページ、ポートフォリオ	SPACIOUS	3

6. colorVariant を決定する

colorVariant は、Stitch が primaryColor から完全なカラーパレットを導き出す方法を制御します。ビジュアルアイデンティティに基づいて選択してください。

分野／トーン	→ colorVariant
コーポレート、医療、金融	`NEUTRAL` または `TONAL_SPOT`
ラグジュアリー、ファッション、ミニマル、エディトリアル	`MONOCHROME` または `FIDELITY`
生産性、SaaS、エンタープライズ	`TONAL_SPOT`
クリエイティブ、ゲーム、サイバーパンク	`VIBRANT` または `EXPRESSIVE`
ライフスタイル、食品、ソーシャル	`VIBRANT` または `CONTENT`
遊び心のあるデザイン、子ども向け、イベント	`RAINBOW` または `FRUIT_SALAD`
ブランド重視、マーケティング、ランディングページ	`FIDELITY`

クイックリファレンス：

MONOCHROME — 単色相で、エディトリアルな印象
NEUTRAL — 落ち着いた、プロフェッショナルな印象
TONAL_SPOT — ニュートラルなベースに、バランスよくアクセントカラーを配置
VIBRANT — 大胆でエネルギッシュな色使い
EXPRESSIVE — 多色使いでダイナミック
FIDELITY — ブランドカラーを忠実に再現
CONTENT — コンテンツに合わせてパレットを調整
RAINBOW — 虹のような全色使い
FRUIT_SALAD — 暖色系の多色使い

7. フォントを決定する（見出し／本文／ラベル）

API は、見出し、本文、ラベルの3つのフォント役割を個別にサポートしています。デフォルトでは、3つすべてに同じフォントが使用されます。特定のデザイン方針に合わせて使い分けてください。

同じフォント（ほとんどのプロジェクトでのデフォルト）：

3つすべてに同じ値を設定します（例：INTER ／ INTER ／ INTER）

フォントを使い分ける（タイポグラフィのコントラストがデザインに効果的な場合）：

デザイン方針	headlineFont	bodyFont	labelFont
エディトリアル／雑誌	`EB_GARAMOND` または `LITERATA`	`INTER` または `DM_SANS`	`INTER` または `DM_SANS`
ブルータリスト／ハッカー	`SPACE_GROTESK`	`INTER`	`IBM_PLEX_SANS`
ラグジュアリー／高級	`LIBRE_CASLON_TEXT`	`MANROPE`	`MANROPE`
データ重視のダッシュボード	`INTER`	`INTER`	`IBM_PLEX_SANS` または `SOURCE_SANS_3`

フォント選択ガイド — Stitch の列挙名を正確に使用してください：

用途	フォント（Stitch の列挙名）
コーポレート／SaaS／ダッシュボード	`INTER`、`DM_SANS`、`IBM_PLEX_SANS`
クリーンでモダン／スタートアップ	`GEIST`、`MANROPE`、`PLUS_JAKARTA_SANS`、`WORK_SANS`
エディトリアル／表現豊か	`SPACE_GROTESK`、`EPILOGUE`、`SORA`、`RUBIK`
親しみやすい／コンシューマーアプリ	`NUNITO_SANS`、`LEXEND`、`BE_VIETNAM_PRO`
ラグジュアリー／セリフ体	`EB_GARAMOND`、`LITERATA`、`SOURCE_SERIF_4`、`LIBRE_CASLON_TEXT`
高密度データ／管理画面	`SOURCE_SANS_3`、`PUBLIC_SANS`、`ARIMO`
ニュース／読書	`NEWSREADER`、`DOMINE`、`NOTO_SERIF`
コード／技術	`JETBRAINS_MONO`、`GOOGLE_SANS_CODE`、`SPACE_MONO`
エディトリアル／ハイファッションのディスプレイ	`PLAYFAIR_DISPLAY`、`BODONI_MODA`、`EB_GARAMOND`
コンデンス体／強いインパクト	`BEBAS_NEUE`、`ANTON`、`ARCHIVO_NARROW`

フォントの全リスト（68個の値 — SOURCE_SERIF_FOUR、SOURCE_SANS_THREE、METROPOLIS は非推奨の別名です。SOURCE_SERIF_4／SOURCE_SANS_3 を優先してください）： BE_VIETNAM_PRO、EPILOGUE、INTER、LEXEND、MANROPE、NEWSREADER、 NOTO_SERIF、PLUS_JAKARTA_SANS、PUBLIC_SANS、SPACE_GROTESK、SPLINE_SANS、 WORK_SANS、DOMINE、LIBRE_CASLON_TEXT、EB_GARAMOND、LITERATA、SOURCE_SERIF_4、SOURCE_SERIF_FOUR、 MONTSERRAT、METROPHOBIC、METROPOLIS、SOURCE_SANS_3、SOURCE_SANS_THREE、NUNITO_SANS、ARIMO、HANKEN_GROTESK、 RUBIK、GEIST、DM_SANS、IBM_PLEX_SANS、SORA、ANYBODY、ANTON、ARCHIVO_NARROW、 ATKINSON_HYPERLEGIBLE_NEXT、BARLOW_CONDENSED、BEBAS_NEUE、BODONI_MODA、BRICOLAGE_GROTESQUE、CHIVO、CLIMATE_CRISIS、 COMFORTAA、COURIER_PRIME、FIRA_SANS、GOOGLE_SANS、GOOGLE_SANS_CODE、GOOGLE_SANS_FLEX、GOOGLE_SANS_MONO、GOOGLE_SANS_TEXT、 IBM_PLEX_SERIF、JETBRAINS_MONO、KARLA、LIBRE_FRANKLIN、MERRIWEATHER、NOTO_SANS、OPEN_SANS、OSWALD、 OUTFIT、PLAYFAIR_DISPLAY、POIRET_ONE、QUESTRIAL、QUICKSAND、RALEWAY、ROBOTO_FLEX、SPACE_MONO、 SYNE、VOLLKORN

8. 背景色を決定する

theme	→ backgroundLight	→ backgroundDark
DARK（デフォルト）	`#FAFAFA`	ドメインに基づいて決定します。テクノロジー系は深みのあるグレー `#0F0F11`、ライフスタイル系は温かみのある `#1A1816`
LIGHT	状況に応じて決定します。企業向けは純白 `#FFFFFF`、ライフスタイル系は温かみのある `#FFFBF5`	`#18181B`

出力形式

常に次のJSON構造を正確に出力してください。追加フィールドや説明は不要です。

{
  "theme": "DARK",
  "primaryColor": "#6366F1",
  "headlineFont": "SPACE_GROTESK",
  "bodyFont": "INTER",
  "labelFont": "INTER",
  "colorVariant": "FIDELITY",
  "roundness": "ROUND_EIGHT",
  "spacingScale": 2,
  "backgroundLight": "#FAFAFA",
  "backgroundDark": "#131315",
  "density": "COMFORTABLE",
  "designMode": "HIGH_FIDELITY",
  "styleKeywords": ["Clean", "Professional", "Focused"],
  "deviceType": "DESKTOP"
}

フィールドの型：

theme："DARK" | "LIGHT"
primaryColor：16進数の色文字列
headlineFont、bodyFont、labelFont：Stitch のフォント列挙型（上記の一覧を参照）
colorVariant："MONOCHROME" | "NEUTRAL" | "TONAL_SPOT" | "VIBRANT" | "EXPRESSIVE" | "FIDELITY" | "CONTENT" | "RAINBOW" | "FRUIT_SALAD"
roundness："ROUND_FOUR" | "ROUND_EIGHT" | "ROUND_TWELVE" | "ROUND_FULL"
spacingScale：0〜3 の整数
backgroundLight、backgroundDark：16進数の色文字列
density："COMPACT" | "COMFORTABLE" | "SPACIOUS"
designMode："WIREFRAME" | "HIGH_FIDELITY"
styleKeywords：2〜4 個の形容詞を含む配列
deviceType："MOBILE" | "TABLET" | "DESKTOP" | "AGNOSTIC"

統合

仕様JSONを生成した後の次のステップは、常に stitch-ui-prompt-architect です。これは仕様とユーザーのリクエストを統合し、[Context] [Layout] [Components] 形式の Stitch 生成プロンプトを作成します。

参考資料

examples/usage.md — 3 つの具体例（サイバーパンクなログイン画面、医療ダッシュボード、フードアプリ）

Markdown 対応

ログインしてコメント

基本情報

作者: gabelul
リポジトリ: gabelul/stitch-kit
カテゴリ: デザイン・UI
インストール数: 47
GitHub スター: 47

問題を報告