今回の第13回火曜日のプロンプトでは、AIにプロフェッショナルな名刺を作成するための完全なミニツールを構築するよう挑戦しました。
Linkeumでは、金融、投資、専門的なイベントについて取り上げています。これらの世界において、人脈作りは最も重要です。名刺やカンファレンスバッジほど不可欠なものがあるでしょうか？
今回の第13回火曜日のプロンプトでは、AIにプロフェッショナルな名刺を作成するための完全なミニツールを構築するよう挑戦しました。目標は、名刺やバッジをリアルタイムでカスタマイズできる「シングルページ」Webアプリケーション（HTML、CSS、JSを1つのファイルに統合）を生成することです。プロフェッショナルなテーマ（ウォール街、フィンテック）、エレガントな3Dホバー効果、および結果をPNG画像としてエクスポートする機能をAIに統合するよう求めました。
プロンプト
生成されるコードの品質を最大限に高めるため、プロンプトは英語で記述され、UI/UXデザインとCDNを介した外部ライブラリの使用に特に重点が置かれました。
Act as an Expert Frontend Developer and UI/UX Designer specializing in Fintech and Corporate enterprise platforms. Your mission is to create a single-file web application (HTML, CSS, and JS combined) that functions as a real-time, premium Business Card and Conference Badge generator.
Design & Layout Strategy:
- The UI must be highly professional, elegant, and trustworthy. Think "Investment Banking meets Modern Tech Startup".
- Use Tailwind CSS (via CDN) for rapid, clean styling.
- The layout should be split: a sleek configuration panel on the left (or top on mobile), and a sticky real-time live preview of the card on the right.
- Background: A subtle, sophisticated dark mode (slate/gray) or a clean corporate light mode.
The Live Preview Card (The core element):
- The card itself should look like a physical premium business card (standard ratio 3.5 x 2 inches, scaled up for the screen).
- Add a subtle CSS 3D tilt/glare effect when the user hovers over the card with their mouse to make it feel premium.
- It must include placeholders for: Company Logo, Full Name, Job Title (e.g., "Senior Portfolio Manager", "CTO"), Email, Phone Number, and a QR Code placeholder.
User Inputs & Configuration (HTML/JS):
- Text Fields: Name, Job Title, Company, Phone, Email, Website.
- Theme Selector (Dropdown):
- "Wall Street Classic" (Navy blue & Gold)
- "Fintech Minimalist" (Pure black, white text, subtle neon accent)
- "Tech Conference" (Vibrant gradient background with glassmorphism).
- Layout Toggle: Choose between "Business Card" (horizontal) or "Event Badge" (vertical).
Logic & Export (JavaScript):
- JS must instantly update the card's DOM elements as the user types (real-time data binding).
- Include a "Download Card" button. Use the
html2canvaslibrary (import it via CDN) to capture the card's HTML node and trigger a PNG download so the user can actually save their creation.The final code must be clean, heavily commented, fully functional in a modern browser, and require zero local installation.
テスト後の評価
Qwenでこのプロンプトをテストしたところ、「ワンショット」としては驚くべき結果が得られました。インターフェースは瞬時に生成され、3D効果が真のプレミアム感をもたらし、テーマも完璧に適用されます。
開発者であれば、完璧に仕上げるために少し手動の調整が必要であることに気づくでしょう。QRコードを機能させるには実際のライブラリが必要であり、html2canvasによるPNGキャプチャでは、複雑なCSS要素がわずかにずれることがあります。しかし、10秒で生成されるベースとして、これは並外れた時間の節約です！
次はあなたの番です！
コードをコピーし、詳細を調整して、次のネットワーキングイベントに最適なバッジを作成してください！時間を節約するためのこの種の手法やプロンプトエンジニアリングがお好きな場合は、受信トレイに直接今後のツールや分析を受け取るために、忘れずにニュースレターをご購読ください。
