frontend-design Claude Code スキル

このスキルは、新規UIの構築や既存UIの作り直しにおいて、テンプレート的にならない独自性のあるビジュアルデザインをまとめるための指針です。SKILL.mdによると、対象となる題材や読者、ページの目的に即して配色・タイポグラフィ・レイアウトを意図的に選び取る、デザインリードのような姿勢で取り組むことを促しています。手順としては、まず配色・書体・レイアウト構想・署名となる要素をまとめた簡潔な計画を作り、その後その計画がAI生成デザインにありがちな定型パターンになっていないかを見直してからコードを書くという二段階の進め方を示しています。あわせて、CSSの詳細度の衝突や、レスポンシブ対応・キーボードフォーカスの視認性・モーション低減設定といった実装面の注意点にも触れています。さらに、ユーザー視点に立った平易で能動的な文言の書き方についても助言を含んでいます。