← すべての記事

Claude Codeの/designスキル:リサーチプレビューでできること

ガイドより: Claude Code Comprehensive Guide

Claude Codeの/designスキルは、Anthropicの第34週ダイジェスト(2026年8月17日から21日)で発表されたリサーチプレビューです。ブリーフを渡すと、編集可能なUIアートボードのキャンバスをアーティファクトとして公開します。その中から1つを選び、手を加え、Claudeに実装を指示する流れです。CLIとClaude Code Desktopで動作し、v2.1.233以降が必要で、Pro、Max、Team、Enterpriseの各プランで利用できます。1 アーティファクトに公開する仕組みのため、アーティファクトの前提条件も適用されます。つまり、Anthropic API上でclaude.aiアカウントにサインインしたセッションが必要です。5 ローンチ時点の公開情報は短い3ページ(ダイジェスト、スキル自身の説明文、そしてダイジェストがリンクするアーティファクトの提供状況ページ)にとどまるため、この初見レポートも短くまとめます。Anthropicがこのスキルについて何をすると述べているか、何が返ってくるか、何が必要か、そして文書化された範囲がどこで終わるかです。 {.answer-block}

TL;DR

  • コマンド1つでキャンバス1つ。 /design <brief>を実行すると、Claudeが複数アートボードのデザインを下書きし、アーティファクトとして公開します。完了するとClaudeがリンクを表示します。1
  • 結果は2階層。 アカウントで保存が許可されていれば、ビジュアルエディタと、全員に新しいバージョンを公開するSaveが使えます。それ以外の場合は、閲覧とエクスポート(PNG/PDF)のみのプレビューになります。2
  • 最低ラインはv2.1.233(2026年8月14日)で、Pro、Max、Team、EnterpriseのいずれかのプランでCLIまたはClaude Code Desktopから使います。加えてアーティファクトの前提条件として、Anthropic API上でのclaude.aiサインインと、組織でCMEK、HIPAA、Zero Data Retentionが無効であることが必要です。135
  • プレビューはキャンバスで止まります。 ダイジェストにも説明文にもフラグやアートボード数の上限は記載されていません。説明文は再シード(re-seeding)を認めていますが定義しておらず、既存のキャンバスを編集する場所として公開済みのArtifactを挙げています。24

/designスキルは何をするのか

Anthropicの第34週ダイジェストは1段落で説明しています。このスキルは「Claude Designのアートボードワークフローを、アーティファクトを基盤としてCLIとClaude Code Desktopに持ち込むものです。ブリーフを添えて実行すると、ClaudeがUI向けの編集可能なアートボードのキャンバスを公開します。1つを選び、手を加え、それをClaudeに実装させてください」。1 公開されている例は仕様書ではなく、プロダクトブリーフです。

> /design redesign the composer based on what people actually use it for

Claudeは公開されたキャンバスへのリンクを表示し、ダイジェストのカードにはデモ動画が埋め込まれています。1 キャンバスを開き、アートボードを選び、どの案を実装するかをClaudeに伝えます。1 スキルが担うのは最初のステップだけで、その説明文の最後の一文にもそう書かれています。「キャンバスの作成または再シードのみ。既存のキャンバスは公開済みのArtifact内で編集する」。2 2番目のステップはアーティファクトの中で行われ、3番目はコードベースに対する通常のClaude Codeの作業です。

スキルのプロダクト内説明文が仕組みを補足しています。出力を「Claude Designのキャンバスエディタ(Claude Code内でのClaude Designの早期プレビュー)を実行するArtifactとして公開される、複数アートボードのビジュアルデザイン」と呼び、「1つのパン/ズームキャンバス上に配置された.dc.htmlアートボードとして」下書きされると述べています。2 1回の実行ですべてのアートボードが1つのキャンバスに置かれ、各アートボードが.dc.htmlファイルになります。

