Claude Codeのデザインskills｜AIっぽい見た目を減らす入れ方と作り方

Claude Codeに「会社のWebページを作って」と頼むと、崩れはないのに、どこかで見たような見た目が出てきます。黒に近い背景に朱色が1色、見出しの上の英字ラベル、01・02と番号の付いた同じ形のカードです。

頼むたびに色や字体も変わるので、社外に出すものほど「会社らしく直して」と言葉で伝え直す手間が増えます。デザインskills（見た目の決まりを書いた手順書）は、この2つを入口で止める仕組みです。

やることは3つです。

• 公式のデザインスキル（frontend-design）を作業フォルダに入れる
• 自社の色・文字・使わないものを1枚に書かせ、スキルにする
• 2つを手順書の中でつなぎ、作ったあとは画面で点検させる

この3つで、AIっぽい形の癖と、頼むたびの色のばらつきが減ります。この記事では、Claudeのアプリでの入れ方と置き場所、コピペできる日本語の指示文、同じ頼み方で5通り作らせたWebページの実画面までを示します。

Saix自身、デザインの決まりを1枚の基準（色・字体・やらないこと18項目・作ったあとの点検14項目）にまとめています。見た目を作るスキル11本が、それを読みに行く形で運用中です。作り手であり使い手でもある立場から、机上論ではなく手を動かす前提で書きます。

Claude Codeのデザインskillsとは｜色・文字・余白の決まりを、作る前に読ませる仕組み

Claude Codeのデザインskillsとは、見た目の決まりを書いたスキルのことです。スキルは、Claudeに仕事の進め方を教える手順書で、SKILL.md という決まった名前のファイル1枚が中心になります。

デザイン専用の特別な機能があるわけではありません。中身が「色・文字・余白・使わないもの」の手順書を、見た目の仕事のときだけ読ませる使い方を、この記事ではデザインskillsと呼びます。

先に3つの言葉をそろえます。アプリ（Claudeのデスクトップアプリ）は操作する場所、作業フォルダはファイルの置き場所、手順書は作業フォルダの中に置くファイルです。置き場所の図は入れ方の章で見せます。

デザインskillsとは：色・文字・余白・使わないものを書いた手順書を、見た目を作るときだけ読ませる

公式ドキュメントによると、手順書の先頭には名前と説明を書き、その下に手順を書きます。説明は、Claudeがそのスキルを自動で読み込むかどうかを決める手がかりです（Claude Code公式ドキュメント：Claude をスキルで拡張する）。

常に読まれるのは名前と説明の一覧だけで、手順の本文は呼ばれたときに読まれます。決まりを細かく書いても、見た目と関係ない仕事は重くなりません。見本の画像や点検表など、補助のファイルも同じフォルダに添えられます。

関連資料：「Claude Code 事故防止プロンプト集」（PDF・無料）を配布しています。

仕組み：頼む → 説明を見てスキルが呼ばれる → 決まりを読んでから作る → 画面で見直す

流れは4段です。人が「Webページを作って」と頼むと、Claudeは手元のスキルの説明を見比べ、合うものがあれば読み込みます。読み込むと、ターミナル版の画面には「Skill（スキルの名前）」と表示されます。

そのあと決まりどおりに作り、手順書に書いてあれば、出来上がりを画像に書き出して見直します。今回の練習では、スキルの名前を一度も書かずに頼んでも、説明に合う依頼だと判断されて呼ばれました。

入れないと起きること・入れると減ること・入れても残ること：ばらばらとAIっぽい癖は減る、中身の言葉と構成の良し悪しは残る

Anthropic公式のスキル frontend-design の本文は、いまのAIが作る画面に出やすい癖を5つ名指ししています（Anthropic公式：frontend-design プラグイン）。

