frontend-design

frontend-design

OpenDesign 向けに Anthropic の公式 frontend-design スキルを応用したものです。

ユーザーがウェブサイト、ランディングページ、ダッシュボード、アプリケーション画面、HTML/CSS の成果物、React/Vue/Svelte コンポーネント、既存 UI のビジュアル刷新など、フロントエンドインターフェースの構築や改善を依頼した場合に、このスキルを使用してください。

目標は、単に「見栄えをよくする」ことではありません。明確なデザインの方向性と優れた技巧を備え、ユーザーの実際の状況に合わせて設計されたと感じられるだけの製品としての詳細を盛り込み、動作するフロントエンドコードを完成させることです。

ワークフロー

1. 見た目を選ぶ前に、依頼内容を理解します。

   • 対象ユーザー、主な目的、分野、感情的なトーンを特定します。
   • フレームワーク、既存のスタイル、アクセシビリティ、パフォーマンス、出力先、レスポンシブ対応など、技術的な制約を確認します。
   • リポジトリにデザイントークン、コンポーネント、スクリーンショット、または DESIGN.md がある場合は、それらを信頼できる情報源として使用します。

2. 具体的な美的方向性を一つ定めます。

   • 製品に合った方向性を選びます。極限までミニマル、エディトリアル、ラグジュアリー、遊び心のあるデザイン、インダストリアル、レトロフューチャー、情報量の多い業務向け、落ち着いたエンタープライズ向け、アート性のあるコンシューマー向けなど、明確な方向性を選びます。
   • タイポグラフィ、余白、色、階層、モーション、コンポーネントの形状を通じて、その方向性を具体化します。
   • 汎用的な AI の定番表現は避けます。紫から青へのグラデーション、曖昧なガラス風カード、どれも同じような SaaS レイアウト、角が丸すぎるカード、ありきたりなアイコンの並び、インターフェースに役立たない装飾的な図形などです。

3. 仮のポスターではなく、実際のインターフェースを設計します。

   • 実際のユーザーが必要とする操作項目、空・読み込み中・エラーの各状態、テーブル、フィルター、ナビゲーション、レスポンシブな動作を含めます。
   • 内容には事実に即したものを使用します。データが不明な場合は、主張を作り出すのではなく、サンプル、保留中、または利用不可と明記します。
   • 対象ユーザーのワークフローを効率的に保ちます。ダッシュボードやツールは、繰り返し使う際に素早く確認できるよう、十分な情報量を持たせます。マーケティングページでは、より表現豊かなデザインにできます。

4. 本番品質のフロントエンドコードを作成します。

   • リポジトリで使われている既存のフレームワーク、コンポーネントの規約、アイコン、トークン、スタイリング手法を優先します。
   • 単独で動作する成果物では、ユーザーからフレームワークの指定がない限り、自己完結型の HTML/CSS/JS を作成します。
   • セマンティックなマークアップ、キーボードで操作できるコントロール、視認できるフォーカス状態、適切なコントラスト、レスポンシブなレイアウトの制約を使用します。
   • 繰り返し使う色、余白、シャドウ、文字サイズのスケールには CSS 変数を使用します。

5. ビジュアルの仕上がりを磨きます。

   • タイポグラフィ：表現力がありつつ読みやすい書体の組み合わせを選びます。意図的に実用本位の方向性を採るのでない限り、既定のシステムフォントだけを主なビジュアル表現にするのは避けます。
   • 色：役割が明確なバランスのよい配色を作ります。アクセントカラーは控えめに、意図を持って使います。
   • レイアウト：配置、リズム、情報密度、余白を意図的に活用します。カード、パネル、ラベルがずれていかないようにします。
   • モーション：状態変化、表示、フィードバックには目的のあるトランジションを加えます。パフォーマンスのため、transform と opacity を優先します。
   • 細部：テクスチャ、境界線、シャドウ、区切り線、メディア、アイコン表現は、コンセプトを支える場合にのみ使います。

6. 最終納品前に自己レビューします。

   • モバイルとデスクトップの幅でインターフェースが正しく動作すること。
   • テキストがコンテナに収まり、隣接する UI と重ならないこと。
   • インタラクティブな要素に hover/focus/active/disabled の各状態があること。
   • AI 生成にありがちな見た目の表現を避けていること。
   • ページを閉じた後もユーザーが説明できる、印象に残る特徴が一つあること。

OpenDesign との統合

OpenDesign に有効なデザインシステムが用意されている場合は、それを製品のブランドに関する取り決めとして扱います。まず、注入された色、タイポグラフィ、レイアウト、コンポーネントに関するガイダンスに従い、デザインシステムで指定されていない部分には、このスキルのフロントエンド制作ルールを適用します。

OpenDesign が typography、color、anti-ai-slop などの技巧に関する参照情報を注入する場合は、仕上げる前にそれらの観点で確認します。ユーザーのブランドに関するガイダンスが一般的な技巧のルールと矛盾する場合は、ユーザーのガイダンスを優先します。

ソース

• アップストリーム：https://github.com/anthropics/skills/tree/main/skills/frontend-design
• カテゴリ：web-artifacts

ライセンス

このスキルは、Anthropic の公式スキルリポジトリをもとにしています。アップストリームの Apache-2.0 ライセンス条項については、このフォルダー内の LICENSE.txt をご覧ください。