# フロントエンドデザイン (frontend-design)

> デザインスタジオのリードとして、題材に根ざした配色、書体、レイアウトを選び、型どおりでない UI を作ります。

- カテゴリ: [UI・インタラクション](https://www.myskills.tools/ja/categories/ui-interaction/)
- 提供元: 公式 · Anthropic
- リポジトリ: https://github.com/anthropics/skills/tree/main/skills/frontend-design (commit 41bbe19)
- SKILL.md: https://github.com/anthropics/skills/blob/main/skills/frontend-design/SKILL.md
- インストールコマンド: `npx skills add anthropics/skills --skill frontend-design`
- ライセンス: Apache-2.0
- 対応ツール: Claude Code
- 権限: read-repo ✓, write-files ✓, shell ✗, network ✗
- 状態: スキャン済み
- ルールスキャンですべてのリスクを検出できるわけではありません。インストール前にこのスキルの SKILL.md を読み、権限を確認してください。

## 基本ルール

依頼文の言葉が常に優先され、指定のない部分を定番のデフォルトで埋めません。

## 実行フェーズ

1. **題材を定める** — 題材が不明なら、具体的な題材、対象者、主な役割を提案して確認し、その分野の素材や言葉から視覚的な選択を導きます。
2. **デザイン案作成** — 4〜6色の名前付き hex 値、書体と役割、ASCII ワイヤーフレームで比べたレイアウト案、原則からなる簡潔なトークン体系を作ります。
3. **依頼と照合** — 似た依頼なら誰でも行き着くデフォルト的な部分がないか確認し、あれば修正して、何をなぜ変えたかを説明します。
4. **実装と自己批評** — 修正した案どおりに実装し、CSS の詳細度に注意しつつ、レスポンシブ、フォーカス表示、動きの軽減を満たし、可能ならスクリーンショットで見直します。

## 権限の説明（SKILL.md より）

| 機能 | 必要か | 説明 |
|---|---|---|
| ファイル書き込み | 必要 | デザイン案に沿ってフロントエンドのコードと画面の文言を書きます。 |
| コマンド実行 | 不要 | コマンドの実行は求めていません。 |
| 外部通信 | 不要 | ネットワークアクセスは不要です。 |

## SKILL.md のフロントマター（YAML）

```yaml
---
name: frontend-design
description: Guidance for distinctive, intentional visual design when building new UI or reshaping an existing one. Helps with aesthetic direction, typography, and making choices that don't read as templated defaults.
license: Complete terms in LICENSE.txt
---
```

ホーム: https://www.myskills.tools/ja/ · URL: https://www.myskills.tools/ja/skills/frontend-design/