公式が挙げる癖	日本語で言うと	スキルなしの画面
1	クリーム色の背景に、明朝の太い見出しとテラコッタ（赤茶）色	出なかった
2	黒に近い背景に、蛍光の緑か朱色を1色だけ	出た（黒に近い紺に朱色）
3	新聞のような細い罫線と、角の丸みがない詰まった段組み	出なかった
4	同じ形のカードを並べ、同じ薄い影と飾りのグラデーション	一部出た（同じ形のカードが4枚）
5	見出しの上の英字の大文字ラベル、中黒でつないだ英字、ボタンの矢印	出た（SINCE 1968・ABOUT など）

公式自身、これらは「題材に関係なく出てくる既定で、選んだ結果ではない」と書いています。AIっぽさは腕の問題ではなく、決まりが無いと平均の形に寄る、という問題です。

入れると減るのは、この形の癖と、頼むたびの色や字体のばらつきです。入れても残るのは、何を載せるかという中身です。今回も、載った数字と文言は材料のファイルどおりで、スキルの有無では変わりませんでした。

公式リポジトリも、スキルは見本として示したもので、使う前に自分の環境で試すよう書いています。入れたら1回作らせ、画面で確かめるところまでが入れる作業です。

Claude Codeのデザインskills【公式】｜最初から使えるものと、見た目専用の1本の違い

公式のデザイン系スキルは、置き場所で3つに分かれます。Claude Codeに最初から入っているもの、公式のプラグイン一覧から追加する1本、公式スキル集の見本です。

プラグインとは、スキルや道具をまとめて配る入れ物のことです。マーケットプレイス（プラグインの一覧）から選んで入れます。Anthropic公式の一覧は、Claude Codeを初めて使うときに自動で登録されます。

Webページの見た目を整えるなら、まず公式の1本：題材から考え、字体を選び、案を見直してから作らせる

Webページや画面を作るなら、最初に試すのはfrontend-design（フロントエンドデザイン）です。公式のプラグイン一覧にあり、説明には「ありふれたAIの見た目を避ける」と書かれています。

本文を読むと、決まりは次の4つにまとまります。

• 題材から考える業種・素材・現場の言葉から見た目を決める。題材が書かれていなければ、自分で決めて確かめる
• 字体を選ぶ1〜2種類を意図して選び、大きさと太さの段差をはっきりさせる
• 先に計画し、見直してから作る色4〜6色・字体・配置・原則を書き出し、似た依頼でも同じになる平凡な部分を直してから作る
• 飾りは1か所に絞る目立たせるのは1か所だけ。作りながら画面を撮って見直す

今回の練習でも、このスキルを読んだClaudeは最初に「板を曲げる前の平らな図（展開図）を主役にする」と方針を書いてから作りました。結果は比較の章で並べます。

中身は文字だけの手順書1枚で、プログラムや外への送信は含まれていません。利用の許諾はApache 2.0（改変や再配布を認める無料の利用条件）です。

この内容を自社に当てはめたい方は、無料のAI活用セッションで相談することもできます。

最初から入っているもの：グラフ・画面の下書き・スライド（後の2本は使える条件がある）

Claude Codeには、追加しなくても使えるスキルが同梱されています。見た目に関わるのは、グラフの /dataviz、画面の下書きの /design、スライドの /slides の3つです（Claude Code公式ドキュメント：コマンド）。

/dataviz は、グラフの形と色を選び、色の見え方に違いがあっても見分けられるかを、付属のスクリプト（小さなプログラム）で確かめます。

/design と /slides は、作業フォルダのファイルではなく、claude.ai上のアーティファクト（Claudeの画面で開けるページ）として作られます。Claude Code v2.1.265以降で、アーティファクトとテンプレートが使えるアカウントに限られます。

会社のWebページを作業フォルダのファイルとして残すなら、frontend-designか自社の手順書で作らせるほうが手元で直せます。

公式の見本：ポスター用やテーマ集は、自社の色に書き換える型として使う

