8月19日、Cybersecurity Newsが「Anthropic Launches New /design Skill for Claude Code UI Workflows」と題した記事を公開した。AnthropicがClaude CodeにUIデザインワークフローを統合する新スキル/designをリサーチプレビューとして公開したことを詳しく伝えている。

コーディングツールがデザインツールを兼ねる時代へ

Claude Codeはこれまで、AIコーディングアシスタントとして「リポジトリの調査」「ファイル編集」「コマンド実行」「デバッグ支援」といった用途で使われてきた。今回追加された**/designスキル**は、そこに「UIの視覚的プロトタイピング」を加えるものだ。

なお、Claude Codeは主にCLI（コマンドラインインターフェース）として提供されるAIコーディングエージェントで、デスクトップアプリ版も提供されている。いずれの環境でも/designと入力するだけで今回の機能を呼び出せる。

Claude Code上で /design と入力すると、Claude がアプリケーションのUI案を編集可能なアートボードとして複数生成する。開発者はその中から気に入ったレイアウトを選び、セクション単位で調整（例：アラートの優先順位表示、ダークモードのコントラスト変更など）したうえで、「これを実装して」と指示するだけで、コード生成まで一気通貫で進む。

/design でアートボードを生成し、カスタマイズしてClaudeに実装させるまでの流れ（出典：ClaudeDevs）

何が変わるか：ツール間の行き来がなくなる

従来のUIデザイン〜実装フローでは、「Figmaなどのデザインツール → 仕様書 → コーディング環境」と複数ツールを行き来する必要があった。/designスキルはこのプロセスをClaude Code内に集約する。

技術的な基盤はAnthropicのArtifactsフォーマットだ。ArtifactsはもともとClaude.ai（ブラウザ版）において、コードやSVGといったコンテンツを独立したパネルで表示・編集できる仕組みとして導入された機能で、/designスキルのアートボードはその延長上に位置づけられる。Claude Codeの開発ワークフローにArtifactsの「インタラクティブな出力物を直接編集する」という思想を持ち込んだ、というイメージに近い。

具体例として記事では、社内向けセキュリティオペレーションダッシュボードの開発が挙げられている。「アラートキュー・深刻度フィルター・インシデントタイムライン・IOC検索パネル・アナリストメモ」といった要件を自然言語で指定すると、複数のダッシュボードレイアウトがアートボードとして生成される、という流れだ。

対応プランと利用方法

X（旧Twitter）のClaudeDevs公式アカウントによると、/designはClaude Pro・Max・Team・Enterpriseの各プランが対象。利用にはClaude Codeのアップデートが必要な場合がある。現時点ではリサーチプレビューの扱いだ。

セキュリティ面の注意点

記事はAI生成のフロントエンドコードに関するリスクについても触れている。生成されたコードは、レビュー前は信頼できないコードとして扱うべきとしており、具体的には以下の点を確認するよう求めている。

• 認証フローの妥当性
• 入力バリデーション
• クライアントサイドでのデータ露出
• APIエンドポイントの処理
• 依存関係の変更
• シークレット管理の手法

また、視覚的なプロトタイプが「センシティブな識別子の表示」「冗長なエラーメッセージ」「アクセス制御なしの業務データ表示」といった非セキュアなパターンを無意識に踏襲してしまうリスクも指摘されている。デザインの見栄えが先行してセキュリティ要件が後回しになる、という現場ではよくある問題だ。なお、これらのリスク指摘はCybersecurity Newsというメディアの性質上、詳細に記述されている部分であり、一般的な開発用途では通常のコードレビュープロセスの一環として捉えれば十分だろう。

実用性の評価は今後次第

記事は、エンジニアチームにとっての実用的な価値は「生成されたアートボードが編集しやすいか」「要件を正確に反映しているか」「保守性とセキュリティを満たした本番コードに落とせるか」にかかっている、と締めくくっている。リサーチプレビュー段階であることを踏まえれば、これらの点は今後の検証待ちといえる。

詳細はAnthropic Launches New /design Skill for Claude Code UI Workflowsを参照していただきたい。