frontend-design Claude Code スキル
Claude Code スキルClaude Codeデザイン・メディア制作Web・アプリ開発以下の解説は生成 AI によるものです。出典と照らし合わせてご確認ください。
このスキルはClaudeが新規UIの作成や既存UIの見直しを行う際に、テンプレート的でない意図的なビジュアルデザインを組み立てるための指針を提供するものです。ブリーフに含まれる題材や対象読者を出発点にして配色・タイポグラフィ・レイアウトを選ぶ考え方を示し、計画立案からブリーフとの照合、構築、批評という作業手順を提示しています。また、AI生成デザインにありがちな配色パターンやタイポグラフィの型、装飾的なUIコピーの傾向を具体的に挙げ、それらを無自覚に使わないよう注意を促しています。さらに、ユーザー視点での能動的な文言作成についても扱っています。
frontend-design でできること
- 配色・タイポグラフィ・レイアウト・設計方針をまとめたトークン一覧を作り、ブリーフと照らし合わせて見直す進め方を得られる
- プロジェクト固有の書体選定やタイプスケール、行長・行間の設定について助言を受けられる
- 番号付きラベルやオールキャップスの見出し、テラコッタ系アクセントカラー、影付きカードレイアウトなど、テンプレート的に見えがちな表現とその適否を確認できる
- 一律のホバーやフェードインではなく、狙いを絞ったモーション演出の考え方を得られる
- ボタン文言・エラー表示・空の状態など、能動的でユーザー本位なUIコピーの書き方について助言を受けられる
- レスポンシブ対応やキーボードフォーカス、モーション低減設定、配色のアクセシビリティといった品質面のチェック項目を確認できる
出典
frontend-design の変更履歴
- Claude Code スキル frontend-design のスキル本文（SKILL.md）が更新