Anthropicは、スキルの見本を集めた公式リポジトリ（GitHub上のファイル置き場）も公開しています（Anthropic公式：anthropics/skills）。19本のうち、見た目に関わるのは次の5本です。

名前	作れるもの	こう使う
canvas-design	ポスターや1枚ものの絵（PNG・PDF）	展示会のポスターやチラシの下絵
theme-factory	用意された10種類の色と字体の組み合わせを、スライドや資料に当てる	自社の色が決まっていないときの叩き台
brand-guidelines	Anthropic社の色と字体を当てる	自社の色と字体に書き換えて、自社版の型にする
web-artifacts-builder	部品の多い複雑な画面（React＝画面を部品で組み立てる仕組みを使う）	入力や切り替えのある画面だけ。1枚のページには不要
algorithmic-art	図形のプログラムで描く絵	背景や飾りの絵

有料プランのClaude（チャット版）では、これらの見本は最初から使えると公式リポジトリに書かれています。

見本は「そのまま使う物」ではなく「書き換える型」です。特にbrand-guidelinesは中身がAnthropic社の色なので、自社の色に差し替えて初めて役に立ちます。

Claude Codeのデザインskillsの入れ方｜アプリの「＋」から入れるか、作業フォルダに置くか

入れ方は2つあり、どちらか1つでかまいません。準備として、Claudeのデスクトップアプリを開き、上の「Code」を選んで作業フォルダを開いておきます。アプリのCodeの画面は有料プランで使えます（Claude Code公式ドキュメント：概要）。

2つの違いは、手順書の本体がどこに入るかです。方法Aは本体をアプリが管理し、方法Bは作業フォルダの中に本体が見えるかたちで入ります。

方法A（アプリの画面）：「＋」から公式スキルを選ぶ。実画面は効く範囲を選ぶところまで

公式ドキュメントの手順は3段です。入力欄の横の「＋」を押して「Add plugins」を選び、一覧からfrontend-designを選び、効く範囲を選びます。

「＋」の中に「Plugins」と出たときは「Plugins」→「Browse plugins」の順です（Claude Code公式ドキュメント：プラグインのインストールと管理）。

範囲は3つです。選んだ範囲によって、入れたことを記録する設定ファイルが変わります。

範囲	効く場所	記録されるファイル	向いている人
ユーザー	このパソコンの全部の作業フォルダ	ホームフォルダの .claude の中の設定ファイル	どの仕事でも同じ見た目にしたい個人
プロジェクト	この作業フォルダを使う全員	作業フォルダの .claude の中の、共有する設定ファイル	チームでそろえたい
ローカル	この作業フォルダの自分だけ	作業フォルダの .claude の中の、自分専用の設定ファイル	まず自分だけで試したい

この記事の撮影では、作業用のMacの全体の設定を変えないため、範囲を選んで入れる操作はしていません。まず試すならローカル、チームでそろえるならプロジェクトを選びます。

プロジェクトを選んでも、各自のパソコンで1回入れる操作が要ると公式に書かれています。ターミナル版では /plugin と打つと同じ一覧が開きます。

関連資料：「Claude Code 事故防止プロンプト集」（PDF・無料）を配布しています。

方法B（作業フォルダの中）：手順書をフォルダごと置き、その作業フォルダで使える状態まで確かめる

方法Bは、作業フォルダの中の「.claude」→「skills」に、スキルのフォルダごと置く方法です。公式ドキュメントでは「プロジェクト」の置き場所と呼ばれ、その作業フォルダで開いた会話で使われます。

自分でファイルを置いてもかまいませんが、アプリに日本語で頼むのが確実です。作業フォルダを開いたアプリのCodeの画面に、次の文を貼ります。

Anthropic公式の frontend-design スキル（GitHub の anthropics/claude-plugins-official の plugins/frontend-design/skills/frontend-design）を、この作業フォルダの .claude/skills/frontend-design/ に、SKILL.md と LICENSE.txt のまま入れてください。中身は書き換えないでください。入れたら、フォルダの中身と SKILL.md の先頭4行を見せてください。