説明文のトリガー条項により、スラッシュコマンドを入力する必要もありません。「デザイン、モックアップ、ワイヤーフレーム、UIや画面のデザイン、ランディングページ、ポスター、チラシ、パンフレット、バナー、カード、ワンページャー、あるいはコードよりも手作業で調整したいあらゆるビジュアルレイアウトを誰かが求めているとき」にこのスキルを使うようClaudeに指示しているため、モックアップを求める平易な依頼だけで/designが自動的に呼び出されることがあります。2

何が返ってくるのか

説明文は結果をアカウントによって分けています。アカウントで保存が許可されている場合は「すべての要素をビジュアルに調整でき(クリックして選択、プロパティパネル、インラインテキスト編集、取り消し/やり直し)、Saveで全員に新しいバージョンが公開されます」。それ以外の場合は「下書きの閲覧とエクスポート(PNG/PDF)のみのプレビューが提供されます」。2

説明文の範囲はアプリのUIにとどまりません。「UIモックアップと画面フロー、ランディングページ、マーケティングやソーシャル向けのグラフィック、印刷物」を挙げ、「ポスター、チラシ、パンフレットは単一ページのアートボードとして、メモやレポートは1枚の流れるアートボードとして」扱うとしています。2 ダイジェストの例はUIですが、この広い一覧もAnthropic自身による対象範囲の表明です。

何が必要なのか

項目 文書化された内容 出典
最低バージョン v2.1.233(2026年8月14日)以降 ダイジェスト、リリースノート13
プラン Pro、Max、Team、Enterprise ダイジェスト1
利用面 CLIとClaude Code Desktop ダイジェスト1
出力 Claude Designのキャンバスエディタを実行するArtifact スキル説明文2
アートボード形式 .dc.html、1つのパン/ズームキャンバス スキル説明文2
フル編集 アカウントで保存が許可されている場合のみ スキル説明文2
フォールバック 閲覧とPNG/PDFエクスポート スキル説明文2
アーティファクト:プラン Pro、Max、Team、Enterpriseのいずれか。Teamではアーティファクトがデフォルトで有効、EnterpriseではOwnerがclaude.aiの管理設定で有効化する アーティファクトの提供状況5
アーティファクト:認証 CLIまたはデスクトップアプリの/loginによるclaude.aiアカウントに紐づいたセッション。APIキー、ゲートウェイトークン、クラウドプロバイダーの認証情報を使うセッションは公開できない アーティファクトの提供状況5
アーティファクト:モデルプロバイダー Anthropic API。Amazon Bedrock、Google CloudのAgent Platform、Microsoft Foundryでは利用不可 アーティファクトの提供状況5
アーティファクト:組織ポリシー 顧客管理暗号鍵(CMEK)、HIPAA、Zero Data Retentionが組織で有効化されていないこと アーティファクトの提供状況5
アーティファクト:利用面 Claude Code CLI 2.1.183以降、またはClaudeデスクトップアプリ1.13576.0以降(CLIの最低ラインは/designの最低ラインより低く、ダイジェストはデスクトップアプリの個別バージョンを挙げていない)。Agent SDK、GitHub Action、MCPサーバーの各コンテキストと、CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFICを設定した場合はデフォルトで無効 アーティファクトの提供状況5
ステータス リサーチプレビュー ダイジェスト1

claude --versionでビルドを確認してください。ダイジェストはv2.1.234からv2.1.239の期間を扱っていますが、要件はその1リリース前に設定されています。1 インストールと初回セッションの設定はクイックスタートで扱っています。

アーティファクトの行が重要なのは、ダイジェストがこのスキルを「アーティファクトを基盤とする」と呼び、/designのカードから「アーティファクトが利用できる場所」として提供状況ページにリンクしているからです。1 そこでのAnthropicの表現は厳格です。「アーティファクトには以下のすべての条件が必要です。1つでも満たされない場合、ClaudeはローカルにHTMLファイルを書き出すか、公開できないと伝えます」。5 APIキーのセッション、あるいはAmazon Bedrock、Google CloudのAgent Platform、Microsoft Foundry上のセッションは、バージョンの最低ラインを満たしていてもキャンバスを公開できません。5 同じページには、Claudeが作るすべてのアーティファクトにスタイルを適用する別の組み込みデザインスキル(v2.1.182以降)も記載されていますが、これは/designではありません。5

