# Frontend Design

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

- Skill: `higashi-masafumi/frontend-design` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add higashi-masafumi/frontend-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/higashi-masafumi/frontend-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: Higashi-Masafumi (https://skillmd.com/u/higashi-masafumi)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/higashi-masafumi/frontend-design

---


# フロントエンドデザイン

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

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

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

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