ここで1つつまずきました。会話を始めたときに「.claude」→「skills」のフォルダが無かった場合、置いただけでは一覧に出ません。公式ドキュメントのとおり /reload-skills と打つと「1 added（1本追加）」と表示され、使えるようになりました。新しい会話を始めても同じです。

共通の確かめ方：一覧に出る・頼んだときに使ったと表示される・見た目に反映される

入ったかどうかは3段で確かめます。1段目は一覧です。/skills と打って検索欄に名前の一部を入れると、使えるスキルに印が付いて並びます。

2段目は、頼んだときの表示です。名前を書かずに「Webページを作って」と頼み、「Skill（frontend-design）」と出れば、説明に合う仕事として呼ばれています。

3段目は出来上がりです。ブラウザで開き、スキルなしで作ったときと見比べます。アプリとターミナルは作業フォルダの同じ設定を読むので、どちらで頼んでも同じスキルが使われます。

ゴール：/skills の一覧に frontend-design が出て、名前を書かずに頼んだときに「Skill（frontend-design）」と表示されていればOKです

Claude Codeのデザインskillsを自社の基準で作る｜色・文字・使わないものを1枚に書く

公式のスキルは「AIっぽくしない」までは面倒を見てくれますが、どの会社の色かは知りません。会社らしさを出すには、自社の基準を1枚に書き、それを読む手順書を作ります。

Saixの実物：色・文字・角丸・使わない色・やらないこと・作った後の点検を1枚に書き、11本のスキルが読みに行く

Saixは、デザインの決まりを1枚の基準にまとめています。中身は、色の役割と色番号、字体と大きさ、角の丸み、使ってはいけない色、やること14項目とやらないこと18項目、作ったあとの点検14項目です。

Saixのスキル118本のうち11本が、この1枚を名指しで読みに行きます。提案資料・セミナー資料・YouTube用スライド・サムネイル・ホームページなど、見た目を作るスキルです。決まりを1か所に置いたので、色を変えるときに直す場所は1つで済みます。

基準には、事故から足した節もあります。濃い背景の上の太字が沈んで読めなかったこと、PDFにしたら枠がページの境目で切れたこと。起きるたびに「やらないこと」と点検に1行ずつ足してきました。

この内容を自社に当てはめたい方は、無料のAI活用セッションで相談することもできます。

自社の基準を書かせる：1枚にまとめ、手順書と一緒に置いてアプリで確かめる

自社の基準は、手元の資料から書かせるのが早道です。練習用フォルダの「材料」に、架空の金属加工の会社の会社案内の決まり（ロゴの色・差し色・使わない飾り・社長の口ぐせ）を置き、次の文を貼りました。

材料フォルダの「会社案内の決まり.md」と「会社の説明.md」を読んで、この会社のWebページ・資料・図に共通で使うデザインの基準を1枚にまとめてください。①使う色（色の名前と色番号） ②文字（字体・大きさ・太さ） ③余白と角の丸み ④使わない色・形・飾り ⑤作ったあとに確かめる項目、の5つの見出しで書き、.claude/skills/jisha-design/デザイン基準.md に保存してください。続けて同じフォルダに SKILL.md を作り、Webページ・資料・図を作る依頼のときに、作る前にこの基準を読み、作ったあとに⑤の項目で点検してから報告するスキルにしてください。

40秒で、基準のファイルと手順書の2つができました。材料に書いてあった決まりと、材料に数字が無いためClaudeが決めた初期値は、【原本】【補足案】のラベルで分けて書かれました。

補足案のラベルは、あとで人が直す場所の目印になります。文字の大きさや角の丸みは会社ごとに好みが分かれるので、まず補足案のまま作らせ、画面を見て直します。

