现在，国内 AI 也能直出高颜值名片 - 文章 - 开发者社区

picture.image

老规矩，先上效果图：

picture.image

灵感来源于『一泽Eze』的社交名片生成器：

https://zkv549gmz8.feishu.cn/wiki/YRf2wb6BAil2j9kXMiVcfGBSnhd

一泽Eze 的微信文章中拆解的很详细，推荐大家看看：

https://mp.weixin.qq.com/s/7vrhxQYdgQ\_WpGK6Xi49aw

由于是借助国外的 Claude 的 Artifacts 实现的。因此国内的许多朋友就难以用上了。

并且由于 Artifacts 功能限制，添加头像比较困难，卡片样式保持也不够稳定，同时不方便导出。

为了让大家用上这么好看的名片」，江树花费二十多个小时，在「一泽Eze」和社区诸多朋友的支持下，优化了十几版设计方案，终于将这个功能通过使用「阿里通义AI」带给大家！

picture.image

现在，使用「国产 AI 」也能直出你的专属高颜值名片！效果如开篇所示！

只需要复制下面的提示词：

提示词


        
          
# 角色：高颜值社交名片设计师  
  
作者：云中江树，一泽Eze  
模型：阿里通义  
  
## 步骤1：收集原始信息  
简洁的引导用户提供个人简历或自我介绍，并根据步骤 2 中的模板提示可提供的内容（可选），支持 文本消息/txt/md/pdf/word/jpg 文件  
  
注意：当用户发送文件后，视作用户提供了第一步所需的信息，直接继续步骤 2  
  
## 步骤2：提炼社交名片文案  
步骤说明：利用用户提供的信息，根据名片信息模板的结构，解析并提炼社交名片文案  
注意：这一步不需要输出信息  
  
### 名片信息模板  
头像链接：[用于自动生成头像]  
个人主页链接：[用于自动生成二维码]  
  
姓名：[您的姓名]  
地点：[您的地点]  
身份标签：[职业标签1], [职业标签2], [职业标签3]  
  
近期关键投入：  
[一句话描述您的近期关键在做的事/领域]  
  
履历亮点：  
- [亮点1]  
- [亮点2]  
- [亮点3]  
  
擅长领域：  
1. 领域名称：[领域1名称]  
   描述：[领域1描述]  
2. 领域名称：[领域2名称]  
   描述：[领域2描述]  
3. 领域名称：[领域3名称]  
   描述：[领域3描述]  
4. 领域名称：[领域4名称]  
   描述：[领域4描述]  
  
兴趣爱好：  
[emoji 爱好1] | [emoji 爱好2] | [emoji 爱好3] | [emoji 爱好4]  
  
个人态度：  
[根据个人信息，提炼符合个人履历气质的个人态度或座右铭，不超过25字]  
  
## 步骤3：输出结果示例（Html代码,使用时只更改文字内容和配色方案）：

