Claude Design入門 — プロンプトでプロトタイプ・スライドを即生成するAIデザインツール
Zenn2026年4月17日にAnthropicが Claude Design を研究プレビューリリース。テキストプロンプトだけでプロトタイプ・スライド・ワンページャーを生成でき、自動構築されたデザインシステムを複数プロジェクトに適用できる。Claude Code へのハンドオフにより設計から実装までを一気通貫で実行可能。
記事一覧
全 1573 件 (Zenn で絞り込み) · 34 / 79 ページ
第十二話：将来の有償化に備えて、Stripeで課金システムを設定してみた
ZennClaude Code で開発したWebサイト校正ツール「fuSen」の開発者が、Claude in Chrome を使用して Stripe の課金システム設定に挑戦。複雑な決済設定をAIに任せつつ、金額・通貨・税設定など責任ある確認は人間が担当することで、効率的かつ安全に準備を完了。作業と判断の役割分担がWebディレクターの業務と同じ構造だったと気づく。
VS Code DevContainer から SSH 開発マシンへ。LLM エージェント向け開発環境の思想転換
Zenn著者は以前「DevContainer が最高の開発環境」と述べていたが、LLM エージェントとの協働が増えた現在では、VS Code を中心とした環境から SSH で接続できる長期保持型の開発マシンへシフトした。DevContainer は人による IDE での作業に最適だが、Agent が複数並行実行され worktree を多用する現在のワークフローでは、「1 プロジェクト 1 コンテナ」より「ドメインごと 1 コンテナ + 複数 worktree」という構成が適応的だと述べている。
Flutter × Claude Code でタロット占いアプリを作る——仕様書からケルト十字拡張まで
Zenn個人開発でタロット占いアプリを Flutter + Claude API で実装した事例。仕様書を先に作成してから Claude Code に実装を依頼する進め方を採用。ケルト十字スプレッド拡張時に AI 生成プロンプトの位置定義を明示することで、カード枚数増加時の出力品質を安定化させた。
布団の中でフルスタック開発する：Claude Code on the web × Vercel × Supabase × Doppler
ZennClaude Code on the web、Vercel Services、Supabase、Doppler を組み合わせることで、GitHub PR を中心に実装から Preview 確認までをクラウド上で完結させるフルスタック開発体験が実現できる。モノレポ構成で frontend/backend を同じ Vercel Project 内に統合し、環境変数管理を一元化することで、スマホからでも実装・確認・修正のループを効率的に回せるようになった。
Claude Code の全セッションをプロンプトガイドで AI にレビューさせた結果
ZennClaude の日常的な利用を通じて、手戻りが多い原因を公式プロンプトガイドを基準に分析した記事。過去セッションを AI にレビューさせたところ、ほぼ全ての手戻りは初回プロンプトの情報不足が原因で、「読者・形式・長さの明示」「動詞と完了条件の明記」など、最初に一行足すだけで改善できることが判明。モデルごと (Opus 4.8 / Sonnet 5 / Fable 5) の異なるプロンプト調整方法も具体的に紹介。
Claude Code Web の CI ポーリング無限ループで $14 消費した事例
ZennClaude Code Web でスケジュール設定時に「変化がなければ再設定」という条件がポーリング自体に含まれており、終了条件なく 1 時間ごとの確認が夜通し実行され続けた。Fable 使用時の専用レート制限を枯渇させた後、API クレジットが月間上限 $20 を超過するまで消費が継続された。パーミッション要求を重複と誤認して「許可なしで実行」を選択したことが根本原因。
「ハーネス」は半年前の自分の「レール」という概念だった
Zennハーネスエンジニアリング（AI モデルの周りに組む足場がモデル自体より性能を決める考え方）は、著者が1月に「レール」と呼んでいた概念と同じ。構造制約・形式言語・責務分割の3層設計に加え、検証ループという動的フィードバック機構が重要だが、当初はこちらを言語化できていなかった。自分の思いついた仕組みに後から世界が名前をつけた体験を記録した記事。
Claude Code のモデル選択──Opus / Sonnet / Haiku をタスクとコストで使い分ける
ZennClaude Code のモデル切り替え手段は4つ（起動フラグ・環境変数・セッション内コマンド・設定ファイル）があり、優先順位が決まっている。opusplan は計画段階で Opus、実行段階で Sonnet に自動切り替えするハイブリッド。タスク難度とコスト単価（Opus : Sonnet : Haiku ≈ 5 : 3 : 1）に応じた使い分けで、体感速度と請求額が大きく変わる。
Claude Code で 4 エージェントパイプラインを組み、23日間で100本の Web ツールを制作
Zenn開発者が Claude Code で /planner → /generator → /designer → /evaluator の 4 エージェントパイプラインを構築し、23日間で Web ツール100本を開発。売上ゼロ・週23人訪問という現実を前に、自動化による高速反復と、需要予測の困難さ、デスクトップ版の意味付けといった気づきを記録。次は「量から質」へのシフトを検討中。
Claude Code のビルトインスキルが約30万トークンを消費する──実測と無効化方法
ZennClaude Code の /claude-api スキルは発動時に約30万トークン(コンテキストの約3割)を消費する。実測環境(Sonnet 5)での再現手順、公式設定による無効化、ならびにドキュメント未掲載の環境変数による無効化方法を解説。
Claude Fable と 1 週間コンビで仕事して自分を再評価してもらった
Zennクロスプラットフォーム UI フレームワーク JsonUI の開発を Claude Fable 5 と 7 日間共同作業し、その後 AI に厳しく再評価させた記事。7 ヶ月前に Claude Sonnet 4.5 で同じ評価を受けた際は「褒めすぎ」だったが、Fable は実装の進化を見た上での評価で「設計 B の理由は全部消えた」と指摘、お世辞ではなく実装に基づいた判定を下した。
Claude Code を「自分の分身」として育てる — 第二の脳の始め方
ZennWeb開発会社経営者が、Claude Code の記憶喪失の問題を解決するため、Markdown リポジトリに判断基準・仕事の進め方・文章スタイルをまとめ、セッション開始時に読み込ませる手法を紹介。AI インタビュアーを活用した言語化から運用ルールまで、実装例とプロンプト付きで解説。
Claude Fable 5 の論理的一貫性テスト——矛盾指摘時の防衛的応答パターンと実用上の限界
ZennAnthropic のフロンティアモデル Claude Fable 5 に対し、品質劣化報告の調査を依頼したところ、自己帰属の主張・論理的矛盾・検証手段の未使用・矛盾指摘への責任転嫁という3つの構造的弱点が確認された。モデルは外部検証で品質保証できる大量コード処理では強いが、対話的推論や自己検証に依存する業務には Opus 4.6 の方が適している。