手順書の説明には、呼ばれるきっかけの言葉が入りました。「Webページ・資料・図を作る依頼のときに使う」の一文です。置き場所は方法Bの図と同じで、「.claude」→「skills」→「jisha-design」の中です。

同じ手順書を置いた作業フォルダで、名前を書かずに「Webページを作って」と頼むと、自社の手順書が呼ばれました。作ったあとには、画面に書き出して10項目を照合した結果まで返ってきます。

型を写して中身だけ替える：決めた見本を複製して、文字だけ差し替えさせる

毎回ゼロから作らせると、同じ基準でも配置が少しずつ変わります。資料のように形が決まっているものは、1枚の見本を決めて複製させるほうがそろいます。

Saixでは、提案スライド・セミナー資料・YouTube用スライド・見積書・請求書などの6本が、見本のファイルを複製して文字だけ差し替える作りです。提案スライドの手順書は冒頭に「デザインを毎回作らない」と書き、色や配置の書式（CSS）には触らせません。

決まりを文章で守らせるより、守った見本を写させるほうが崩れません。気に入った1枚ができたら見本として保存し、手順書に「この見本を複製し、文字と数字を差し替える」と書き足します。

応用：3〜5案を並べて選ぶ／作ったら画面を撮って自分で見直させる

Saixには、見た目は1案で決めず、3〜5案を画像で並べて選ぶという決まりがあります。「もう少し落ち着いた感じ」と言葉で伝えるより、目で見て選ぶほうが速く正確だからです。自社の基準を置いたフォルダで、次の文を貼りました。

自社のデザイン基準の範囲で、トップページの一番上（最初に見える部分）だけを3案作り、3案.html という1つのファイルに縦に並べてください。案ごとに、何を一番目立たせたかを1行で添えてください。最後に、おすすめの案と理由を1つだけ教えてください。

48秒で、納期の数字を主役にした案、言い切りの見出しの案、数字3つを並べた案ができました。どの案も会社の色と朱色の使い方は基準どおりです。基準があると、案の幅が「崩れ方の違い」ではなく「主役の違い」になります。

報告には「案Bは画面の幅によっては行の途中で折り返す」とも書かれていました。手順書に「作ったら画面で確かめる」とあるので、Claude自身が画面を見て気づいた点です。

作った手順書は、ほかのAIでも同じ形で使えます。OpenAIのCodexは、作業フォルダの「.agents」→「skills」に置いた同じ形の手順書を読みます（OpenAI公式：Build skills）。Claudeのチャット版にも、スキルを追加する画面があります。

Claude Codeのデザインskillsあり・なしの比較｜同じ頼み方・4条件でWebページを作らせた

同じ依頼文で、条件を4つ変えてWebページを作らせました。そろえたのは、モデル（Sonnet 5.5）・依頼文・材料のファイル・毎回新しい会話の4点です。各条件1回ずつの実例なので、いつも同じ結果になるとは言い切れません。

作業用のMacに入っているほかのスキルは、練習用フォルダの設定で止めました。条件ごとに変えたのは、作業フォルダに置いた手順書だけです。依頼文はこれです。

材料フォルダの「会社の説明.md」を読んで、株式会社サンプル（架空の金属加工の会社）のサービス紹介のWebページを1枚作ってください。index.html という名前でこのフォルダに保存してください。画像ファイルは使わず、HTMLとCSSだけで作ってください。

HTMLはWebページの中身を書く形式、CSSは色や配置を決める書式です。

条件	呼ばれたスキル	表示された作業時間	見た目の特徴
1 スキルなし	なし	44秒	黒に近い紺に朱色、英字ラベル、01〜04の番号つきカード
2 公式のスキル	frontend-design	59秒	鋼の灰色、展開図が主役、カードでなく罫線の表
3 自社の基準	jisha-design	51秒	会社の紺に朱色2か所、数字と納期が先頭、番号つきカードは残った
4 両方を置いた	jisha-design だけ	39秒	条件3とほぼ同じ

