design-farmer - コードベースを読み取り、デザインシステムとして整理するAIコーディングエージェント向けスキル

リポジトリを分析し、既存のデザインパターンを抽出したうえで、トークン、コンポーネント、テスト、ドキュメントを備えたOKLCHベースのデザインシステムへと育てます。

なぜ必要なのか？

AIエージェントとバイブコーディングをしていると、デザインの一貫性が最初に崩れます。色はばらばらで、間隔は不揃いになり、ダークモードは後回しにされがちです。エージェントに明確なデザイン制約を与えると、はるかに一貫したUIが得られますが、それを手作業で作るのは本末転倒な大仕事です。

Design Farmerはこのプロセス全体を自動化します。コードベースを読み、すでにあるものを把握したうえで、その上にプロダクションレベルのデザインシステムを構築またはアップグレードします。トークンファイルを手で作る必要も、カラーパレットをコピペする必要もありません。

主な機能

• OKLCHベースのデザイントークン整理
• primitive / semantic トークン階層の構成
• アクセシビリティを考慮した基本コンポーネントの構築
• dark theme の拡張
• DESIGN.md の生成
• スタイルのdriftおよびトークン誤用の検証

エージェントがその後の作業でも継続して参照できる、再現可能なデザインワークフローを作ることを目指しています。

awesome-design-mdで提供されているDESIGN.mdファイルをプロジェクトに置いておくと、ユーザーが望むシステムを理解したうえで開始します。