AIにWebページを作らせると、なぜか毎回そっくりな見た目になる——紫のグラデーション、無難なフォント、余白の少ないボタン。「AIっぽいUI」と揶揄されるこの既視感には、ちゃんと処方箋がある。Claudeの「Skill(スキル)」だ。
Skillは、Claudeに特定分野の作法を先に読み込ませる仕組み。UIデザイン向けのSkillを入れておくと、コードを書き始める前に「良いデザインの原則」を踏まえてくれる。今回は、実際に効くおすすめの3つを紹介する。
そもそも「Skill」とは
Skillは、Claudeに渡す「専門分野のマニュアル集」のようなものだ。必要になった場面で自動的に読み込まれ、その分野のプロの作法でふるまわせる。UIデザインなら「余白の取り方」「配色の考え方」「フォント選び」といった暗黙知を、あらかじめ仕込んでおけるわけだ。
UIデザインに効く3選
数あるSkillのなかで、UI・見た目づくりに直接効く公式のものを3つ挙げる。
| Skill | 何をしてくれる | 向く場面 |
|---|---|---|
| frontend-design | コードを書く前にデザインの哲学と原則を与え、「典型的なAIっぽさ」を回避。大胆な配色・書体・動きへ導く | Webページ・アプリUI全般 |
| artifact-design | 成果物(アーティファクト)にAnthropic流の配色・タイポの作法を適用し、体裁を整える | 共有用の一枚もの・資料 |
| dataviz | グラフ・ダッシュボードの配色や見せ方を体系化。明暗テーマ両対応で一貫性を担保 | 数字を見せる画面・図表 |
とくにfrontend-designは、あの「紫グラデ問題」への直接の回答として作られている。導入の一次情報は公式ドキュメントが確実だ。
code.claude.com Claude Code公式ドキュメント「Skills」 Skillの仕組み、作り方、呼び出し方の一次情報。まずは公式Skillの挙動を押さえるならここ。使いどころと、選ぶときの注意
公式以外にも、有志が公開したデザイン系Skillは数多い(「Taste」や「UI-UX-Pro-Max」など人気のものがある)。ただし玉石混交で、出所や中身を確かめずに入れるのは避けたい。筆者としては、まず公式の3つを土台に据え、物足りない部分だけ有志のSkillで補うのが安全だと考える。Skillは足すほど良いわけではなく、多すぎると指示が濁る。数より「効く1枚」を選ぶ発想がちょうどいい。増えすぎたSkillの海から目当てを探す方法は、「skillを探すskill」の記事で扱う。
「AIっぽさ」は、仕込みで消せる
AIが作るUIが似通うのは、AIの限界ではなく「作法を教えていない」だけのことが多い。良いSkillを1枚仕込むだけで、出てくる画面の質は目に見えて変わる。次にClaudeにUIを頼むときは、いきなり「作って」と言う前に、frontend-designを効かせてみてほしい。紫グラデから抜け出す第一歩は、驚くほど小さい。
出典: Claude Code公式「Skills」 / Claude Code公式「Artifacts」。2026年7月14日時点。
