AIにWebページを作らせたことがあるなら、きっとこう感じたでしょう。ちゃんと動くけれど、どこかで見たことがある。同じ紫のグラデーション、同じ中央揃えの見出し、同じカードの並び。デザイン系スキルの大部分は、まさにこの問題に取り組んでいます。モデルに「デフォルト」ではなく、意識的なデザインの判断をさせることです。
この記事の各スキルには、出典を明記しました。Anthropicの公式リポジトリはanthropics/skills、コミュニティや企業のリポジトリは別に印をつけています。
frontend-design: デフォルトから抜け出す
公式リポジトリのfrontend-designスキルの説明は明快です。新しいUIを作るとき、あるいは既存のUIを作り直すときに、「意図的で、際立ったビジュアルデザイン」のための指針を与えます。美的な方向性、タイポグラフィ、「テンプレートのように見えない」選択をする手助けをしてくれます。
スキルの本文は、モデルにデザインスタジオのデザインリードという役割を与え、クライアントがありきたりな提案をすでに退けていると仮定して仕事を始めさせます。これは、よいスキルの書き方の例でもあります。情報を詰め込む代わりに、モデルにはっきりした視点を与えるのです。
Web成果物: web-artifacts-builderとwebapp-testing
- web-artifacts-builder(公式): claude.aiで、React、Tailwind CSS、shadcn/uiなどのモダンなフロントエンド技術を使い、複数のコンポーネントや状態管理、ルーティングが必要な複雑なHTML成果物を作るためのツールセットです。説明は、単純な1ファイルのHTMLの仕事には使わないようにとも述べています。フォルダには、プロジェクトを初期化するスクリプトと、1ファイルにまとめるスクリプトがあります。
- webapp-testing(公式): ローカルのWebアプリをPlaywrightでテストするためのツールセットです。フロントエンド機能の検証、UIのバグのデバッグ、スクリーンショットの取得、ブラウザログの読み取りに使えます。デザインを作ったあとの「ほんとうに動くの?」という問いへの答えです。
ビジュアルアート: canvas-design、algorithmic-art、slack-gif-creator
Anthropicのリポジトリには、「クリエイティブ」な側面を代表するスキルがあと3つあります。
- canvas-design: ポスターやアート作品、静止したデザインを.pngと.pdfで作るために、「デザイン哲学」のアプローチを使います。フォルダには80を超えるフォントファイルがあります。説明は、既存のアーティストの作品をコピーしないことを明確に条件としています。
- algorithmic-art: p5.jsを使い、シード付き乱数とインタラクティブなパラメータでジェネレーティブアートを作ります。フローフィールドやパーティクルシステムのような依頼向けに設計されています。
- slack-gif-creator: Slack向けに最適化されたアニメーションGIFを作るための制約、検証ツール、アニメーションのアイデアを提供します。「XがYをしているSlack用GIFを作って」のような依頼向けです。
コミュニティから: VercelのUIとReactのスキル
公式リポジトリ以外で最もよく知られたデザイン系パッケージの1つが、Vercelのvercel-labs/agent-skillsリポジトリです。2026年10月時点で、リポジトリには次のものがあります。
| スキル | 何をする? |
|---|---|
| web-design-guidelines | アクセシビリティ、パフォーマンス、ユーザー体験にわたる100以上のルールで、UIコードを監査する |
| vercel-react-best-practices | VercelのエンジニアリングによるReactとNext.jsのパフォーマンスルール(8カテゴリで40以上) |
| vercel-composition-patterns | スケーラブルなReactコンポーネント構成のパターン |
| vercel-react-view-transitions | ReactのView Transition APIによるなめらかな遷移アニメーション |
| vercel-react-native-skills | React NativeとExpo向けのパフォーマンスとアーキテクチャのルール |
これらのスキルは、特定のツールに縛られません。Vercelのリポジトリはnpx skills add vercel-labs/agent-skillsコマンドでの導入を勧めていて、スキルはAgent Skills標準をサポートするさまざまなエージェントで使えます。
どれをいつ使う?
実用的な順序は、たとえばこうです。frontend-designでデザインの方向性を決め、色とフォントはtheme-factoryか自分のブランド用スキルで固定し、成果物はweb-artifacts-builderで作り、web-design-guidelinesで監査して、webapp-testingでブラウザ上で試す。それぞれが別の専門性を持っていて、段階的読み込みのおかげで、すべてを同時に導入していてもコンテキストは膨らみません。
注意が1つあります。これらのスキルの一部(たとえばweb-artifacts-builder)はスクリプトを実行します。Claudeのドキュメントは、スキルをソフトウェアのインストールのように扱い、信頼できる提供元のものだけを入れるよう勧めています。公式リポジトリ以外のパッケージは、導入前にSKILL.mdとスクリプトに目を通すのがよい習慣です。
AIによるデザインは、時間とともにもっと多様になると思いますか。それとも、みんなが同じスキルを使うほど、新しい「画一化」が生まれるでしょうか?