frontend-desing について
frontend-desing は、ビジュアルの方向性決定から実行可能なコードの作成まで、フロントエンドの設計と実装を導くスキルです。意図のある視覚表現と、用途に合ったレイアウトを重視する開発者向けです。
主な機能
- 01対象ユーザーとビジュアル方針の明確化
- 02一貫したデザインスタイルの選択
- 03完全で実行可能な実装コードの作成
- 04タイポグラフィ、配色、レイアウト、モーションの原則
- 05画一的で反復的な UI パターンの回避
活用シーン
- 01ランディングページのビジュアルコンセプト設計
- 02UI 要件に沿ったフロントエンドの構築
- 03タイポグラフィ、配色、構図の調整
- 04意図のあるアニメーションと視覚的細部の追加
インストール
コマンドをコピーしてターミナルで実行します。
npx skills add https:/インストール後、Claude Code で/frontend-desingを入力して読み込まれたか確認します。
詳細
概要
このスキルは、明確な美的方向性と本番環境で使える実装を備えた、質の高いフロントエンドインターフェースの作成を支援します。
意図的なデザイン上の判断、強いビジュアルアイデンティティ、細部への配慮を徹底し、ありきたりで反復的な「AI らしい」UI を防ぎます。
重視するのは機能性だけではなく、記憶に残る、丁寧に作り込まれたビジュアル体験です。
1. コーディングの前にデザインする
コードを書く前に、次のことを行います。
- インターフェースの目的を定めます。
- 対象ユーザーを特定します。
- 明確で大胆な美的方向性を選びます。
- 前提条件を明示します。
- 要件が不明確な場合は、確認を求めます。
複数のデザインの方向性が考えられる場合は、次のようにします。
- 2〜3 個の選択肢を簡潔に提示します。
- 説明なしに恣意的に選択しません。
明確なビジュアルの方向性が定まるまで、コーディングを始めないでください。
2. 美的方向性を徹底する
すべての UI に、強く意図的なスタイルを持たせる必要があります。
方向性の例：
- ミニマル／究極に洗練されたスタイル
- ブルータリスト／ありのままのスタイル
- エディトリアル／雑誌風
- ラグジュアリー／プレミアム
- 遊び心のある／おもちゃのようなスタイル
- レトロフューチャー
- インダストリアル／実用本位
- オーガニック／自然なスタイル
- マキシマリスト／表現豊かなスタイル
ガイドライン：
- 方向性を 1 つ選び、徹底します。
- 相反するスタイルを混ぜないようにします。
- デザインを独特で記憶に残るものにする要素を定義します。
次のように問いかけます。
「ユーザーはこれを見た後、何を覚えているでしょうか？」
3. 本番環境に対応した実装
出力はすべて、次の条件を満たす必要があります。
- 完全に動作するコード（HTML/CSS/JS、React、Vue など）
- クリーンで構造化されている
- すぐに実行できる（疑似コードやプレースホルダーは使用しない）
次のものは避けます。
- 不完全なコード断片
- 機能しない UI
- 曖昧な実装
4. ビジュアルデザインの原則
タイポグラフィ
- デフォルトのフォント（Arial、Inter、Roboto、システムフォント）は避けます。
- 表現力があり、個性を感じさせるフォントの組み合わせを使います。
- ディスプレイ用フォントと本文用フォントを意図的に組み合わせます。
色とテーマ
- 統一感のあるカラーパレットを使います。
- 色は変数（CSS またはテーマシステム）で定義します。
- 強いコントラストと階層を優先します。
次のものは避けます。
- ありきたりなグラデーション（特に紫／青を基調とする SaaS 風のスタイル）
- 色あせたような、コントラストの低いパレット
レイアウトと構成
- 余白を意図的に使います。
- 非対称、重なり、レイヤー構成を検討します。
- デザインを改善できる場合は、グリッドシステムから外れます。
次のものは避けます。
- ありきたりな中央揃えのレイアウト
- 変化のない、反復的なカードグリッド
モーションとインタラクション
- 目的を持ってアニメーションを使います。
- ページ読み込み時のシーケンス
- ホバー時のインタラクション
- スクロールをきっかけにした効果
ガイドライン：
- 可能な場合は CSS アニメーションを優先します。
- 小さな効果を多用するのではなく、印象的な瞬間に焦点を当てます。
ビジュアルの細部
次の要素で、奥行きと個性を加えます。
- テクスチャ（ノイズ、粒子感）
- 影とライティング
- 境界線と区切り線
- 背景の処理（グラデーション、パターン、オーバーレイ）
次のものは避けます。
- 平坦で生気のない表面
- 洗練されていないデフォルトのスタイル
5. ありきたりな AI デザインを避ける
次のものは厳格に避けます。
- 型にはまった SaaS UI
- 使い古されたフォントの組み合わせ
- 予測可能なレイアウト
- Tailwind のデフォルトの見た目
- 反復的なコンポーネントパターン
すべてのデザインに、次の特徴を持たせます。
- 意図が感じられる
- コンテキストを踏まえている
- ビジュアルに独自性がある
6. ビジョンに合わせて複雑さを調整する
デザインの複雑さは、選んだスタイルに合わせる必要があります。
- ミニマリスト → 精度、余白、タイポグラフィ
- マキシマリスト → 豊かなビジュアル、レイヤー構成、アニメーション
次のことは避けます。
- シンプルなデザインを過剰に複雑にする
- 表現豊かなデザインを単純化しすぎる
7. 出力の構成
回答には、次の内容を含めます。
- 短いデザインコンセプト（1〜3 文）
- 完全な実装コード
コードは、次の条件を満たす必要があります。
- 完全である
- 実行可能である
- デザインの方向性と一貫している
期待される動作
次の条件が満たされていれば、このスキルは正しく機能しています。
- UI デザインにビジュアル上の独自性がある
- コードが本番環境で使える品質である
- ありきたりなパターンや反復的なパターンが見られない
- 明確な美的方向性が感じられる
- ビジュアルの細部まで丁寧に実装されている
使用例
ユーザーのリクエスト：
「AI スタートアップ向けのランディングページを作成してください」
このスキルを使う場合：
-
定義します：
- 対象ユーザー：テクノロジーに詳しいユーザー／創業者
- 方向性：未来的でミニマル
-
決定します：
- タイポグラフィのスタイル
- カラーシステム
- レイアウト構成
-
実装します：
- ランディングページ全体
- スタイル設定済みのコンポーネント
- アニメーションとインタラクション
-
確認します：
- ありきたりな SaaS 風になっていないこと
- 強いビジュアルアイデンティティがあること