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

✍️ OpenClawRadar📅 公開日: May 12, 2026🔗 Source
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

OpenClawを使用した7エージェントAIトレーディングデスクの構築
Use Cases

OpenClawを使用した7エージェントAIトレーディングデスクの構築

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

OpenClawRadar
開発者がAI統合用PDF座標ツールを共有
Use Cases

開発者がAI統合用PDF座標ツールを共有

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

OpenClawRadar
OpenClawとObsidianを統合して、プライベートAIナレッジベースを構築
Use Cases

OpenClawとObsidianを統合して、プライベートAIナレッジベースを構築

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

OpenClawRadar
Redditユーザーが心臓病の予約のためにOpenClawで3つのソースから健康データを取得
Use Cases

Redditユーザーが心臓病の予約のためにOpenClawで3つのソースから健康データを取得

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

OpenClawRadar