frontend-design（型にはまらない画面デザイン）

新しい UI を作るときや、既存の画面を作り直すときに読み込まれる、見た目の方向づけのためのスキルです。description には、美的な方向性、タイポグラフィ、「テンプレートの既定値に見えない選択」を助けると書かれています。

中身はコードやテンプレートではなく、文章による指示です。Claude に「どの依頼主にも別の個性を与えることで知られるデザインスタジオのデザインリード」として振る舞うよう求め、ありきたりな案を一度断られた依頼主だという想定で、題材に固有の選択をするよう促します。

特徴的なのは、いま AI が生成するデザインに偏りがちな特徴を具体的に挙げ、指定がない限りそれを既定値として使わないよう求めている点です。あわせて、計画 → 依頼内容との照合 → 実装 → 自己チェックという進め方と、画面の中の文章の書き方まで指示しています。

題材から考える

まず、依頼に製品や題材が書かれていなければ、題材・想定する利用者・そのデザインの主な役割を自分で一つ仮定し、依頼主に確認するよう求めています。業界や題材、素材、その分野ならではの言葉づかいこそが独自の見た目の出どころだ、という考え方で、子ども向けのおもちゃと金融アナリスト向けダッシュボードでは見た目がまったく違うはずだ、という例が挙げられています。

デザインの原則

• ヒーロー：最初に目に入る部分には、その題材の世界で最も特徴的なものを、最も合う形（見出し、画像、アニメーション、動くデモなど）で置く。「大きな数字＋小さなラベル＋グラデーション」は定番なので、本当に最適なときだけ使う
• タイポグラフィ：書体がページの個性を決める。使う書体は1〜2種類で、2種類なら違いをはっきりさせる。いつもの既定の書体を避けて意図的に選び、文字組みの古典的な指針に沿った文字サイズの段階を作る。1行はおおむね80字未満
• 避けたい定番の扱い：見出しの一語だけ色や斜体で強調する、ラベルをすべて大文字にする、内容の上に不要な小見出しラベルを付ける
• 構造は情報：枠線・番号・区切り線・ラベルは飾りではなく内容を伝えるもの。「01 / 02 / 03」のような番号は、内容が本当に順序を持つときだけ使う
• 動き：利用者の操作と関係のないアニメーションは控えめにし、使うなら一か所に絞る。各セクションのフェードインや全カードのホバー効果は「AI が作った」ように見える定番だと指摘しています

AI 生成デザインに多い特徴

SKILL.md は、現在の AI 生成デザインが集まりがちな傾向を5つ挙げています。要約すると、(1) クリーム色の背景に高コントラストのセリフ体とテラコッタ系の差し色、(2) ほぼ黒の背景に蛍光グリーンや朱色の差し色を一つ、(3) 細い罫線と角丸なしの新聞風レイアウト、(4) 同じ角丸・同じ影のカードを並べ、グラデーションで飾る SaaS 風、(5) 題材に関係なく現れる飾り（見出し上の大文字ラベル、中黒でつないだメタ情報、等幅フォントの小ラベル、リンク末尾の矢印など）です。どれもふさわしい場面はあるとしたうえで、依頼が見た目を指定していればその通りにし、指定がない部分ではこれらに頼らないよう求めています。

進め方：計画、照合、実装、自己批評

1. 最初に小さな設計を作る。色は名前付きの 4〜6 色の16進値、書体とその役割、レイアウトの考え方（一文の説明と ASCII のワイヤーフレーム、揃え方）、そのページ固有の原則
2. 実装前に設計を依頼内容と照らし合わせ、どんな似た依頼にも出てきそうな部分があれば直し、何をなぜ変えたかを伝える
3. そのうえでコードを書く。CSS のセレクタの詳細度がぶつかって余白などが打ち消し合わないよう注意する

抑制と自己チェック

大胆さは一か所に集中させ、周りは静かに保ち、依頼に役立たない飾りは削る、という方針です。品質の最低ラインとして、スマートフォン幅への対応、キーボード操作時のフォーカス表示、動きを減らす設定の尊重、見やすい配色を挙げています。環境が許せばスクリーンショットを撮って見直すことも勧めています。

画面の中の文章

文言もデザインの一部として扱い、次のような指針を示しています。

• 仕組みの名前ではなく、利用者がわかる言葉で呼ぶ
• 能動態を基本にし、ボタンは押すと何が起きるかをそのまま書く
• 同じ操作は流れ全体で同じ名前にする
• エラーは何が起きてどう直すかを具体的に書き、謝らない
• 空の画面は次の行動への誘いにする

付属ファイルと出力

フォルダには SKILL.md と LICENSE.txt しかありません。出力は、計画（配色・書体・レイアウト・原則）と、それに沿って書かれた HTML/CSS などのフロントエンドのコードです。

Claude Code（プラグインマーケットプレイスから）

リポジトリの README によると、このリポジトリ自体を Claude Code のプラグインマーケットプレイスとして登録できます。

/plugin marketplace add anthropics/skills
/plugin install example-skills@anthropic-agent-skills

/plugin の画面から「Browse and install plugins」→「anthropic-agent-skills」→「example-skills」→「Install now」と選んでも入ります。example-skills プラグインには、このスキルを含む複数のスキルがまとめて入っています。

公式プラグインマーケットプレイスからも入れられます（同じ名前・同じ description の SKILL.md が plugins/frontend-design に入っていることを確認）。

/plugin install frontend-design@claude-plugins-official

マーケットプレイスが見つからないと表示されたときは、公式ドキュメントの案内どおり /plugin marketplace add anthropics/claude-plugins-official を先に実行します。

Claude Code（フォルダを置く）

公式ドキュメントでは、スキルは ~/.claude/skills/<スキル名>/SKILL.md（自分の全プロジェクト）か .claude/skills/<スキル名>/SKILL.md（そのプロジェクトだけ）に置けば使えるとされています。リポジトリのフォルダを付属ファイルごとコピーします。入れたあとは、依頼内容が description に合えば自動で読み込まれるほか、/スキル名 で直接呼び出すこともできます（プラグイン経由のときは /プラグイン名:スキル名 の形）。

Claude（アプリ）と Claude API

README には、このリポジトリのサンプルスキルは Claude.ai の有料プランですでに使える状態になっていると書かれています。自作スキルのアップロード方法はヘルプ記事「Using skills in Claude」に、API での使い方は Skills API のクイックスタートに案内されています。

• 指示だけのスキルで、特定のフレームワークや部品集は入っていません。実装に使う技術は会話やプロジェクトに合わせて決まります。
• 依頼で見た目が指定されているときは、それが常に優先されると明記されています。ここに挙げられた「定番の見た目」も禁止ではなく、指定がない部分で既定値として使わないという位置づけです。
• 自己チェックのスクリーンショットは、環境が対応している場合に限られます。
• 同じ内容のスキルは、Anthropic の公式プラグインマーケットプレイス（anthropics/claude-plugins-official）にも frontend-design プラグインとして収録されています。
• ライセンスはフォルダ内の LICENSE.txt で Apache License 2.0（著作権表示の付録を含まない条文のみの版）。