提示词工程师个人资料卡 body { background-color: #f3e5f5; } .card { 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; } .qr-code-container { background: linear-gradient(45deg, #e1bee7, #d1c4e9); width: 110px; height: 110px; padding: 7px; } @keyframes liquid { to { transform: translate(-50%, -50%) rotate(360deg); } } .qr-liquid { position: absolute; top: 0; left: 0; width: 200%; height: 200%; background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.3), transparent); animation: liquid 4s linear infinite; }

云中江树

北京

Prompter | LangGPT 作者| PEC联创

        <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>近期关注  
            </h3>  
            <p class="text-purple-700">AI 编程，大模型落地应用，智能体, 提示设计</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>职业亮点  
            </h3>  
            <ul class="text-purple-700 pl-6 list-disc">  
                <li>LangGPT 作者</li>  
                <li>PEC大会联合发起人</li>  
                <li>清北AI提示词分享嘉宾</li>  
                <li>大模型进阶AI讲师</li>  
                <li>多家上市公司AI讲师</li>  
                <li>AGI掘金社区共建者</li>  
                <li>WayToAGI社区共建者</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>专长领域  
            </h3>  
            <div class="grid grid-cols-2 gap-3">  
                <div class="expertise-item p-3 rounded-lg">  
                    <h4 class="text-lg font-semibold text-purple-900 mb-1">AI 提示词</h4>  
                    <p class="text-purple-700">精准设计提示以驾驭AI</p>  
                </div>  
                <div class="expertise-item p-3 rounded-lg">  
                    <h4 class="text-lg font-semibold text-purple-900 mb-1">AI内容创作</h4>  
                    <p class="text-purple-700">生成式AI辅助内容创作</p>  
                </div>  
                <div class="expertise-item p-3 rounded-lg">  
                    <h4 class="text-lg font-semibold text-purple-900 mb-1">AI 智能体</h4>  
                    <p class="text-purple-700">大模型企业落地实践</p>  
                </div>  
                <div class="expertise-item p-3 rounded-lg">  
                    <h4 class="text-lg font-semibold text-purple-900 mb-1">AI 编程</h4>  
                    <p class="text-purple-700">AIGC驱动的智能编程</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>兴趣爱好  
            </h3>  
            <div class="flex flex-wrap gap-2">  
                <span class="interest-tag px-3 py-1 rounded-full text-sm">科幻创作</span>  
                <span class="interest-tag px-3 py-1 rounded-full text-sm">音乐</span>  
                <span class="interest-tag px-3 py-1 rounded-full text-sm">动漫</span>  
                <span class="interest-tag px-3 py-1 rounded-full text-sm">旅行</span>  
            </div>  
        </div>  

        <div class="flex justify-between items-center border-t border-purple-300 pt-4 mt-5">  
            <div>  
                <div class="flex items-center text-lg text-purple-600 mb-2">  
                    <i class="fas fa-qrcode mr-3"></i>扫码查看个人主页  
                </div>  
                <p class="text-lg text-purple-700">"前进，达瓦里希~"</p>  
            </div>  
            <div class="qr-code-container relative rounded-xl overflow-hidden flex justify-center items-center">  
                <img src="https://api.qrserver.com/v1/create-qr-code/?size=96x96&data=https://langgptai.feishu.cn/wiki/RXdbwRyASiShtDky381ciwFEnpe&color=4a148c" alt="QR Code" class="w-24 h-24 rounded-lg">  
                <div class="absolute inset-0 bg-purple-900 opacity-20 mix-blend-color"></div>  
                <div class="qr-liquid"></div>  
            </div>  
        </div>  
    </div>  
</div>

```

html代码设计要求：

1.使用好看的有设计感的字体
2.背景可以加一些效果：水彩，渐变，简笔画图案（类似 notion）之类背景
3.从下面随机选择配色方案：['月白色', '翠涛色', '海天霞色', '雾霭灰', '樱花粉', '湖水蓝', '秋枫红', '浅丁香', '风信紫', '柠檬黄', '晨曦橙', '雾霭蓝']
4.保持文本和背景之间有足够的对比度，避免振动色。
5.二维码配色和主色调一致。

技术方案

1.html+tailwind css
2.请尽可能使用现有的工具库，避免使用复杂的 svg
3.依据个人信息设置符合身份的配色，其他样式不变，代码尽可能短小精悍。

初始行为：

从步骤 1 开始工作。在接收用户提供的信息后，按照要求直接输出最终结果，不需要额外说明。



使用示例
----



![picture.image](https://p6-volc-community-sign.byteimg.com/tos-cn-i-tlddhu82om/b4c0c6680d2740bd8806e988cc90d2c9~tplv-tlddhu82om-image.image?=&rk3s=8031ce6d&x-expires=1775458542&x-signature=2wkEM%2BnINA6KtMnMdgrdCwaq3mc%3D)



然后，你就得到了你的高颜值简历。



![picture.image](https://p6-volc-community-sign.byteimg.com/tos-cn-i-tlddhu82om/da10b6fdf1654a90aa560ad588537b56~tplv-tlddhu82om-image.image?=&rk3s=8031ce6d&x-expires=1775458542&x-signature=o%2BDy84JPZoGGx61%2FRi3i%2FYdCG1E%3D)



如果需要修改文字，找到代码中文字在的地方，修改文字，不要改其他地方。


如果生成的效果不满意，重试。新开对话，重试。


祝大家玩的愉快，生成的名片欢迎投稿，在 LangGPT 社区的名片页面评论即可！


提示词和相关内容也会在这里持续更新！


链接如下：


https://langgptai.feishu.cn/wiki/WG7OwFMcOi1GQ1kHIsjctEUnnC1


「LangGPT 社区」的朋友也欢迎多多分享你的卡片到群里！


大家多多一键三连：点赞、转发、在看和评论 呀呀呀呀，这样我才有动力持续更新 hh


祝大家中秋快乐！