AI にコードを書かせると、動きはするが妙に「生成っぽい」UI になることがあります。余白が均一すぎる、シャドウが濃すぎる、どのカードも同じ高さ——デザインの法則は破っていないが、人間が考えたような調整が入っていない状態です。

StyleSeed はこの問題を「デザインルールを Claude に読ませる」ことで解くスキルです。

発想の転換：データではなく判断力を渡す

一般的なアプローチは、デザイントークン（色・余白・フォントサイズ）を定義して Claude に渡すことです。StyleSeed はもう一段踏み込み、「なぜその値を使うか」という判断基準を 69 のルールとして言語化しています。

Teaches Claude Code design judgment, not just design data. 69 visual rules that make AI output look designed, not generated.

たとえばこういうルールです。

  • 黒は #000 ではなく #2A2A2A を使う。純黒は印刷物のインクで使う色で、スクリーン UI には浮きすぎる
  • アクセントカラーはアプリ全体で 1 色。2 色使うと目が分散する
  • シャドウの不透明度は 4% が上限。それ以上は「影っぽさ」より「汚れ」に見える
  • 同じタイプのセクションを 2 回並べない。背の高いセクションの次は背の低いセクションを置く

「そういうものだ」と経験的に知っているデザイナーの判断を、Claude が参照できる形に変換しています。

6 カテゴリ 69 ルール

ルールは 6 つの領域に分かれています。

カテゴリ 内容
Color Discipline グレースケール階層、アクセント抑制、上品な黒の定義
Spatial Rhythm レイアウト比率、情報密度、セクション高さのバリエーション
Information Hierarchy KPI カードの差別化、数字 48px に対して単位 24px の比率
Shadow & Elevation 不透明度 4% 上限、ダークモードでのボーダー代替
Component Variance 同一 KPI カードを 4 枚並べない、コンテンツタイプの交互配置
Motion & Feedback 通常 200ms、入場はスプリング、退場はイーズアウト

ブランドスキンの仕組み

ルール（エンジン）と見た目（スキン）を分離しているのが設計上の工夫です。

styleseed/
├── engine/          # 69 のデザインルール（ブランド非依存）
│   └── DESIGN-LANGUAGE.md
└── skins/           # ブランドごとの色変数
    ├── toss/theme.css
    ├── stripe/theme.css
    ├── linear/theme.css
    ├── vercel/theme.css
    ├── notion/theme.css
    ├── raycast/theme.css
    └── arc/theme.css

スキンは CSS カスタムプロパティを定義した theme.css だけです。エンジンのルールはスキンを変えても変わりません。「Stripe 風の配色で、StyleSeed のルールに従ったレイアウト」を /ss-setup で選択するだけで実現します。

7 つのスキンが内蔵されています。Toss（韓国フィンテック風、パープル）、Stripe（インディゴ、多層シャドウ）、Linear（ダークファースト、デベロッパー向け）、Vercel（モノクローム）、Notion（ブルーアクセント）、Raycast（スナップ感）、Arc（浮遊感）です。

14 のスラッシュコマンド

スキルとして使う場合、Claude Code に 14 のコマンドが追加されます。

コマンド 役割
/ss-setup スキン・ブランドカラー・フォントの対話設定
/ss-page / /ss-component ページ・コンポーネントの雛形生成
/ss-review / /ss-lint デザインルール準拠チェック
/ss-audit Nielsen の 10 ユーザビリティ原則で評価
/ss-motion アニメーションの適用
/ss-a11y アクセシビリティ監査
/ss-copy マイクロコピー生成（ボタン・エラー文言など）
/ss-feedback ローディング・成功・エラー状態の追加

/ss-review でルール違反を洗い出し、/ss-lint で自動修正する、という使い方が基本です。

Named Motion System

アニメーションにも名前付きの「種」があります。5 つのシードが用意されており、プロジェクトのトーンに合うものを選びます。

  • Spring：バウンシーで遊び心がある
  • Silk：滑らかでエレガント
  • Snap：即時で正確
  • Float：軽く夢見心地
  • Pulse：リズミカルでパンチがある

/ss-motion toggle-flip のようにキーワードで動きを指定することもできます。magnetic（ホバーで引き寄せる）、glow-pulse（発光点滅）、confetti-pop など 20 以上のキーワードが定義されています。

使い始め

.claude/skills/ にディレクトリをコピーして /ss-setup を実行するだけです。Claude Code を再起動するとスキルが読み込まれ、以降は DESIGN-LANGUAGE.md と CLAUDE.md が自動参照されます。shadcn/ui + Tailwind CSS v4 + Radix UI の構成を前提としています。

まとめ

  • StyleSeed は「デザインデータ」ではなく「デザイン判断の根拠」を Claude に渡すスキル
  • 69 のルールを 6 カテゴリに整理。純黒を使わない・シャドウは 4% 上限・同じセクションを繰り返さないなど、経験則を言語化している
  • エンジン（ルール）とスキン（テーマ）を分離しており、7 つのブランドスキンを切り替えられる
  • 14 のスラッシュコマンドでレビュー・生成・アニメーション適用まで一気通貫

出典