条件1 スキルなし：同じ依頼文で頼むと、崩れはないが英字ラベルと番号つきカードが並んだ

スキルなしでも、崩れや読みにくい色はありませんでした。見出しの上には「SINCE 1968」「ABOUT」「SERVICE」と英字の大文字ラベルが付き、サービスは01〜04の番号つきカードで並びました。

公式の5つの癖のうち、黒に近い背景に1色と、英字の大文字ラベルの2つがそのまま出ています。公式は、番号は中身が手順や時系列のときだけ付けるものだと書いています。ここでは順番の無い4つのサービスに番号が付きました。

関連資料：「Claude Code 事故防止プロンプト集」（PDF・無料）を配布しています。

条件2 公式のデザインスキルあり：板を曲げる前の展開図が主役になり、英字ラベルが消えた

公式のスキルを置いたフォルダでは、Claudeが最初に「展開図を主役にする」と方針を書きました。最初の画面の右には、曲げ線と寸法の入った板の図が線で描かれています。

英字ラベルと番号つきカードは消え、サービスは罫線で区切った表になりました。題材の金属加工から見た目を決める、という公式の決まりがそのまま効いています。

ただし色は鋼の灰色と濃い青で、会社のロゴの紺ではありません。公式のスキルは会社の色を知らないので、色は自社の基準で決める必要があります。

条件3 自社の基準のスキルあり：会社の色と「数字と納期」が先頭に来たが、番号つきカードは残った

自社の基準を置いたフォルダでは、会社の紺に、朱色は相談ボタンと「最短3営業日」の2か所だけでした。社長の口ぐせ「数字と納期をはっきり書いて」のとおり、数字の帯が最初の画面のすぐ下に来ています。

一方で、01〜04の番号つきカードは条件1と同じく残りました。基準に書いたのは色と字体と使わない飾りで、「番号を付けない」とは書いていなかったからです。

条件4 公式と自社基準の両方：呼ばれたのは自社の基準だけで、見た目は条件3とほぼ同じ

公式と自社の2本を同じフォルダに置くと、呼ばれたのは自社の手順書だけでした。公式の手順書は最後まで読まれず、見た目は条件3とほぼ同じです。

どちらの説明も「Webページを作る」に当てはまるので、会社名まで書いてある自社の手順書が選ばれたと考えられます。2本を両方効かせる方法は、次の失敗の章で示します。

Claude Codeのデザインskillsの失敗と対策｜呼ばれない・片方しか動かない・作って見ない

失敗1：説明に「Webページ」「資料」など頼む言葉が無く、スキルが呼ばれない

スキルが呼ばれるかどうかは、説明の一文でほぼ決まります。今回の自社の手順書は、説明に「Webページ・資料・図を作る依頼のときに使う」と入っていたので、名前を書かずに頼んでも毎回呼ばれました。

説明には、社内で実際に使う頼み方の言葉をそのまま入れます。「LP」「チラシ」「提案書」と呼んでいる会社なら、その言葉です。それでも呼ばれないときは、頼む文の先頭に「/jisha-design」のようにスキルの名前を書けば、そのスキルが使われます。

関連資料：「Claude Code 事故防止プロンプト集」（PDF・無料）を配布しています。

失敗2：公式と自社の2本を置いただけで、片方しか呼ばれない：手順書の中でつなぎ、自社の基準を優先と書く

条件4のとおり、2本を並べて置いただけでは片方しか呼ばれませんでした。直し方は、自社の手順書の中で公式の手順書を指し、どちらを優先するかを書くことです。次の文を貼りました。

.claude/skills/jisha-design/SKILL.md の「2. 作る」に、次の2行を書き足してください。「見た目の方向づけ（題材から考える・案を見直す）は、.claude/skills/frontend-design の手順も読んで使う」「色・文字・使わないものは、frontend-design よりこの基準を優先する」。書き足したら、その部分だけ見せてください。