プレビューはどこで止まるのか

この3ページがスキル自体に関する公開情報のすべてです。Claude Design自身の製品ページはエディタについて説明しており、スキルについてではありません。推測するよりも、書かれていないことを列挙しておきます。4

  • フラグやオプションはない。 ダイジェストが示すのは/designに続く平文だけです。アートボード数、キャンバスサイズ、デバイスフレーム、出力階層を切り替えるスイッチは、ダイジェストにも説明文にも記載されていません。
  • アートボード数は明記されていない。 ダイジェストの「編集可能なアートボードのキャンバス」と説明文の「複数アートボード」が、示されている唯一の数量です。
  • 再シードは未定義。 説明文は「キャンバスの再シード」を認めていますが、再シードに何が必要かは述べておらず、既存のキャンバスについては「公開済みのArtifact内で」編集する道筋を挙げています。2
  • 保存ゲートの説明がない。 説明文は「ユーザーのアカウントで保存が有効になっている場合」と述べるだけで、どのアカウントが該当するか、実行せずに確認する方法があるかには触れていません。2 アーティファクトのページはそもそも誰が公開できるかを列挙していますが、同じ条件が編集階層にも適用されるかは明記されていません。5
  • 実装についての説明がない。 ダイジェストはどの案を実装するかをClaudeに伝えるとしていますが、その後Claudeが.dc.htmlアートボードを読むのか、こちらの説明をもとに作業するのかは語られていません。1

ダイジェストはこのスキルをリサーチプレビューと位置づけているため、上記のいずれも予告なく変わる可能性があります。1

第34週には他に何が出荷されたのか

ダイジェストには他に2つの目玉機能が並んでいます。Conciseは新しい組み込み出力スタイル(v2.1.237)で、Claudeは結果を先に述べて前置きを省きつつ、作業の徹底度はDefaultと変わらず、エラー報告、セキュリティ警告、破壊的操作の確認は省略されません。~/.claude/settings.json"outputStyle": "Concise"を設定するか/configで選択し、その後/clearするか新しいセッションを開始します。Remote Controlもリサーチプレビューを終えました。claude remote-controlを実行しているマシンはClaudeモバイルアプリのCodeタブにデバイスカードとして表示され、タップするとそこでセッションが始まります。1

FAQ

Claude Codeの/designスキルとは何ですか

ブリーフを受け取り、複数アートボードのデザインを下書きし、Claude Designのキャンバスエディタを実行するアーティファクトとして公開するリサーチプレビューのスキルです。アートボードを選び、Claudeに実装を依頼します。12

/designにはどのClaude Codeバージョンが必要ですか

2026年8月14日リリースのv2.1.233以降です。claude --versionで確認できます。13

/designはどのプランで使えますか

Pro、Max、Team、Enterpriseで、CLIとClaude Code Desktopから使えます。1

/designが生成したアートボードは編集できますか

アカウントで保存が許可されている場合のみ可能です。その場合、クリックして選択、プロパティパネル、インラインテキスト編集、取り消し/やり直し、そして全員に新しいバージョンを公開するSaveが使えます。それ以外の場合は、閲覧とエクスポート(PNG/PDF)のみのプレビューになります。2

/designはAPIキーやBedrock、Google Cloud、Foundryで動作しますか

文書上は動作しません。このスキルはアーティファクトに公開しますが、Anthropicのアーティファクトのページによると、APIキー、ゲートウェイトークン、クラウドプロバイダーの認証情報を使うセッションは公開できず、アーティファクトはAmazon Bedrock、Google CloudのAgent Platform、Microsoft Foundryでは利用できません。Anthropic API上でのclaude.aiサインインが必要です。アーティファクトのページでは、その場合ClaudeはローカルにHTMLファイルを書き出すか公開できないと伝えるとされていますが、/designがどちらの挙動をとるかはどちらの情報源にも書かれていません。5

