【結論】ArtifactsとClaude Codeを連携する
ArtifactsはClaudeの会話内でコード、文書、図、Interactive UIを作成・Previewする作業面です。
Claude CodeはRepository、Terminal、IDE、Desktop、Webで実装、Test、Git作業を行うAgentです。
Prototypeを移植する際は依存関係、ライセンス、Accessibility、Security、Project規約へ適合させます。
# ターミナルで実行：既存Frontend環境を確認
cat package.json
# ターミナルで実行：Planモードで開始
claude --permission-mode plan
# ターミナルで実行：移植後のTestを実行
npm test -- --runInBand
# ターミナルで実行：依存と差分を確認
npm ls --depth=0
git diff --stat具体的な手順・設定方法
ArtifactからCodeと必要AssetをExportまたはCopyします。
Claude Codeへ既存Component、Design Token、依存関係との差分を分析させます。
小さく移植し、表示、Keyboard、Test、Bundle、Licenseを確認します。
実践プロンプト / 活用テクニック
# 起動後のセッション内で入力
このArtifact由来のComponentを読み取り専用で分析してください。
不足依存、既存Design Tokenとの差、Accessibility、Securityを報告してください。
パッケージ導入、ファイル編集、開発Server起動はまだ行わないでください。注意点・よくあるエラーと対処法
不足Packageを無条件に自動Installしないでください。
ArtifactのPreview成功はProduction品質を保証しません。
貼り付けCodeにSecrets、追跡Script、外部Assetが含まれないか確認してください。