name: frontend-design description: 高品質で記憶に残るフロントエンドUIを設計・実装するスキル。HTML/CSS/JSやReact/Vueのコンポーネント・ページ・アプリの作成/改修、レイアウト/タイポグラフィ/配色/モーション/美的方向性が重要な依頼で使用する。

フロントエンドデザイン

概要

一般的なAIっぽい見た目を避け、意図的で洗練されたUIを実装する。

ワークフロー

1. 目的・対象ユーザー・制約・技術スタックを確認する。欠けている前提が重要なら最小限で質問する。
2. 強い美的方向性と、記憶に残る差別化ポイントを1つ決め、コード前に宣言する。
3. 方向性を具体化する：フォントペア、配色システム、構図、モーションの主役、背景表現。
4. トークン化（CSS変数/テーマ定数）しつつ実装する。
5. 品質チェックに照らして仕上げる。

品質チェック

• 汎用フォントと使い古された配色を避け、ディスプレイ用と本文用を明確に分ける。
• 主要色とアクセント色のコントラストを意図的に作る。
• 背景は単色回避。グラデ/ノイズ/パターン/形状で空気感を作る。
• アニメーションは数を絞り、段階的な演出を優先する。
• レスポンシブと可読性/コントラストを担保する。

参照

• 詳細は references/frontend-design-guidelines.md を読む。
• フレームワーク固有のテンプレや資産が必要なら assets/ を追加し、ここから参照する。