/designはアプリのUI専用ですか

いいえ。説明文にはランディングページ、マーケティングやソーシャル向けのグラフィック、ポスター、チラシ、パンフレットなどの印刷物、そして1枚の流れるアートボードとしてのメモやレポートも挙げられています。2

重要ポイント

プロダクトエンジニア向け: - 実際の画面について平易な言葉でモックアップを依頼してください。説明文のトリガー条項により、スラッシュコマンドを入力しなくてもClaudeがその依頼からスキルを呼び出せます。2 - Anthropicの例のように、ブリーフは散文で書いてください。文書化された例は散文であり、ダイジェストにも説明文にもフラグは記載されていません。1 - どのアートボードを選んだかは自分で記録しておいてください。選択後にClaudeが何を読むのか、ダイジェストは一切述べていません。1

デザイナー向け: - レビューラウンドを計画する前に、アカウントで保存が許可されているか確認してください。許可がなければ、キャンバスは閲覧とエクスポートのみになります。2 - 1ページのチラシやソーシャル向けグラフィックは、UIフローと並ぶ妥当なテストです。どちらも明記された対象範囲に含まれています。2

チームリーダー向け: - チーム全体でv2.1.233以降であることと、アーティファクトの前提条件(claude.aiサインイン、Anthropic API、CMEK、HIPAA、Zero Data Retentionが無効)を確認し、リサーチプレビューの間はスキルが変化することを想定してください。135 - プロセスは文書化された3つのステップだけを前提に組み立ててください。フラグ、上限、再シードは未文書化のままです。4

アートボードができたら、それが満たすべきインタラクションの原則はAIエージェントサーフェスのデザインで扱っています。



  1. Anthropic、“What’s new in Claude Code: Week 34, August 17 to 21, 2026”/designリサーチプレビュー(アートボードワークフロー、CLIとClaude Code Desktop、プラン、v2.1.233要件、例のプロンプト、キャンバスリンク)、Concise出力スタイル(v2.1.237)、Remote Controlのデバイスカードについて。2026年8月25日確認。 

  2. Anthropic、CLIに同梱されたClaude Code designスキルの説明文(プロダクト内スキルメタデータ。公開URLなし)。アーティファクトとキャンバスエディタの出力、.dc.htmlアートボード、保存が有効な編集階層と閲覧とエクスポート(PNG/PDF)階層の違い、対応するデザイン種別の一覧について逐語引用。2026年8月25日確認。 

  3. Anthropic、Claude Code v2.1.233リリースノート、2026年8月14日。最低バージョンのリリース日の出典としてのみ引用。2026年8月25日確認。 

  4. 2026年8月25日時点での情報源1、2、5に対する筆者の読解。列挙した欠落はそれらの文書に記載がないことを指すものであり、スキルの挙動についての主張ではありません。 

  5. Anthropic、“Artifacts”のAvailabilityセクション。5行の要件表(プラン、認証、モデルプロバイダー、組織ポリシー、利用面)、「以下のすべての条件」という表現、そしてAPIキー、ゲートウェイトークン、クラウドプロバイダー認証情報、Bedrock、Google Cloud Agent Platform、Microsoft Foundryの除外について引用。2026年8月25日確認。 

関連記事

Anthropic Python SDK 1.0への移行:手作業か、Claude Codeか

anthropic 0.xから1.0への移行:httpx2、非同期raw response、Bedrockのリージョン。MIGRATION.mdを見ながら手作業で、またはClaude Codeの/claude-api upgrade pyt…

2 分で読める

Install and Update Claude Code CLI: Mac, Linux, Windows

Every way to install, update, pin, and uninstall the Claude Code CLI -- native installer, Homebrew, winget, or npm -- on…

7 分で読める

Ralphループ:自律型AIエージェントを一晩中稼働させる方法

ストップフック、スポーンバジェット、ファイルシステムメモリを備えた自律エージェントシステムを構築しました。失敗から学んだことと、実際にコードをシップする仕組みを紹介します。

3 分で読める