Claude Code更新 Design連携・Artifacts公開【6/15〜21】

はじめに

サーバーワークスの池田です。

今週（6/15〜6/21）の Claude Code は v2.1.178 から v2.1.185 まで5バージョンがリリースされました。CLI 本体のバグ修正や設定周りの改善が多い週でしたが、注目すべきはプロダクト全体で進んだ「デザインとコードの統合」と「成果物の共有」です。

Claude Design との双方向同期がCLIに組み込まれ、ターミナルで作ったものをURLで即共有できる Artifacts 機能も登場しました。あわせて、MCP サーバーの接続手順をゼロから解説する公式クイックスタートガイドも新設されています。

この記事で分かること

Claude Design で作ったデザインをコードに反映し、コード側の変更をデザインに戻す /design-sync の双方向同期の仕組み
Claude Code のターミナルで生成した HTML やレポートをチームにURL共有できる Artifacts 機能の使い方と制限
Tool(param:value) 構文でパーミッションルールにパラメータ条件を追加できるようになった仕組みと、Agent(model:opus) のような活用例
/config key=value 構文、auto mode 安全性強化、MCP Quickstart ガイド新設など、その他の実務的な変更点

今週の主要アップデート一覧

機能	バージョン	主な変更点	参照
Claude Design 双方向同期	v2.1.178〜	`design-login`・`/design-sync` コマンドが CLI に追加。デザインとコードの双方向同期が可能に	Claude Design 発表
Artifacts	ベータ	ターミナルで生成した成果物を claude.ai 上の限定 URL で組織内共有。Team / Enterprise のみ	Artifacts
`Tool(param:value)` パーミッション構文	v2.1.178	パーミッションルールでツールのパラメータ値を条件にできるように。`Agent(model:opus)` で Opus サブエージェントだけブロック等	Releases

注目アップデート1: Claude Design との双方向同期

デザインとコードが別々に進む問題

これまで Claude Design と Claude Code はそれぞれ独立して動いていました。Claude Design でUIを作り込んでも、それをコードに反映するには手作業が必要でした。逆にコード側でデザインを調整しても、Design 側には反映されません。

デザイナーとエンジニアが別ツールで作業する以上、この「ズレ」は常に発生します。特にプロトタイプから実装に移るフェーズで、デザインの意図がコードに正しく伝わらないことが課題でした。

何が変わったのか — 双方向の同期

今週、Claude Code の CLI に design-login コマンドと /design-sync コマンドが追加されました。Claude Design で作成したデザインシステムやレイアウトを Claude Code に取り込み、逆に Claude Code 側の変更を Design に反映する双方向の同期が可能になります。

/design-sync を実行すると config 読み込み → アンカー取得 → driver 実行の流れで同期が始まる

Re-sync 完了。5/5 コンポーネントが match し、Alert が新規追加として検出された

Claude Design 側の画面。コンポーネント（Alert, Badge, Button 等）がデザインシステムとして管理されている

利用の流れは以下のとおりです。

/design-login で claude.ai アカウントを使ってデザインシステムへのアクセスを認証する
Claude Design 側でデザインを作成・編集する
Claude Code 側で /design-sync を実行し、デザインの変更をコードに取り込む
コード側で調整した内容を Design に反映する

Claude Design 側の強化ポイント

Claude Design 自体にも今週大きなアップデートがありました。

機能	内容
デザインシステムの自動維持	リポジトリやコードベースからインポート。Claude が出力の準拠を自動チェック
キャンバス上での直接編集	ドラッグ・リサイズ・整列などのレイアウト操作に対応
エクスポート機能の強化	PDF、PowerPoint など既存ツールへの出力に対応

注意点

この機能は claude.ai アカウントでの認証が必要です。環境変数 CLAUDE_CODE_ENABLE_DESIGN_SYNC や CLAUDE_CODE_ENABLE_DESIGN_MCP が CLI のメタデータに追加されていますが、段階的にロールアウトされている可能性があります。利用できない場合は Claude Code を最新バージョン（v2.1.178 以降）に更新してください。

日本のコミュニティでも「Claude Code と Claude Design で双方向の同期ができるようになったの嬉しい！」と反響がありました。デザインとコードを行き来する開発フローが、大きく変わる可能性を秘めたアップデートです。

注目アップデート2: Artifacts でターミナルから成果物をURL共有

成果物の共有にひと手間かかっていた

Claude Code で HTML レポートやダッシュボードを生成したとき、それをチームメンバーに共有するにはファイルを添付したり、ローカルサーバーを立てたりする必要がありました。「ちょっと見て」が気軽にできない状態です。

何が変わったのか — 作ったものをURLで即公開

Claude Code に Artifacts 機能が追加されました（ベータ）。ターミナルで生成した HTML などの成果物を claude.ai 上の限定URLで公開し、組織内のメンバーに共有できます。

公式ドキュメント（Share session output as artifacts）では、以下のような活用例が紹介されています。

用途	プロンプト例
PR のウォークスルー	`Make an artifact that walks through this PR with the diff annotated inline.`
ダッシュボード	`Build a dashboard artifact of last week's deploy failures by service`
設計案の比較	`Make an artifact with four distinctly different layouts for the settings panel`
進捗トラッキング	`Turn this migration plan into a checklist artifact. Check items off as you complete them`

使い方

プロンプトで artifact を作るよう指示するだけです。Claude が HTML ファイルを生成し、公開前に許可プロンプトを表示します。承認すると URL が発行され、ブラウザで自動的に開きます。

