Spacing

design-system skill を使って UI システムを生成・監査し、既存コードからトークンを抽出し、実運用のリポジトリでスタイルの一貫性をレビューできます。

design-reviewは、稼働中のインターフェースを監査し、余白、階層、ビジュアルの一貫性、インタラクション上の問題を見つけ、検証しながら段階的に修正していく、UX志向のデザインQAスキルです。実装前のplan-modeレビューにも対応しており、曖昧な助言ではなく、具体的なソース変更に踏み込んだdesign-reviewガイドが必要なときに役立ちます。

design-consultation は、ざっくりした製品アイデアを完成度の高いデザイン方針へと落とし込むための design-consultation skill です。`DESIGN.md` を唯一の参照元として作成し、プレビューや、タイポグラフィ、カラー、余白、レイアウト、モーションに関するシステムレベルの指針までまとめます。新規プロダクトや、一貫した出発点が必要な UI 面の設計に向いています。

visual-design-foundationsは、タイポグラフィスケール、カラートークン、スペーシングルール、アイコノグラフィの指針をもとに、実践的なUIシステム作りを支援します。強固なデザイン基盤の導入、スタイルガイドの整備、情報階層の監査、明確な設計制約に基づく実装向けCSS変数の作成に活用できます。

polishは、公開前にアライメント、余白、整合性、トークンの使い方、微細なディテールの問題を見つけるための、最終確認向けUIレビュー スキルです。すでに動いているものの、あと少し洗練が足りない画面、フロー、コンポーネントに最適です。不要な作り直しをせずに、リリース準備、デザインシステムとの整合、全体品質を高めるのに役立ちます。

layoutスキルは、UIが平坦に見える、詰まって見える、あるいは機械的に配置されているときに、余白、階層、構成を整えるのに役立ちます。一般的なスタイリングではなく、UI Design向けの実践的なlayoutガイドとして、レイアウト、整列、視覚的なリズムの問題に使えます。構造的な修正、グルーピングの明確化、より自然な読み順が必要な場面に最適です。

distill は、ノイズ、弱い情報階層、重複した選択肢を取り除き、画面上の主目的を明確にすることで、煩雑な UI デザインを整理しやすくするスキルです。画面を引き算で見直したいとき、優先順位をより明快にしたいとき、焦点を絞ったシンプル化レビューを行いたいときに適しています。

layout スキルは、UIの構成、余白、階層、整列、視覚的リズムを見直し、改善するためのスキルです。情報が詰まりすぎた画面や、構造が弱い画面のレビューに特に向いており、利用前に文脈整理のため /impeccable へ先に依存します。

industrial-brutalist-ui skill for UI Design は、スイス風グリッド、極端なタイポグラフィ対比、実用本位の配色、アナログな質感を使って、機械的で高密度なインターフェースを作るための skill です。ダッシュボード、編集システム、ポートフォリオページなど、規律のあるコントロールパネル風の見た目が必要な場面で、この industrial-brutalist-ui ガイドを活用できます。

arrange は、UIのレイアウト、余白、視覚的階層の課題を診断し、改善の方向性を示すためのスキルです。画面が詰まり気味なUI、単調で繰り返し感のあるグリッド、構成の弱いレイアウトを見直したいときに役立ちます。利用には $frontend-design のセットアップが必須で、必要に応じて $teach-impeccable のコンテキストも併用できます。

typeset は、フォント選定、情報の階層、サイズ、ウェイト、可読性を見直し、UIタイポグラフィを監査・改善するスキルです。プロダクトUI、ダッシュボード、ランディングページに適しています。事前に /frontend-design のコンテキストが必要で、デザイン文脈がない場合は /teach-impeccable も先に使う必要があります。

polishスキルは、リリース前にUIの最終品質チェックを行いたいチーム向けのスキルです。インターフェースの機能実装が完了し、デザインの前提も共有できている段階で使うことで、余白、整列、操作状態、文言、エッジケースなどの見落としを出荷前に洗い出せます。

