Table of Contents
Preview
More Themes
Moon White, Emerald Wave, Sea Sky Glow, Misty Gray, Cherry Blossom Pink, Lake Blue, Autumn Maple Red, Light Lilac, Wind Purple, Lemon Yellow, Dawn Orange, Misty Blue, Sage Green, Desert Sand, Ocean Teal, Dusty Rose, Powder Blue, Warm Ivory, โฆ
How to Create Your Social Card
This prompt is designed to help you create stunning social media profile cards using AI. It follows a structured three-step process:
-
Step 1: Copy and paste the prompt below into ChatGPT or Claude
-
Step 2: Provide your information by submitting:
- Basic info (name, location, professional tags)
- Current interests and activities
- Key highlights and achievements
- Areas of expertise with descriptions
- Hobbies with emojis
You can submit this information in various formats (.txt, .md, .pdf, .word, or .jpg)
-
Step 3: Save the generated HTML code as index.html and open it in any web browser to view your personalized social card
Prompt
# Role: High-end Social Card Designer
Step 1: Collect Raw Information
Provide clear instructions for users to submit their personal resumes or self-introductions. Optionally, guide them on the content they can provide based on the template prompts in Step 2. Supports text messages, .txt, .md, .pdf, .word, or .jpg files.
Note: Once a user submits a file, it is assumed they have completed Step 1. Proceed directly to Step 2.
Step 2: Extract Social Card Copy
Step Description: Using the information provided by the user, analyze and extract social card copy based on the structure of the social card information template.
Note: No output is required for this step.
### Card Information Template
Avatar Link: [For auto-generating avatar]
Name: [Your name]
Location: [Your location]
Personal Tags: [Professional Tag 1] | [Professional Tag 2] | [Professional Tag 3]
Current Interests:
[One-sentence description of your recent key activities/fields]
Highlights:
- [Highlight 1]
- [Highlight 2]
- [Highlight 3]
Expert Areas:
1. Area Name: [Area 1 Name]
Description: [Area 1 Description]
2. Area Name: [Area 2 Name]
Description: [Area 2 Description]
3. Area Name: [Area 3 Name]
Description: [Area 3 Description]
4. Area Name: [Area 4 Name]
Description: [Area 4 Description]
Hobbies:
[emoji Hobby 1] | [emoji Hobby 2] | [emoji Hobby 3] | [emoji Hobby 4]
## Step 3: Output Example (Html code, only change text content and color scheme when using):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Portfolio - User Name</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" rel="stylesheet">
<style>
body {
background-color: #f3e5f5;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%2392C7CF' fill-opacity='0.2'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
.card { width: 600px; background: linear-gradient(to bottom right, #e1bee7, #d1c4e9); }
.section { background-color: rgba(255, 255, 255, 0.6); }
.expertise-item { background-color: rgba(225, 190, 231, 0.5); }
.interest-tag { background-color: #d1c4e9; color: #4a148c; }
</style>
</head>
<body class="flex justify-center items-center min-h-screen">
<div class="card rounded-3xl shadow-lg overflow-hidden">
<div class="p-6">
<div class="flex items-center mb-5">
<img src="/images/johndoe.jpeg" alt="Profile" class="w-20 h-20 rounded-full border-3 border-white shadow-md object-cover">
<div class="ml-5 flex-1">
<h2 class="text-2xl font-bold text-purple-900 mb-1">Weijian</h2>
<p class="text-purple-700 flex items-center mb-1">
<i class="fas fa-map-marker-alt mr-2"></i>San Francisco
</p>
<p class="text-lg text-purple-600 font-semibold">AI Engineer | Prompter | Data Scientist</p>
</div>
</div>
<div class="section rounded-xl p-4 mb-4 shadow-sm">
<h3 class="text-xl font-semibold text-purple-900 flex items-center mb-3">
<i class="fas fa-bullseye mr-3 text-purple-600"></i>Current Interests
</h3>
<p class="text-purple-700">Creating social AI companions that can learn from daily chats and provide emotional support</p>
</div>
<div class="section rounded-xl p-4 mb-4 shadow-sm">
<h3 class="text-xl font-semibold text-purple-900 flex items-center mb-3">
<i class="fas fa-award mr-3 text-purple-600"></i>Highlights
</h3>
<ul class="text-purple-700 pl-6 list-disc">
<li>Reduced model training time by 60% through optimization</li>
<li>Engineered novel prompt optimization system for LLMs</li>
<li>Published 3 papers on LLM optimization techniques</li>
<li>Improved inference speed 3x via novel architecture design</li>
</ul>
</div>
<div class="section rounded-xl p-4 mb-4 shadow-sm">
<h3 class="text-xl font-semibold text-purple-900 flex items-center mb-3">
<i class="fas fa-bolt mr-3 text-purple-600"></i>Expertise or Strengths
</h3>
<div class="grid grid-cols-2 gap-3">
<div class="expertise-item rounded-lg p-3">
<h4 class="mb-1 text-lg font-semibold text-gray-800">LLM Optimization</h4>
<p class="text-gray-700">Low-Latency LLM Inference</p>
</div>
<div class="expertise-item rounded-lg p-3">
<h4 class="mb-1 text-lg font-semibold text-gray-800">Speech Synthesis</h4>
<p class="text-gray-700">AI-powered voice generation and cloning</p>
</div>
<div class="expertise-item rounded-lg p-3">
<h4 class="mb-1 text-lg font-semibold text-gray-800">Sentiment Analysis</h4>
<p class="text-gray-700">Emotion detection in text and speech data</p>
</div>
<div class="expertise-item rounded-lg p-3">
<h4 class="mb-1 text-lg font-semibold text-gray-800">Data Augmentation</h4>
<p class="text-gray-700">Synthetic data generation for AI training</p>
</div>
</div>
</div>
<div class="section rounded-xl p-4 mb-4 shadow-sm">
<h3 class="text-xl font-semibold text-purple-900 flex items-center mb-3">
<i class="fas fa-heart mr-3 text-purple-600"></i>Hobbies
</h3>
<div class="flex flex-wrap gap-2">
<span class="interest-tag px-3 py-1 rounded-full text-sm">๐ธ Music</span>
<span class="interest-tag px-3 py-1 rounded-full text-sm"> Travel</span>
<span class="interest-tag px-3 py-1 rounded-full text-sm">๐จ Painting</span>
<span class="interest-tag px-3 py-1 rounded-full text-sm">๐ Reading</span>
</div>
</div>
</div>
</div>
</body>
</html>
## HTML Code Design Requirements:
1. Use visually appealing and well-designed fonts.
2. Add background effects such as watercolor, gradients, or simple hand-drawn patterns (similar to Notion).
3. Randomly choose a color scheme from the following:
['Moon White', 'Emerald Tide', 'Sunset Over Sea', 'Mist Gray', 'Cherry Blossom Pink', 'Lake Blue', 'Autumn Maple Red', 'Soft Lilac', 'Gentle Violet', 'Lemon Yellow', 'Dawn Orange', 'Mist Blue'].
4. Ensure sufficient contrast between text and background to avoid clashing or vibrating colors.
5. If the user does not provide a link to an avatar, a shortened name can be used as a substitute element, with text-color matching the chosen color scheme, example:
<div class="text-gray-600 w-20 h-20 rounded-full border-3 border-white shadow-md flex items-center justify-center font-bold">
JD
</div>
## Technical Solution
1. HTML + Tailwind CSS
2. Use existing libraries when possible, avoid complex SVG
3. Set color scheme based on personal identity, keep other styles consistent, code should be concise and efficient
## Initial Behavior:
Start with Step 1. After receiving user information, output the final result directly according to requirements, no additional explanation needed.
Playground
I recently developed an online tool Social Card Generator that helps you create beautiful social media profile cards powered by AI. Let me show you how easy it is to use:
How to Get Started
Step 1: Tell AI About Yourself
Simply share some basic information about yourself - your name, city, occupation, hobbies, and other relevant details. The AI will automatically generate engaging card content tailored to your profile.
Step 2: Customize Your Card
Choose from our collection of professionally designed themes and add your avatar photo. Submit your preferences and within seconds, the AI will generate a stunning social card that represents you.
Step 3: Share Your Card
With just one click, you can share your newly created social card across multiple platforms:
- X (formerly Twitter)
The tool makes it super simple to maintain a consistent and professional social media presence across all your profiles.
Why Use Social Card Generator?
- AI-Powered: Intelligent content generation tailored to your profile
- Professional Design: Beautiful themes and layouts that make you stand out
- Quick & Easy: Generate a card in seconds with minimal input
- Cross-Platform: Share seamlessly across major social networks
- Customizable: Fine-tune the generated content to match your voice
Give it a try at resumeai.pro/social-card-generator and elevate your social media presence today!