StyleSeed – AIコーディングツールにデザインセンスを植え付けるオープンソース（2,200行のデザインルール）

バイブコーディングでUIを作ると、「機能はするけれどデザインがイマイチ」という問題があります。

StyleSeedは、AIコーディングツール（Claude Codeなど）にデザインルールを組み込むためのオープンソースです。 ファイルをプロジェクトにコピーすると、AIがTossアプリ級のUIを作り出します。

含まれる内容:

• 2,200行のビジュアルデザインルール 60種（カラーフィロソフィー、タイポグラフィ階層、カード構造、禁止パターンなど）
• 47個のReactコンポーネント（shadcn/uiベース31個 + ダッシュボードパターン16個）
• 10個のClaude Codeスキル（UI生成、UX監査、マイクロコピー生成など）
• Tailwind CSS v4テーマ（ライト/ダークモード）

awesome-design-md（23Kスター）のDESIGN.mdがブランドトークンを提供するものだとすれば、 StyleSeedはレイアウトルール、UXガイド、コンポーネントまで含む「デザインブレイン」です。

最初のシードはTossスタイル。Apple、Linear、Stripeシードも追加予定です。MITライセンス。

[bitjaru0402]

▎ 更新です — クリック可能なライブデモを公開しました。
▎
▎ 🎬 https://styleseed-demo.vercel.app
▎
▎ 同じチャットUIを Toss → Raycast → Arc の3ブランドに一度に morph させる画面です。色・角丸・モーション・シャドウ・グラデーションが、data-skin 属性ひとつで全部切り替わります。コード分岐なしで、トークンだけで実現しています。
▎
▎ README の冒頭に GIF プレビューも貼ってあります: https://github.com/bitjaru/styleseed
▎
▎ 初回投稿時にご意見をくださった皆さん、ありがとうございます 🙏

[kurthong]

オープンソースを通じたドメイン知識の拡張が、皮肉にも対AI時代にこそ輝いているように思えます。とても素晴らしい知識共有をありがとうございます！

[aldlfkahs]

共有ありがとうございます。個人プロジェクトをやるときに便利に使えそうですね。

[kaydash]

すごい！