Claude CodeがHTMLとPlaywrightで印刷可能な名刺をデザイン

Ad
Redditユーザーが、Claude Code(AIコーディングエージェント)がビジネスカードのデザインをゼロから印刷可能な形で作成する実用的なワークフローを共有しました。プロセスは次の通りです:
- Claudeに猫の写真とウェブサイトのリンクを入力として提供。
- ClaudeがHTMLの名刺デザインを生成し、Playwright(ヘッドレスブラウザ自動化ツール)を使用してスクリーンショットを撮り、ユーザーが満足するまでレイアウトを繰り返し修正。
- デザインが確定した後、ユーザーはWalmartでAveryの印刷可能な名刺用紙(標準の穴開き2x5グリッドシート)を購入。
- Claudeが印刷ボタン付きのHTMLページとAveryテンプレートに合った2x5グリッドを生成。そのページはカードストックに完全に位置合わせされて印刷され、手動調整は不要でした。
全体のプロセスは約10分で完了。ユーザーは「期待以上」の結果だったと報告しています。
主なポイント
- Claudeはブラウザ自動化による反復処理を通じて、ビジュアルデザインと印刷レイアウトの橋渡しができる。
- Playwrightでスクリーンショットをフィードバックとして使うことで、Claudeは人間の介入なしにレイアウトの問題を自己修正できる。
- 最終的なHTMLテンプレートは、安価なAvery名刺用紙でそのまま使用可能。プロのデザインツールは不要。
これは、ソフトウェア生成だけでなく、物理的な印刷物の作成にAIコーディングエージェントを活用した優れた例です。
📖 全文はこちら: r/ClaudeAI
Ad
👀 See Also

Use Cases
OpenClawを使用した7エージェントAIトレーディングデスクの構築
OpenClawを使用した7つのエージェントからなるAIトレーディングデスクの構築事例を紹介します。Mac mini上でClaudeを頭脳として動作させ、カスタムFlaskダッシュボードとCronジョブを特徴としています。
OpenClawRadar

Use Cases
開発者がAI統合用PDF座標ツールを共有
ある開発者が、PDF内の画像を正確に配置するためのX,Y座標を見つける小さなツールを作成し、その後、AIエージェントにそれを大規模なHRシステムプロジェクトに統合させて、署名の配置問題を解決しました。
OpenClawRadar

Use Cases
OpenClawとObsidianを統合して、プライベートAIナレッジベースを構築
ある開発者が、OpenClaw用に隔離されたObsidianボールトを使用し、SyncThingで同期することで、AIエージェントを利用しながらプライバシーを維持する自身のセットアップを共有しています。彼らはOpenClawを通じたタスク管理を実装し、自動化されたリサーチとメタデータの拡張を行っています。
OpenClawRadar

Use Cases
Redditユーザーが心臓病の予約のためにOpenClawで3つのソースから健康データを取得
RedditユーザーがOpenClawを使って、フィットネスウォッチのエクスポートファイル、テキストメッセージ、手書きメモを統合し、医師から依頼されたExcelワークブックを作成。OpenClawは日付の矛盾を解決し、薬情報を抽出し、金融データを漏らさずに結果をメール送信しました。
OpenClawRadar