space-brand-ui-design

Brand Design MD スキル

ユーザーが特定のブランドのデザインスタイルに言及した場合は、次の手順を実行します。

1. ブランド名を特定し、正しい slug に対応付けます
2. npx getdesign@latest add <slug> を実行して、完全な DESIGN.md 仕様を取得します
3. 内容を読み取り、デザインコンテキストとして UI コードを生成します

ブランド slug 登録一覧

テクノロジー／AI 製品

ユーザーが使う可能性のある表現	Slug
Apple	apple
Claude、Anthropic、Claude AI	claude
Cursor、AI エディター	cursor
ElevenLabs、11Labs、音声 AI	elevenlabs
Figma、デザインツール	figma
Framer、Web サイト構築ツール	framer
Lovable	lovable
Meta、Facebook	meta
MiniMax	minimax
Mintlify、ドキュメントプラットフォーム	mintlify
Mistral、Mistral AI	mistral.ai
Notion、ノートツール	notion
Ollama	ollama
OpenCode	opencode.ai
PostHog	posthog
Raycast	raycast
Replicate	replicate
Resend	resend
Runway、RunwayML、AI 動画	runwayml
Sanity、CMS	sanity
Sentry	sentry
Supabase	supabase
Superhuman、メールクライアント	superhuman
Together AI、together	together.ai
Vercel	vercel
VoltAgent	voltagent
Warp、ターミナル	warp
Webflow	webflow
X.AI、Grok	x.ai
Zapier	zapier

開発者ツール／インフラストラクチャ

ユーザーが使う可能性のある表現	Slug
Airtable	airtable
Cal.com、Cal	cal
Clay	clay
ClickHouse	clickhouse
Cohere	cohere
Composio	composio
Expo	expo
HashiCorp	hashicorp
IBM	ibm
Intercom	intercom
Linear、プロジェクト管理	linear.app
Miro、オンラインホワイトボード	miro
MongoDB	mongodb
NVIDIA	nvidia
Pinterest	pinterest
Stripe、決済	stripe

金融／暗号資産

ユーザーが使う可能性のある表現	Slug
Binance	binance
Coinbase	coinbase
Kraken	kraken
Revolut	revolut
Wise	wise

消費財／自動車

ユーザーが使う可能性のある表現	Slug
Airbnb	airbnb
BMW	bmw
Ferrari	ferrari
Lamborghini	lamborghini
Nike	nike
Renault	renault
Shopify	shopify
SpaceX	spacex
Spotify	spotify
Tesla	tesla
Uber	uber

操作手順

Step 1：ブランドを特定する

ユーザーの入力からブランド名を特定し、上記の登録一覧を参照して対応する slug を見つけます。

• ユーザーが「Apple のスタイル」と言った場合 → slug = apple
• ユーザーが「Notion のような雰囲気」と言った場合 → slug = notion
• ユーザーが「Stripe のミニマルなスタイルにして」と言った場合 → slug = stripe
• ユーザーが「BMW + Linear のミックス」と言った場合 → slugs = bmw, linear.app（複数ブランドのミックス）

ブランド名を特定できない場合は、ユーザーにその旨を伝え、利用可能なブランド一覧を提示します。

Step 2：DESIGN.md を取得する

ユーザープロジェクトを汚さないよう、一時ディレクトリ内で次のコマンドを実行します。

cd /tmp && mkdir -p design-md-tmp && cd design-md-tmp && npx getdesign@latest add <slug> 2>&1

次に、生成された DESIGN.md ファイルを読み取ります。

cat /tmp/design-md-tmp/DESIGN.md

複数ブランドをミックスする場合は、各ブランドの DESIGN.md を順に取得し、主要なデザイントークンを統合します。

Step 3：デザイン仕様を解析する

DESIGN.md から次の重要な情報を抽出します。

• カラーシステム：背景色、文字色、アクセントカラー、境界線の色
• タイポグラフィ仕様：フォントファミリー、フォントサイズの階層、ウェイト、行の高さ、字間
• コンポーネントのスタイル：ボタン、カード、ナビゲーション、入力欄の具体的な CSS 値
• 余白システム：基本単位と比率
• 角丸の体系：各コンポーネントの border-radius 値
• シャドウシステム：各レベルの box-shadow 値

Step 4：UI を生成する

抽出したデザイン仕様に基づき、ユーザーが求める UI コード（HTML/CSS/React/Vue など）を生成します。

仕様に記載された具体的な数値を厳守してください。 独自に変更したり、近似値で置き換えたりしないでください。仕様に rgba(0,0,0,0.95) と記載されている場合は #000000 を使わず、字間が -2.125px の場合は四捨五入しないでください。

ミックススタイルのガイドライン

ユーザーが複数のブランドスタイルのミックスを求めた場合：

1. 各ブランドの DESIGN.md を個別に取得します
2. ユーザーが指定したメインブランドをベースにします
3. サブブランドから指定された要素（色／タイポグラフィ／レイアウト／コンポーネント）を抽出して融合します
4. 生成コード内で、どの部分がどのブランドに由来するかをコメントで説明します

ミックスの例：

• 「Notion の暖色 + Linear のミニマルなタイポグラフィ」→ Notion のカラートークン + Linear のタイポグラフィルールを使用
• 「Apple の余白 + Claude の暖色系オレンジのアクセントカラー」→ Apple の余白システム + Claude の #d97757 のアクセントカラーを使用

出力形式

• デフォルトでは、インライン CSS を含む完全な単一ファイルの HTML を出力します
• ユーザーが React/Vue を明示的に指定した場合は、対応する形式で出力します
• 後からメンテナンスしやすいよう、コードの先頭にブランドの出典と主要なデザイントークンをコメントとして記載します
• オプション：DESIGN.md をユーザーのプロジェクトディレクトリに保存するかどうかを確認します

エラー処理

• npx コマンドの失敗：Node.js の環境を確認するようユーザーに案内するか、仕様を https://getdesign.md で手動確認するよう伝えます
• ブランドが存在しない：利用可能なすべてのブランドを一覧表示し、最も近い代替案を提案します
• ネットワークの問題：フォールバックとして、ブランド登録一覧の簡単な説明をデザインの方向性として使用します

クイックリファレンス：各ブランドのスタイルを一言で表すと

apple      → 极致留白 + SF Pro + 电影质感
notion     → 暖色极简 + 衬线标题 + 柔和表面
claude     → 赭石强调色 + 编辑排版 + 温暖智识感
stripe     → 紫色渐变 + 300 字重优雅 + 精致细节
linear     → 超级极简 + 精准 + 紫色强调
figma      → 多彩活泼 + 专业 + 协作感
cursor     → 深色 + 渐变强调 + AI原生
spotify    → 深色底 + 荧光绿 + 音乐封面驱动
tesla      → 激进减法 + 全屏摄影 + 近零UI
ferrari    → 黑底电影感 + Ferrari红 + 奢华排版
vercel     → 黑白精准 + Geist字体 + 极简
supabase   → 深色翠绿 + 代码优先 + 开发者感
raycast    → 深色铬面 + 渐变强调 + 效率感
airbnb     → 珊瑚暖色 + 摄影驱动 + 圆润UI
stripe     → 紫色渐变 + 精致 + 金融质感
nike       → 单色 + 大写字体 + 全出血摄影
bmw        → 深色溢价面 + 精准德式美学
shopify    → 深色电影感 + 荧光绿 + 超细字重