Show HN: StyleSeed – AIエージェントがジェネリックなUI構築をやめるためのデザインルールエンジン

StyleSeed あなたのAIはAIが書いたように見えるUIを作成します。 StyleSeedはそれを修正するデザインエンジンです。 Claude Code · Codex · Cursor · vibe coding のためのデザイン判断 — 出力が生成されたように見えないようにします。 コンポーネント1つ。ブランドDNA3つ。Toss · Raycast · Arc を横断して同じチャットUIが変化 — 色、半径、モーション、シャドウ、グラデーションはすべてStyleSeedトークンによって駆動されます。単なるデータスキン属性です。スキンはトークンセットにインスパイアされています — それらの会社のデザイン言語の再現ではなく、ブランド風味の色/半径/シャドウ/モーション値です。 実際のデザインを再構築するレイヤーはプリセットです（下記/ss-restyle）。 あらゆるデザインAIスキルがUIをコヒーレントにします。 StyleSeedはジェネリックなAIルックとも戦い、それを強制します。 データではなく判断 — デザイナーの考え方、パレットコレクションではありません · AIの指示と戦う — デフォルトのインディゴ、アイコンチップのクリシェ、テンプレートレイアウト、レインボーリスト · スコア付き品質ゲート — 表示される前に≥80/100にレビュー+修正 · あらゆるエージェント — CLAUDE.md + AGENTS.md + .cursorrules を出荷 · ドリフトを停止するデザインロック · 無料 & MIT フルページ: 前 · 後 · その他の前/後 → 🔥早期バージョンのこのページを独自のゲートで実行しました。スコアは58/100でした → レシートはこちら 同じ製品、6つのルック — それぞれ/ss-restyle <プリセット> で変更可能。コヒーレントで、際立っていて、決してジェネリックではない。 はじめに 30秒で始めましょう 最も速い方法 — この1文をClaude Code、Codex、Cursor、または任意のAIエージェントに貼り付けてください。StyleSeedをインストールし、ループ全体を実行します。 StyleSeedをインストールして、チェックが実際に実行されるようにします: `npx skills add bitjaru/styleseed` (できない場合は、代わりに https://styleseed-demo.vercel.app/llms-full.txt を参照してください)。その後、このプロジェクトのすべてのUIに使用してください。 まず、プランモードで、キーカラー、フォント、モーションを私とロックし、STYLESEED.mdに保存してドリフトしないようにします。ONEのフォーカルポイントとONEのアクセントでルールに従って構築します。私に何かを表示する前に、品質ゲートを実行して≥80にし、失敗したものを修正します（Claude Codeでは`/ss-score`、Codexでは`$ss-score`）。フルスクリーンを実行するには、Claude Codeで`/ss-build`またはCodexで`$ss-build`を実行します — これはループ全体を強制します。 プロンプトが最初にインストールされる理由: 品質ゲートは、出力がジェネリックに見えなくなるステップですが、ss-scoreとss-buildスキルはインストールされている場合にのみ実行できます。エージェントをルールURLだけにポイントすると、「ゲート」は名誉システムによる自己チェックに低下し、通常はスキップされます。 インストールするとループが現実になります: ロックはSTYLESEED.mdに永続化され（ドリフトなし）、ゲートは表示される前にUIを実際にスコアリングして修正します。 インストールできない場合: URLは依然としてルールを教えます — ただ弱くなります。 Claude Code (CLAUDE.md)、Codex / Amp / Gemini CLI (AGENTS.md)、およびCursor (.cursorrules) で動作します — StyleSeedはすべて3つを提供します。 （プランニングがランダムに見える結果を防ぎます — トラブルシューティングを参照してください）。 StyleSeedがロードされた状態でエージェントが実際に行うこと: あなた ▸ 会計設定ページを構築してください エージェント ▸ （プランモード）キーカラーは？会計のためには深いティール — #0F766E、ムード: シャープ · 落ち着いた · 信頼できる（デフォルトのインディゴではない）にします。モーション: スナップ。いいですか？ あなた ▸ OK エージェント ▸ ✓ STYLESEED.md を作成しました — スキン、アクセント、フォント、半径、モーションをロックし、すべてのプロンプトを再読み込みします エージェント ▸ 構築中… 表示する前に品質ゲートを実行します ゲート ▸ ✗ 2つのアクセントカラー ✗ 「ノーマル」行に色が付いている ✗ 空の状態がない → 修正中 エージェント ▸ ✓ 88/100 — アクセント1つ、ノーマル状態はグレー、実際の空/エラー状態。ページはこちらです。 STYLESEED.mdロックはアンチドリフトメカニズムです。あなたのスキン、キーカラー、半径、モーションは一度書き込まれ、ルールはすべてのエージェントに各プロンプトでそれらを再読み込みして従うようにします — デザインはセッションごとに異ならなくなります。 品質ゲートはUIを実際にレビューして修正します（レインボーリスト、2つのアクセント、欠落した状態） — あなたがそれを見る前に、古いジェネリックビルドを後付けすることもできます。 ルールが製品です — そしてそれらはインストールや権限をほとんど必要としません。プレーンなマークダウン（CLAUDE.md / AGENTS.md / DESIGN-LANGUAGE.md）なので、上記のプロンプト — またはそれらのファイルをコピーするだけ — で、承認なしのStyleSeedの90%が完成します。 19のss-*エージェントスキル（オプションの自動化: セットアップウィザード、レビュー、スコア）が必要ですか？ npx skills add bitjaru/styleseed Claude Code、Codex、Cursor、Gemini CLI、Ampなどすべてに19のスキルをインストールします。 その後、Claude Codeで`/ss-setup`またはCodexで`$ss-setup`を実行します（Codexの`/skills`ピッカーから選択することもできます）。 エージェントは初めて使用する際にツールの承認を求める場合があります。 インストールできない場合: ルールだけでもコア作業は行われます。 エージェント、その正確なパス: エージェント 読み込み 最速インストール Claude Code CLAUDE.md + /ss-* スキル npx skills add bitjaru/styleseed Cursor .cursorrules cp engine/.cursorrules .cursorrules — または上記のプロンプトを貼り付け Codex AGENTS.md + $ss-* スキル (.agents/skills) npx skills add bitjaru/styleseed Amp · Gemini CLI AGENTS.md + スキル npx skills add bitjaru/styleseed Windsurf · Copilot · その他のすべて ペーストプロンプトのみ no install — ペースト&ゴー その他のパス（手動コピー、Cursor、awesome-design-mdブランド）は以下にあります。 手動でインストールする。 これは誰のため？ Claude CodeまたはCursorにダッシュボードの構築を依頼したが、アマチュアのように見えた場合 デザイナーを雇わずにSaaSアプリをバイブコーディングしたい場合 shadcn/uiを使用しているが、出力がまだジェネリックに感じられる場合 リバースエンジニアリングせずにTossスタイルの洗練を得たい場合 デザインのためのClaude CodeスキルまたはCursorルールセットを構築している場合 AIで高速にリリースし、AI生成に見えないプロフェッショナルなUIが必要な場合 デザインAIスキルにおけるStyleSeedの位置づけ 「AIのデザインを支援する」プロジェクトはたくさんあります。ほとんどは一部を解決します。StyleSeedは、「AI生成に見える」問題全体をターゲットにし、その修正を強制するものです。 StyleSeed ブランド / DESIGN.md コレクション 「もっと綺麗にする」スキル UIジェネレーター (Claude Design, v0…) デザイン判断を教える（デザイナーがどのように考えるか） ✅ ❌ データのみ ⚠️ 数個のヒント ❌ AIルック自体と戦う — デフォルトのインディゴ、アイコンチップのクリシェ、テンプレートレイアウト、レインボーリスト ✅ ❌ ❌ ❌ スコア付き品質ゲート — 表示前にUIをレビュー+修正 ✅ ❌ ❌ ❌ ドリフト防止デザインロック — セッション間で決定が持続 ✅ ❌ ❌ ❌ あらゆるエージェント（Claude Code · Cursor · Codex · Amp · Gemini）で動作 ✅ ⚠️ ⚠️ ❌ 1つのツール ブランドスキン + 名前付きモーションシステム ✅ ⚠️ 色のみ ❌ ⚠️ 無料 & MIT ✅ ✅ 通常フリーミアム それらはすべて競合ではありません — DESIGN.mdはStyleSeedにスキンを提供し、ジェネレーターは最初のドラフトを提供します。StyleSeedは、他のものが持っていない判断+強制レイヤーです。 実際に強制するもの（ある種の好み） シニアデザイナーが無意識に行う、具体的な名前付きの呼び出しをAIが毎回適用できるように書き下したもの: 洗練された黒は#2A2A2A、#000ではない — 5段階のグレースケールランプ、純粋な黒ではない 1つのアクセント、他はすべてグレースケール — シングルアクセントの法則; 2つ目の色が最も速い「デザインされていない」兆候 数値は単位に対して2:1 — 24px単位に対して48pxの値; 同じサイズはマグニチュードをノイズに平坦化する ネストされた半径の法則: 内側 = 外側 - パディング — 同心円の角、カードとその内側のボタンが一致する 単一方向からのレイヤード、低透明度（≤8%）のシャドウ — 1つのハードドロップシャドウではない 値が変化しても幅のジッターがない、表形式の数値 ステータスカラーは深刻度のみ — 「ノーマル」行はグレー; 色は例外を示す、レインボーリストではない 絵文字アイコンなし、およびすべてのカードにペールチップのLucideなし（§CC-9b） — 2つの反対のAIアイコンの兆候 8px空間グリッド; グループ周りのギャップ > グループ内のギャップ — 構造として読める近接性 ピクセルではなく光学的な配置 — 矢印/再生グリフをわずかに調整; キャピタルハイトでタイプを中央揃え デスクトップ本文 ≥16px、画面ごとに1つのフォーカルポイント — タイトなモバイルスケールと均一なグリッドの両方が「機械製」と読める 1つの半径の個性 · 1つのアイコンセット · 1つのシャドウ言語 — コヒーレンス法則（§C0）、最も重要な「AI生成に見える」修正 モーションはサーフェスによってスコープされる — ダッシュボードは落ち着いたまま; ランディングページはシネマティックティア（スクロール連動の表示、3Dヒーロー、アニメーショングラデーション — Stripe/Linearのプレイブック）を取得する。スクロールジャッキングは依然としてどこでも禁止されている（§43） 参照。