# Frontend Design

> 独創的で本格的なフロントエンドインターフェースを高いデザイン品質で作成します。ユーザーがWebコンポーネント、ページ、アーティファクト、ポスター、またはアプリケーション（ウェブサイト、ランディングページ、ダッシュボード、Reactコンポーネント、HTML/CSSレイアウト、またはWeb UIのスタイリング/美化など）の構築を求めるときにこのスキルを使用します。一般的なAI美学を避け、創造的で洗練されたコードとUIデザインを生成します。

- Skill: `majiayu000/frontend-design-2` (Agent Skill, multi-file: 3 files)
- Install (CLI): `npx skillmds@latest add majiayu000/frontend-design-2`
- Raw SKILL.md: https://api.skillmd.com/api/skills/majiayu000/frontend-design-2/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: 完全な利用規約はLICENSE.txtを参照
- Author: majiayu000 (https://skillmd.com/u/majiayu000)
- Updated: 2026-09-09
- Page: https://skillmd.com/skills/majiayu000/frontend-design-2

---


このスキルは、一般的な「AI生成っぽい」美学を避けた、独創的で本格的なフロントエンドインターフェースの作成を支援します。優れた美的細部と創造的な選択に格別の注意を払いながら、実際に動作するコードを実装します。

ユーザーはフロントエンド要件を提供します：構築するコンポーネント、ページ、アプリケーション、またはインターフェース。目的、対象者、または技術的制約に関するコンテキストを含めることもあります。

## デザイン思考

コーディングの前に、コンテキストを理解し、大胆な美的方向性を決定します：
- **目的**: このインターフェースはどんな問題を解決しますか？誰が使用しますか？
- **トーン**: 極端な方向性を選択：徹底的なミニマル、マキシマリストなカオス、レトロフューチャー、オーガニック/ナチュラル、ラグジュアリー/洗練、遊び心/おもちゃ風、エディトリアル/雑誌風、ブルータリスト/生々しい、アールデコ/幾何学的、ソフト/パステル、インダストリアル/実用的など。選択肢は無数にあります。これらをインスピレーションとして使用しますが、美的方向性に忠実なデザインを設計してください。
- **制約**: 技術要件（フレームワーク、パフォーマンス、アクセシビリティ）。
- **差別化**: 何がこれを忘れられないものにしますか？人々が覚えている一つのことは何ですか？

**重要**: 明確なコンセプト方向を選択し、精度を持って実行します。大胆なマキシマリズムと洗練されたミニマリズムはどちらも機能します - 鍵は強度ではなく、意図性です。

次に、以下のような動作するコード（HTML/CSS/JS、React、Vueなど）を実装します：
- 本格的で機能的
- 視覚的に印象的で記憶に残る
- 明確な美的視点を持つ一貫性のあるもの
- あらゆる細部まで綿密に洗練されたもの

## フロントエンド美学ガイドライン

以下に焦点を当てます：
- **タイポグラフィ**: 美しく、ユニークで、興味深いフォントを選択します。ArialやInterのような一般的なフォントを避け、代わりにフロントエンドの美学を高める独特な選択を選びます；予想外の、個性的なフォント選択。際立つディスプレイフォントと洗練されたボディフォントを組み合わせます。
- **カラー＆テーマ**: 一貫した美学にコミットします。一貫性のためにCSS変数を使用します。鋭いアクセントを持つ支配的な色は、控えめで均等に分散されたパレットよりも優れています。
- **モーション**: エフェクトとマイクロインタラクションにアニメーションを使用します。HTMLにはCSSのみのソリューションを優先します。可能な場合はReactにMotionライブラリを使用します。高インパクトな瞬間に焦点を当てます：段階的な表示を伴う1つの巧みに編成されたページロード（animation-delay）は、散在するマイクロインタラクションよりも多くの喜びを生み出します。驚きを与えるスクロールトリガーとホバー状態を使用します。
- **空間構成**: 予想外のレイアウト。非対称性。重なり。斜めの流れ。グリッドを破る要素。豊かなネガティブスペースまたは制御された密度。
- **背景＆視覚的ディテール**: 単色にデフォルトするのではなく、雰囲気と深みを作り出します。全体的な美学に合ったコンテキスト的なエフェクトとテクスチャを追加します。グラデーションメッシュ、ノイズテクスチャ、幾何学的パターン、レイヤード透明度、劇的な影、装飾的なボーダー、カスタムカーソル、グレインオーバーレイなどの創造的な形式を適用します。

一般的なAI生成美学を使用しないでください：使い古されたフォントファミリー（Inter、Roboto、Arial、システムフォント）、陳腐な配色（特に白背景の紫のグラデーション）、予測可能なレイアウトとコンポーネントパターン、コンテキスト固有の個性を欠いた型にはまったデザイン。

創造的に解釈し、コンテキストに対して真に設計されたと感じられる予想外の選択をします。同じデザインであってはなりません。明るいテーマと暗いテーマ、異なるフォント、異なる美学の間で変化させます。世代を超えて共通の選択（例えばSpace Groteskなど）に収束しないでください。

**重要**: 実装の複雑さを美的ビジョンに合わせます。マキシマリストデザインには、広範なアニメーションとエフェクトを伴う精巧なコードが必要です。ミニマリストまたは洗練されたデザインには、抑制、精度、スペーシング、タイポグラフィ、微妙なディテールへの注意深い配慮が必要です。エレガンスはビジョンをうまく実行することから生まれます。

覚えておいてください：Claudeは並外れた創造的な仕事をする能力があります。遠慮せず、枠にとらわれずに考え、独特なビジョンに完全にコミットしたときに真に創造できるものを示してください。