Yu-369/VibeCurb

What it solves

AIエージェントは、一般的なウェブパターンで学習されているため、しばしば汎用的で「平均的」なウェブサイトデザインを生成してしまいます。VibeCurbは、厳格なデザイン制約と品質ゲートを課すことで、この「平均への回帰」を防ぎ、エージェントが安全で汎用的なレイアウトではなく、プロフェッショナルなタイポグラフィ、複雑なグリッド、深いコントラストを備えた、ハイエンドでプロダクションレディなUIを生成するように強制します。

How it works

VibeCurbは、エージェントが従うべき一連の「スキル」（構造化されたmarkdownプロトコル）を提供します。すべてのスキルは、5つのステップからなるパイプラインを実装しています：

1. The Design Read: エージェントは、コーディングの前に、リファレンスやブリーフからデザインシグナル（タイポグラフィ、色、間隔）を抽出します。
2. Quality Gate 1: エージェントは、コードを生成する前に、デザインの方向性を理解していることを証明しなければなりません。
3. Precise Build: エージェントは、抽出されたシグナルに基づいて厳密にUIを構築します。
4. Visual Diff: 出力は、構成とモーションに関するPASS/FAILテーブルを使用して、リファレンスと比較検証されます。
5. Drift Rejection: システムは、汎用的な紫色のグラデーションやプレースホルダーのパターンといった、一般的なAIのデフォルト設定を特定し、拒否します。

Who it’s for

AIコーディングエージェント（Cursor, Claude Code, v0, または ChatGPT）を使用しており、AIが汎用的なテンプレートに陥ることなく、受賞歴のあるような高精度なフロントエンドインターフェースを作成したい開発者やデザイナー。

Highlights

• Specialized Skill Pipelines: awwwards-hero（ヒーローセクション）、visual-redesign（ビジュアルリデザイン）、pixel-perfect（ピクセルパーフェクトな複製）、awwwards-motion（キネティックアニメーション）専用のプロトコルが含まれています。
• Agent Integration: CLIツールを介して注入するか、エージェントのルールフォルダ（例：.cursor/rules/）に手動で配置することができます。
• Design-First Workflow: コードを書く前にエージェントが美学を理解していることを確実にするため、「Design Read」フェーズを義務付けています。
• Brand Generation: UI構築のリファレンスとして機能する、まとまりのあるブランドキットやエディトリアル級の画像を作成するためのスキルが含まれています。