frontend-design スキル
スキル Claude Code デザイン・メディア制作Web・アプリ開発Claude Code 拡張・ワークフロー以下の解説は生成 AI によるものです。出典と照らし合わせてご確認ください。
これはSaaSツールではなく、UIを新規構築または改修する際の視覚デザインの方向性を示すガイダンス文書（SKILL.md）です。SKILL.mdによると、小さなスタジオのデザインリードとして振る舞い、配色・タイポグラフィ・レイアウトについてブリーフに固有の意図的な選択を行うよう説明されています。プロセスとしては、まず配色・フォント・レイアウト・シグネチャー要素からなる簡潔な「トークンシステム」を考え、AI生成デザインにありがちな3種の典型的な見た目と比較・批評したうえで実装に進む二段階の手順が示されています。さらに、レスポンシブ対応やキーボードフォーカスなどの品質基準、そしてUI文言を能動態で書く際の指針も含まれています。ソース以外のホームページやリンク情報は記載がありません。
frontend-design でできること
- ブリーフの具体的な主題・対象読者・ページの役割をまず明確にしてから設計に着手できます
- ヒーロー部分を、統計とグラデーションといった定型パターンではなく主題を象徴する要素として組み立てられます
- 表示用フォントと本文用フォントを意図的に組み合わせ、明確なタイプスケールを設定できます
- 番号付けや区切り線などの構造的要素は、内容が実際に順序や意味を持つ場合にのみ使う判断ができます
- ページロードやスクロール連動、ホバーなどのモーションを、主題に合う場面に限定して用いられます
- 配色（4〜6色のHEX値）・フォント・レイアウト概念・シグネチャー要素からなるトークンシステムを作成し、AI生成にありがちな定型パターンと比較して見直せます
- typeベースとelementベースのCSSセレクタが打ち消し合う特異性の問題、特に余白周りに注意できます
- モバイル対応・キーボードフォーカスの視認性・モーション減衰設定といった品質基準を満たせます
- UIの文言は能動態で書き、操作名を一貫させ、具体的で分かりやすいエラー表示や空状態の案内を作成できます
出典
原文の説明（英語）
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.