AnxForever/stylekit

Open-source visual style library for AI-generated UI — 148 curated styles with design tokens, prompts and MCP. | 面向 AI 生成网页的开源视觉风格库:148 套精选风格,支持 MCP、Agent Skill 与 npm CLI。

解決する課題

AI が生成するウェブサイトは、「もっと良く見せて」という指示がモデルにとって曖昧すぎるため、ありきたりな見た目になりがちです。StyleKit は、デザイントークン、コンポーネントレシピ、厳格な制約を含む構造化された視覚スタイルライブラリを提供することで、AI エージェントがそれに従い、"スタイルドリフト" を起こさずに一貫性のある高品質なビジュアルデザインを生み出せるようにします。

仕組み

StyleKit は、抽象的なビジュアルの方向性を機械可読な仕様へと変換します。10 のカテゴリ(Cyberpunk、Brutalism、Stripe や Apple のようなブランドに着想を得たスタイルなど)にわたる 148 の厳選されたスタイルを提供します。これらのスタイルは、主に 3 つの方法で AI ツールに提供されます:

  1. shadcn Registry:CLI コマンドで既存プロジェクトにスタイルを追加し、CSS 変数を更新できます。
  2. Agent Skills:専用スキルにより、コーディングエージェント(Cursor、Claude Code、Windsurf など)が特定のスタイルとルールをコードへ直接適用できます。
  3. MCP (Model Context Protocol):MCP サーバーがスタイルの取得、デザイントークン、そして生成された UI コードが選択したスタイルのルールに準拠しているかを検証する lint ツールを提供します。

対象ユーザー

AI コーディングエージェントを使ってフロントエンドのインターフェースを構築し、ありきたりな AI 的な美学を超えて、具体的でプロフェッショナルなビジュアルアイデンティティを実装したい開発者とデザイナー。

ハイライト

  • 豊富なライブラリ:148 の厳選されたスタイル、60 のアニメーション、36 のページテンプレート。
  • エージェントネイティブ:MCP と Agent Skills を通じて AI エージェントと深く統合し、スタイリングを自動化。
  • マルチエクスポート:Tailwind プリセット、shadcn テーマ、Figma トークンをサポート。
  • 機械可読:/llms.txt と、AI が利用しやすい HTTP API を提供。
  • 検証:AI が生成したコードがスタイル制約に従っているかを確認する stylekit_lint_code ツールを同梱。

関連

  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト
  • プロジェクト