fstack-design

/fstack-design

エージェントはデザインのスロップを書いてしまいます。ランダムなグラデーション、5 種類のフォントサイズ、パレットから外れた色、決して繰り返されない余白。このスキルは、UI をプロジェクトがすでに持っているスタイルに準拠させ、それ以外の部分を素朴なデザインセンスに照らして整理します。

これが強制するルールは、まず既存のものに合わせることです。新しい UI は、別のアプリから貼り付けたように見えるのではなく、そこに属しているように見えるべきです。

使用するとき

• 新規または変更された UI が、ずれている、ありきたり、または他と一貫していない。
• エージェントがちょうど画面を作成し、それがスロップのように感じられる。
• ページ、コンポーネント、または UI 全体に対して /fstack-design を呼び出します。

手順

1. 何かに触れる前に既存のデザインシステムを学びます。スタイルシート、トークン、テーマ、そしていくつかのよく作られた既存コンポーネントを読みます。実際のパレット、タイプスケール、スペーシングスケール、角丸、シャドウ、およびすでに使用されているコンポーネントパターンを書き留めます。
2. 対象の UI を次の 2 つの観点でレビューします。
   • 既存のシステム — 既存のものを再利用する代わりに、どこで色、サイズ、余白、またはコンポーネントをでっち上げているか？
   • 素朴なデザインセンス — 階層、整列、一貫した余白、抑制。スロップの兆候にフラグを立てます。動機のないグラデーション、多すぎるフォントサイズ、一貫しないパディング、ランダムなシャドウ、アイコンとしての絵文字、パレットから外れた単発の色、冗長なラッパー div。
3. 短い所見リストを作成します。各項目は、何がずれているか、そして代わりに使用すべき既存のトークンまたはパターンです。
4. 停止して尋ねます。どれを適用するかを。
5. 承認された項目を、一度に 1 つの画面またはコンポーネントずつ修正し、既存のトークンとクラスを再利用します。ユーザーがシステムに本当に何かが欠けていることに同意しない限り、新しいものをでっち上げてはいけません。差分を表示します。

してはいけないこと

• プロジェクトにすでに合うものがあるのに、新しい色、フォント、余白値、またはコンポーネントをでっち上げること。
• 再設計すること。これは整列と整理を行うのであり、製品を再構想するのではありません。
• 「修正」のために UI フレームワークやコンポーネントライブラリを追加すること。
• 承認なしに変更を適用すること。

例

ユーザー: /fstack-design 新しい設定ページがずれて見える

エージェント: 「まずデザインシステムを読みます。設定ページに関する所見:

1. 保存ボタンに #3b82f6 を使用している — アプリのプライマリは --color-accent です。トークンを使用してください。
2. ここには 3 つの見出しサイズがあるが、アプリの残りは 2 つ（--text-lg、--text-base）を使用しています。真ん中のものを削除してください。
3. カードのパディングが 18px — 他のすべてのカードは --space-4（16px）を使用しています。合わせてください。
4. グラデーションのヘッダー背景 — アプリの他のどこもグラデーションを使用していません。フラットなサーフェス色を使用してください。
5. タブに絵文字アイコン。アプリは src/icons のアイコンセットを使用しています。差し替えてください。

すべて修正しますか、それとも選びますか？ 一度に 1 セクションずつ行い、差分を表示します。」