normalizeは、UI機能を監査し、デザインシステムに沿う形へ整えるためのスキルです。normalizeの導入方法、必要なfrontend-designの事前準備、ページ・ルート・コンポーネントでの実践的な使い方を確認できます。

distillは、画面・コンポーネント・ユーザーフローを本来の目的に必要な要素まで絞り込むためのUIデザインスキルです。 clutterや視覚的ノイズ、機能肥大の抑制に役立ちますが、利用前に /frontend-design への依存があり、状況によっては /teach-impeccable も先に必要になります。

arrangeは、UIのレイアウト、余白、視覚的ヒエラルキーの改善に役立つスキルです。画面の詰まり感、単調なグリッド、弱いグルーピング、平板な構成を診断し、より明快な構造と余白のリズムを整える際に使います。より効果的に使うには、pbakaus/impeccable内で `/frontend-design` の後に実行し、必要に応じて `/teach-impeccable` も併用するのが適しています。

quieter スキルは、UI Designの視覚的な強さを抑え、階層構造・明快さ・ブランドらしさを保ちながら、派手すぎる、きつい、刺激の強いインターフェースをより落ち着いた印象に整えます。pbakaus/impeccable リポジトリでは、必須の /frontend-design ワークフローを実行した後に使うのが最適です。

polishスキルは、リリース前の最終UIレビューを導き、余白、整列、文言、状態、トランジションの仕上げを整えるためのものです。機能実装が完了した段階で、デザインの前提情報、明確な品質基準、そして対象となる画面・フロー・コンポーネントが定まっている場合に最も効果を発揮します。

normalizeスキルはUI機能を監査し、デザインシステムに沿う形へ整え直します。導入前に確認したいnormalizeの適用場面、必要な`/frontend-design`の準備、ページ・ルート・コンポーネントでの実践的な使い方を把握できます。

distillは、画面を本質的なタスクに絞り込むためのUI設計簡潔化スキルです。インターフェースの散らかりを抑え、ノイズを減らし、情報の優先順位をわかりやすくしたいときに役立ちます。/frontend-design の後、対象画面が具体的に定まっていて、主要なユーザー目標が1つに絞られ、必ず残すべき制約が明確な場合に最も効果を発揮します。

arrangeスキルは、UIのレイアウト、余白、グルーピング、視覚的階層の改善に役立ちます。どんな場面で使うべきか、GitHub repoからのarrange installの進め方、そしてより良いUI Designの判断に向けて`/frontend-design`の文脈でarrange usageをどう活かすかを分かりやすく解説します。

infographicスキルは、`infographic` DSL を使って構造化コンテンツを洗練されたインフォグラフィックレイアウトに変換します。KPIカード、タイムライン、ロードマップ、ステップ形式のフロー、A vs B比較、SWOT、ファネル、組織ツリー、シンプルなチャートに適しています。UIデザイン向けのインフォグラフィックや、4〜8項目のプレゼン資料風サマリーに特に向いています。複雑なデータ分析や技術図解にはあまり適していません。

high-end-visual-design は、エディトリアル調でシネマティック、かつ緻密に作り込まれたUIを設計するためのプレミアムなUIディレクションスキルです。フォント、余白、影、モーション、構図をガイドすることで、AIがありきたりなレイアウトに寄らないようにし、ランディングページ、マーケティングサイト、ダッシュボード、洗練されたアプリ画面の質感を高めます。

redesign-existing-projects は、既存のWebサイトやアプリをプレミアム品質へ引き上げるための skill です。現在のデザインを監査し、ありがちなAIっぽいパターンを見つけ出し、機能を壊さずにハイエンドなデザイン実装を適用します。CSSフレームワークでもプレーンなCSSでも動作します。

gpt-taste は、洗練されたUIページを作るためのデザイン重視のスキルです。編集的なアートディレクション、間隔設計の規律、GSAPモーションを活かして、見栄えのよいページを構築できます。マーケティングページ、ランディングページ、ショーケースサイトで、レイアウトのバリエーションを増やし、タイポグラフィの制御を高め、ありきたりなフロントエンドのパターンを減らしたいときに gpt-taste を使ってください。実装に役立つインストール手順と使い方のメモも含まれています。