In a previous post, we explored how to use GPT and AI tools to create a personalized business card styled like a code editor window—complete with syntax-highlighted fields like "name", "email", and "link". Today, we’re taking it one step further by adding something functional: a QR code that can be scanned to instantly add your contact to any smartphone via the vCard format.
Follow-up to our previous guide: Create Personalized Tech-Themed Business Cards Using GPT and AI Tools
Step 1: Generate the Name Card Without the QR Code First
Most AI image models, including GPT-powered ones, cannot reliably produce scannable QR codes in one go. They often generate dummy placeholders that don’t work in real life. That’s why we start by creating the base design without the QR code first.
Use the following prompt to generate a clean, landscape-format image of your name card:
Prompt Template:
Create an image of a 2d screenshot features a business card in landscape format designed to look like a {file_format} file open in {code_editor}. The card shows code formatted in {syntax_type} with keys like {key1}, {key2}, {key3}, {key4} and {key5}. The window includes typical toolbar icons and a title bar labeled {file_name}, styled exactly like the interface of {code_editor}.
Example Placeholders:
{file_format}: JSON
{code_editor}: Notepad++
{syntax_type}: JSON
{key1}: "name": "Dr. Ken FONG"
{key2}: "title": "Consultant | Trainer | Thought Leader"
{key3}: "email": "Kensir@fong.com.hk"
{key4}: "link": "www.fong.com.hk"
{key5}: "phone": "37460733"
{file_name}: Business Card.jsonStep 2: Ask GPT to Add a Scannable QR Code After the Card Is Generated
Once you’ve generated the name card without the QR code, it’s time to enhance it with real functionality.
Since GPT may not generate a scannable QR code in the initial image, you should ask GPT to generate the QR code as a separate overlay, and explicitly specify that the QR code should contain vCard contact data in .vcf format.
Prompt Example:
“Please generate a real, scannable QR code in .vcf (vCard) format using my contact details, and overlay it on the image you just created. Place it in the bottom-right corner, and ensure it's properly positioned.”
GPT will typically respond like this:
Here’s an updated version of your card with a scannable QR code in the lower-right corner. It encodes your contact as a .vcf file. You can download the version with QR here: [link].
However, because the QR code is overlaid as an image, its placement may not always be ideal. GPT often includes a code snippet that defines the QR overlay using coordinates (x, y, top, left, etc.).
If the QR code overlaps your design or isn't positioned well, you can follow up with:
Can you adjust the QR overlay position so it doesn’t overlap the text? Try placing it 20px from the bottom and right.GPT will usually adjust accordingly.
Note:
A fine alignment may require manual adjustment—especially if you need pixel-accurate placement—so be ready to give GPT exact coordinates like x: 480, y: 260.
What Is a vCard and Why It Matters
To make the QR code on your name card scannable by mobile phones, the contact information must be encoded in a standard digital format called a vCard. This is a plain-text format that most smartphones and contact apps recognize instantly.
GPT doesn’t need extra information to create this — it can extract the key details from your Step 1 code (like name, email, title, phone) and generate a proper vCard automatically. Here's what the vCard format looks like for this blog's example:
BEGIN:VCARD
VERSION:3.0
N:FONG;Ken
FN:Dr. Ken FONG
TITLE:Consultant | Trainer | Thought Leader
EMAIL:Kensir@fong.com.hk
TEL:37460733
URL:www.fong.com.hk
END:VCARD
This format ensures that when you generate a QR code and someone scans it, your full contact information is directly added to their phone's address book — fast, clean, and standardized.
Conclusion: A Smart Fusion of Code, Design, and Real-World Utility
By combining GPT’s visual creativity with real-world scannable data, you now have a modern, functional digital name card that does more than just look good—it works.
Whether you're attending a tech conference, onboarding a new client, or networking online, this scannable card can be:
- Sent as an image in a message or email—letting others add you to their contacts instantly
- Printed and carried physically—perfect for conferences, lectures, or meetings where phones can quickly scan the QR code
- Embedded on your personal website or portfolio—so visitors can save your details with one scan
It’s the perfect bridge between your digital identity and real-world connections—efficient, memorable, and refreshingly geeky.
Traditional Chinese Summary 中文摘要
在上一篇文章中，我們介紹了如何用 GPT 製作一張模擬 Notepad++ 程式碼編輯器的個人名片，內容格式為 JSON，包含姓名、職稱、Email、電話與個人網站等欄位。這次，我們進一步加入實用的 QR Code，讓掃描者可以直接將聯絡資訊儲存到手機通訊錄中。
步驟一：先生成不含 QR Code 的名片
許多 AI 模型（包括 GPT 圖像模型）無法直接生成可掃描的 QR Code，常會出現無效的假圖。因此建議先用以下提示語生成基本名片設計：
Create an image of a 2d screenshot features a business card in landscape format designed to look like a JSON file open in Notepad++. The card shows code formatted in JSON with keys like "name": "Dr. Ken FONG", "title": "Consultant | Trainer | Thought Leader", "email": "Kensir@fong.com.hk", "link": "www.fong.com.hk" and "phone": "37460733". The window includes typical toolbar icons and a title bar labeled Business Card.json, styled exactly like the interface of Notepad++.步驟二：請 GPT 在圖像中加入可掃描 QR Code（以 .vcf 格式）
當名片圖像（尚未含 QR Code）製作完成後，可以進一步要求 GPT 生成一個真正可掃描的 QR Code。
你需要另外請 GPT 以 vCard 格式（.vcf） 產生聯絡資訊，並將 QR Code 作為圖層覆蓋在原始名片圖像上。
指令示範：
請根據我的聯絡資訊，產生一組 .vcf（vCard）格式的 QR Code，並將其加入到剛才的名片圖像中，建議放在右下角，並請確保不遮擋到內容文字。GPT 會回覆：
這是已加入可掃描 QR Code 的名片圖像，內容為 vCard（.vcf）格式。你可以從這裡下載帶 QR Code 的版本：[link]
由於 QR Code 是後加的圖層，位置可能不準確。GPT 通常會在程式碼中顯示 overlay 的座標設定（如 x、y、top、left 等）。
你可以補充說明：
請將 QR Code 調整到距離右邊與底部各 20px 的位置，避免遮住主要內容。GPT 會根據你的說明調整排版。
補充：
若你希望達到精細對齊，建議主動提供具體座標（如 x: 480, y: 260），GPT 會將其應用於圖層設定，讓整體設計更準確。
Keywords
vCard QR code, AI name card, JSON business card, GPT image prompt, Notepad++ style card, tech-themed name cards, QR code contact, AI-generated design, mobile-friendly name card, Dr. Ken FONG
0 Comments