frontend-designcommit 41bbe19SKILL.md · UI・インタラクション
フロントエンドデザイン
デザインスタジオのリードとして、題材に根ざした配色、書体、レイアウトを選び、型どおりでない UI を作ります。
npx skills add anthropics/skills --skill frontend-designコマンドを選択しました。手動でコピーしてください。
- 権限
- read-repo
- write-files
- shell
- network
- 対応ツール
- Claude Code
- GitHub
- 186.0k
- 提供元
- 公式 · Anthropic
- 状態
- スキャン済み
- ライセンス
- Apache-2.0
- カテゴリ
- UI・インタラクション
基本ルール
依頼文の言葉が常に優先され、指定のない部分を定番のデフォルトで埋めません。
実行フェーズ
フェーズ 01題材を定める
題材が不明なら、具体的な題材、対象者、主な役割を提案して確認し、その分野の素材や言葉から視覚的な選択を導きます。
フェーズ 02デザイン案作成
4〜6色の名前付き hex 値、書体と役割、ASCII ワイヤーフレームで比べたレイアウト案、原則からなる簡潔なトークン体系を作ります。
フェーズ 03依頼と照合
似た依頼なら誰でも行き着くデフォルト的な部分がないか確認し、あれば修正して、何をなぜ変えたかを説明します。
フェーズ 04実装と自己批評
修正した案どおりに実装し、CSS の詳細度に注意しつつ、レスポンシブ、フォーカス表示、動きの軽減を満たし、可能ならスクリーンショットで見直します。
権限の説明（SKILL.md より）
| 機能 | 必要か | 説明 |
|---|---|---|
| ファイル書き込み | 必要 | デザイン案に沿ってフロントエンドのコードと画面の文言を書きます。 |
| コマンド実行 | 不要 | コマンドの実行は求めていません。 |
| 外部通信 | 不要 | ネットワークアクセスは不要です。 |
SKILL.md のフロントマター（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
---関連スキル
ルールスキャンですべてのリスクを検出できるわけではありません。インストール前にこのスキルの SKILL.md を読み、権限を確認してください。