作成後も「ここにグラフを追加して」と指示すれば、同じ URL 上で更新されます。別セッションから更新する場合は artifact の URL を渡します。

共有は公開後にブラウザの Share ボタンから設定します。組織内の特定メンバーまたは全員に共有できますが、組織外への共有はできません。Ctrl+] でターミナルから最新の artifact を再度開けます。

利用条件

要件	条件
プラン	Team または Enterprise のみ（Pro・Max では利用不可）
認証	`/login` で claude.ai にサインイン必須
プロバイダ	Anthropic API のみ（Bedrock / Vertex / Foundry は対象外）
制限	単一 HTML ページ、外部リクエスト不可、16 MiB 以下

Team プランではデフォルトで有効、Enterprise プランでは管理者が claude.ai の admin settings から有効化します。無効にしたい場合は設定ファイルで "disableArtifact": true を指定するか、環境変数 CLAUDE_CODE_DISABLE_ARTIFACT=1 を設定します。

注目アップデート3: Tool(param:value) でパーミッションをパラメータ単位に制御

従来のパーミッションはツール単位だった

Claude Code のパーミッションルールは、これまで Agent・Bash・Edit のようにツール名の単位で許可・拒否を設定するものでした。「Agent ツールは全部許可」か「全部拒否」のどちらかで、「Opus モデルのサブエージェントだけブロックしたい」「特定のパスへの書き込みだけ拒否したい」といった細かい制御はできませんでした。

何が変わったのか — パラメータ値をマッチング条件に追加

v2.1.178 で Tool(param:value) 構文が追加されました。パーミッションルールにツールの入力パラメータの値を条件として書けるようになります。* ワイルドカードも使えます。

Agent(model:opus) を deny に設定した状態でサブエージェントを呼び出すと「Permission to use Agent with model:opus has been denied」と表示される

活用例

たとえば、サブエージェントのモデルを制限したい場合は以下のように書きます。

{
  "permissions": {
    "deny": [
      "Agent(model:opus)"
    ]
  }
}

この設定では、Opus モデルを指定したサブエージェントの起動がブロックされます。Sonnet や Haiku のサブエージェントはそのまま動きます。コスト管理やモデルガバナンスの観点で、チーム全体に適用するルールとして有用です。

ワイルドカードを使った柔軟な指定も可能です。

ルール例	動作
`Agent(model:opus)`	Opus サブエージェントをブロック
`Agent(model:*)`	全モデル指定のサブエージェントをブロック
`Bash(command:rm *)`	`rm` で始まるコマンドをブロック

企業運用での意味

従来は Agent ツール自体を拒否するか許可するかの二択でした。この構文により「サブエージェントは使わせたいが、高コストのモデルだけ制限したい」「Bash は許可するが、特定の破壊的コマンドだけブロックしたい」といった運用が可能になります。

managed settings（管理者設定）と組み合わせれば、組織全体のポリシーとしてパラメータレベルの制約を適用できます。

その他の変更点

変更点	バージョン	参照
`/config key=value` 構文を追加。プロンプトから任意の設定を即変更可能（例: `/config thinking=false`）	v2.1.181	Releases
`/config --help` でショートハンドキー一覧を表示	v2.1.183	Releases
設定キー名を簡素化（`autoCompactEnabled` → `autoCompact` など18項目）	v2.1.178〜	—
Auto mode 安全性強化: `git reset --hard`・`git clean -fd`・`terraform destroy` 等を自動ブロック	v2.1.183	Releases
MCP Quickstart ガイド新設（385行のステップバイステップ入門）	ドキュメント	MCP Quickstart
Advisor Tool ドキュメント（advisor.md）を新設。モデルペアリング表・コスト・関連機能比較を整備	ドキュメント	Advisor Tool
ネストされた `.claude/` ディレクトリ対応。agent・workflow・output-style は最寄りの `.claude/` を優先、スキルは修飾名（`<dir>:<name>`）で共存	v2.1.178	Releases
mid-stream 接続断の改善。部分レスポンスを保持しスピナーが固まらなくなった	v2.1.179	Releases
長い段落のストリーミング改善。改行を待たず行単位で表示	v2.1.181	Releases
Bun ランタイムを 1.4 にアップグレード	v2.1.181	Releases
プロンプトキャッシュ修正: カスタム `ANTHROPIC_BASE_URL` と Foundry でキャッシュが効いていなかった問題を修正	v2.1.181	Releases
サブエージェントパネル改善: アイドル30秒で自動非表示、5行上限にスクロールヒント	v2.1.181	Releases
`CLAUDE_CLIENT_PRESENCE_FILE` でマシン前にいる間のプッシュ通知を抑制	v2.1.181	Releases
`attribution.sessionUrl` でコミット・PR の claude.ai セッションリンクを省略可能に	v2.1.183	Releases
Write/Edit がネットワークドライブやクラウド同期フォルダで0バイトファイルを生成する問題を修正	v2.1.181	Releases

まとめ

今週の Claude Code は、ツールの枠を超えた「プロダクト統合」が際立つ週でした。Claude Design との双方向同期は、デザインとコードを別ツールで管理する摩擦を減らし、Artifacts は成果物の共有を URL 一つに簡素化します。

Tool(param:value) パーミッション構文は地味ですが、企業運用では大きな意味を持ちます。「サブエージェントは使わせたいが高コストモデルだけ制限したい」といった現実的な要件に、設定ファイル1行で対応できるようになりました。

来週以降は、Design 連携と Artifacts のベータが広がるかどうかに注目です。

はじめに

この記事で分かること

今週の主要アップデート一覧