プレミアムUIデザイン＆美学スイート
独自性、差別化、そしてアクセシブルなウェブインターフェースを創出し、AIによるありきたりな表現を排除するためのデザインフレームワーク。
UIコンポーネントのスタイリング、設計、または監査を行う際には、references/<category>/<topic>/SKILL.mdで該当するトピックを参照してください。
カタログ＆クイックナビゲーション
1. アンチAIスロップ＆ビジュアルクラフト (references/anti-slop-and-craft/)
| トピック | サブパス | 説明 |
|---|
| no-ai-design-slop | anti-slop-and-craft/no-ai-design-slop | AIのデフォルト設定（紫のグラデーション、中央寄せのフローティングカード、画一的なレイアウト）を防ぐ受動的な品質ゲート。 |
| audit-ai-design-slop | anti-slop-and-craft/audit-ai-design-slop | AIのビジュアル欠陥、不整合な要素、および除去中心のクリーンアップ計画を特定する診断監査。 |
| build-awwwards-quality-sites | anti-slop-and-craft/build-awwwards-quality-sites | Awwwardsレベルのクラフト：強力なアートディレクション、エディトリアルタイポグラフィ、GSAPモーション、本物のイメージ。 |
| ui-ux-pro-max | anti-slop-and-craft/ui-ux-pro-max | プロフェッショナルなフロントエンドデザインプレイブック：タイポグラフィスケール、意図的なホワイトスペース、マイクロインタラクション。 |
| design-first-ui-prompting | anti-slop-and-craft/design-first-ui-prompting | フロントエンドコードを書く前に、仕様主導で美的・インタラクションデザインのプロンプトを作成。 |
2. スタイリング、トークン＆ブランド (references/styling-and-tokens/)
| トピック | サブパス | 説明 |
|---|
| brand-guidelines | styling-and-tokens/brand-guidelines | タイポグラフィルール、ボイス＆トーン、ロゴ使用、カラーコンプライアンス、スペーシング基準を強制。 |
| theme-factory | styling-and-tokens/theme-factory | 厳選されたビジュアルテーマジェネレーター、デザイントークン、フォントペアリング、CSS変数。 |
| tailwindcss | styling-and-tokens/tailwindcss | Tailwind CSSコンポーネントレシピ、レイアウトグリッド、タイポグラフィユーティリティ、レスポンシブパターン。 |
| unsplash-asset-images | styling-and-tokens/unsplash-asset-images | 高品質で本物のフォトグラフィアセット、ポートレート、背景を調達。 |
3. サーフェス＆ページアーキタイプ (references/surfaces-and-pages/)
| トピック | サブパス | 説明 |
|---|
| glass-dark-ui | surfaces-and-pages/glass-dark-ui | フロスト加工のグラスモーフィズムダークモードパネル、擬似要素グラデーションボーダー、読みやすいコントラスト。 |
| skeuomorphic-ui | surfaces-and-pages/skeuomorphic-ui | 触感的な物理的スタイリング：レイヤーグラデーション、重ねられた内側/外側シャドウ、エンボス加工のディテール。 |
| framed-grid-layout | surfaces-and-pages/framed-grid-layout | 精密なヘアライングリッド境界、L字型コーナーブラケット、構造化されたエディトリアルセクション。 |
| landing-page | surfaces-and-pages/landing-page | 高コンバージョンの単一オファーSaaSランディングページ構造、ナラティブアーク、コピーライティング。 |
| pricing-page | surfaces-and-pages/pricing-page | 高コンバージョンの価格表、プラン比較マトリックス、機能チェックリスト、FAQ。 |