CC Tips: 【衝撃】Claude DesignとGPT Image 2で外注100万円レベルのWebサイトを作る方法を実演解説
2026-08-27
- Claude Designのプロトタイプ画面で「Send to Claude Code」を使うと、デザインデータを引き継いだ状態でコーディングを始められる
- 技術選定(プレーンHTML/CSSか等)や画像の扱い(プレースホルダー維持かリアル画像か)を聞かれるので明確に回答する
- コーディング完了後は必ず「zipにしてください」と指示してデータをダウンロードする(指示しないとクラウド上に置き去りになる)
- カスタマイズ画面からNetlify MCP・Playwright・GSAP MCP・UI/UX Pro Maxスキル・frontend-designプラグインを追加すると表現力と実装品質が上がる
- 新しいセッションを始める際はdocsフォルダにcontent.md/design.mdを入れ、
/init的なコマンドでCLAUDE.mdを生成させてコンテキストを引き継がせる
- 添付できる画像は一度に最大5枚なので、配置指示は複数回に分けて出す
- リリース前にメタ情報・アクセシビリティなどのチェックリストをCSVで渡し、まとめてチェックさせる
- Netlify MCPを設定しておけばチャットでの指示だけでデプロイまで完結できる