作者 dominikmartn · dominikmartn/hue
色相にブランド (URL、名前、またはスクリーンショット) をフィード → 完全なデザイン言語を取得します: トークン、タイポグラフィー、間隔、明暗、ヒーローのレシピ、アイコン キット、生成されたデザイン システム スキル。
dominikmartn/hue は、あらゆるブランド参照を完全なデザイン システムに変えるオープンソースの Claude スキルです。 Cursor.com または Raycast にポイントし、スクリーンショットを貼り付けるか、ムードに名前を付けると、色 + タイポグラフィ + スペース トークン、小さなコンポーネント ライブラリ、明るい/暗いバリアント、ヒーローのレシピ、および一致するアイコン キットが分析されて出力されます。 デザイン言語パッケージには、YAML モデル ファイルとサンプル HTML ランディング ページが含まれています。 また、セッション間で再利用できるブランドごとのクロード スキルも生成されるため、エージェントは自動的にブランドを維持できます。
使うタイミング： あなたはサイトの美しさを気に入っており、同じ方向性のスターター システムを望んでいます。
結果： エージェントが後続のすべての UI タスクに適用する再利用可能なブランド ボイス。
使うタイミング： お気に入りの Dribbble ショットがあり、その外観をアプリに反映させたいと考えています。
結果： 単一のリファレンスから作成されたクリーンで所有可能なシステム。
使うタイミング： 顧客が 5 人いて、複製作業を行わずに 5 つのブランド内テーマが必要であるとします。
結果： ホワイトラベルのテーマは、スキルのアクティベーションによって交換できます。
Figma フレームをコードに変換するときに色相のトークンを使用する
Magic UI コンポーネントを選択し、色相トークンを介して調整します
生成されたブランドがコントラスト + a11y ルールに合格することを確認する
| ツール | 入力 | 呼び出すタイミング | コスト |
|---|---|---|---|
| hue:generate (SKILL) | URL | brand name | screenshot + optional notes | 新製品の開始時または顧客のブランドの導入時 | 0 |
生成されたパレットが濁って見えるSVG/PNG 参照への偏見。 JPEG は彩度を失います。 または、スキルが尊重する六角アンカーを提供します。
Inspect generated tokens.json for the flagged colorsダークモードではコントラストが効かないa11y-first ダークモードで色相を再生成するように依頼します。 ニュートラルをオーバーライドします。
Run claude-design-auditor on the dark variants| 代替案 | 代わりに使う場面 | トレードオフ |
|---|---|---|
| claude-code-design-skills | 変換するフレームがあります。 あなたはすでにブランドを持っています | ブランドを生成しない - ブランドを消費する |
| magic-ui-mcp | ブランド システムではなく、既製のコンポーネントが必要です | 言語ではなく図書館 |
| claude-design-auditor-skill | デザインを作成するのではなく、既存のデザインを評価したい | 評価はするが生成はしない |