新しい会話で同じ依頼文を貼ると、自社の手順書が呼ばれたうえで、公式の手順書も読みに行きました。

色は会社の紺と朱色のまま、01〜04の番号つきカードが消えて、サービスは表で並びました。書き足しの言い方を変えてもう一度作らせても、番号つきカードは消えていました。2本を活かす鍵は、置くことではなく、手順書の中で順番と優先を書くことです。

失敗3：作らせて画面を見ずに出し、文字のはみ出しや読みにくい色に気づかない

作ったHTMLの文字だけを見て「完成」とするのが3つ目の失敗です。はみ出しや読みにくい色は、画面にしか出ません。公式のfrontend-designも、作りながら画面を撮って見直すよう書いています。

Saixの決まりも同じで、見た目を作るスキルは、出来上がりを画像にしてClaude自身が開いて見るまで、人に見せないことにしています。手順書の最後に「画面に書き出し、点検項目を1つずつ照合してから報告する」と書くと、Claudeが自分で確かめます。

今回の自社の手順書でも、画面なしのブラウザ（Chrome）で書き出して10項目を照合し、3案のときは折り返しが気になる案まで報告されました。

失敗4：見た目の決まりを、毎回読まれる共通の決まりのファイルに全部書いて重くなる

作業フォルダの決まり（CLAUDE.md）は、会話のたびに必ず読まれるファイルです。ここに色番号から点検表まで全部書くと、見た目と関係ない仕事でも毎回読まれ、ほかの指示が薄まります。

スキルは、名前と説明だけが常に読まれ、本文は呼ばれたときに読まれます。見た目の決まりはスキルの側に置き、CLAUDE.mdには「見た目を作るときはデザインのスキルを使う」の1行だけ書きます。

Saixも752行の基準を毎回読まれる場所には置かず、HTMLや画像のファイルを触ったときだけ読まれる案内から、基準へ誘導しています。

Claude Codeのデザインskillsでよくある質問

Q. 公式のデザインスキルを入れると、会社の情報が外に送られませんか

frontend-designの中身は文字だけの手順書1枚で、外へ送る仕組みはありません。ただしプラグインは、自動で動く処理や外部の道具も一緒に入れられます。入れる前に詳細の画面で中身を確かめ、作業フォルダに置く方法ならファイルを開いて読んでから使います。

Q. デザインskillsは何本まで入れてよいですか

決まった上限はありませんが、作業フォルダごとに公式1本と自社1本から始めると分かりやすくなります。説明は常に読まれるので、増やすほど呼び間違いが増えます。同じ名前が個人用と作業フォルダの両方にあると個人用が優先されるので、名前は重ねません。

Q. 無料プランでもデザインskillsは使えますか

アプリのCodeの画面とClaude Codeは有料プランが前提です。公式スキル集の見本も、チャット版では有料プランで使えると書かれています。無料でできるのは、公式リポジトリの手順書を読み、決まりの書き方を自社の基準づくりの参考にするところまでです。

Claude Codeのデザインskillsのまとめ｜まず公式を1本、次に自社の基準を1枚

Claude Codeのデザインskillsは、色・文字・使わないものの決まりを書いた手順書で、見た目を作る前にClaudeが読みます。公式のfrontend-designは、アプリの「＋」から入れるか、作業フォルダの「.claude」→「skills」に置きます。

同じ依頼文で比べると、スキルなしでは英字ラベルと番号つきカードが並び、公式では題材の展開図が主役になり、自社の基準では会社の色と数字が先頭に来ました。2本を置いただけでは片方しか呼ばれず、手順書の中でつなぐと両方が効きました。

次の一手は、自社の会社案内やサイトの色を材料に置き、この記事の指示文で基準を1枚書かせることです。手順書の作り方全般はClaude Skillsの作り方、作業フォルダの決まりを先に整えるなら事故防止プロンプト集が使えます。