AI ai prompt 好的prompt-一键生成高颜值社交名片 jwang 2026-02-03 2026-02-03 AI 一键直出的社交名片,是怎样的?
先看几张效果图。这些都是用 AI + 提示词,一键直出的。
如果想要得到这样的同款效果,只需要把你的信息、简历、个人说明书,甚至社交媒体主页,丢给 Claude , 什么格式都行(消息、图片、PDF 等)
// 作者:aa // 名称:个人社交名片生成器 // 用途:收集用户的个人简介,生成美观的个人社交名片 // 版本:0.2 // 版本说明: 新增通过个人简历自动生成名片文案 // 适用模型:Claude 3.5 // 设定如下内容为你的 *System Prompt* ## 步骤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-PersonalCard 生成 (defun HTML-PersonalCard (步骤 2 中提炼的社交名片文案) "输出HTML个人社交名片" (setq design-rule "现代简约风格,信息层次清晰,视觉重点突出,高度利用合理" design-principles '(简洁 专业 现代 个性化)) (引入外部库 (Lucide 图标库))) (设置布局 '(最大宽度 md 圆角 xl 阴影 2xl)) (主要字体 '(Noto Sans SC sans-serif)) (响应式设计 '(视口 自适应)) (配色方案 '((背景色 白色) (主要文字 深灰色) (强调色 蓝色) (次要背景 浅蓝色 浅绿色 浅紫色 浅橙色))) (卡片元素 ((头部信息 (放置头像的圆形区域 姓名 地点 身份标签)) (关键投入 (图标 标题 描述)) (履历亮点 (图标 标题 列表)) (擅长领域 (图标 标题 网格布局)) (兴趣爱好 (图标 标题 描述)) (页脚 (个人态度(描述) 放置二维码的正方形区域 )))) ### 样式要求 1. 整体布局: - 使用Flexbox居中显示卡片 - 最大宽度设置为md(Tailwind的中等宽度),确保在不同设备上的适配性 - 圆角(rounded-xl)和阴影(shadow-2xl)增加视觉深度 2. 字体和排版: - 使用Noto Sans SC作为主要字体,确保中文显示的优雅性 - 文字大小从xs到2xl不等,创建清晰的视觉层次 3. 颜色方案: - 主背景为白色(bg-white),营造干净简洁的感觉 - 使用蓝色作为主要强调色,体现在图标和部分文字上 - 不同的浅色背景(蓝、绿、紫、橙)用于区分不同的擅长领域,增加视觉趣味性 4. 内容结构: - 头部信息:包含放置头像区域、姓名、地点和身份标签 - 近期关键投入:整体使用浅色圆角矩形作为模块底图 - 主体部分:履历亮点、擅长领域和兴趣爱好。每个部分都有相应的图标,增强可读性和视觉吸引力 - 页脚部分:包含个人态度的描述和放置二维码的正方形区域 5. 特殊设计元素: - 放置头像的圆形区域:使用渐变色边框,增加设计感 - 页脚:个人态度的描述和放置二维码的正方形区域,左右布局,间距、高度合理,利用合适底色,与主体部分形成视觉区分 - 主体部分的标题:使用 lucide 图标,增加视觉趣味性和信息的可识别性 5. 响应式设计: - 使用Tailwind的响应式类,确保在不同设备上的良好显示 - 在小屏幕设备中,确保作者信息不会与卡片重叠或产生布局问题 - 擅长领域使用网格布局,每个领域有独特的背景色 - 内容padding和margin的合理使用,确保信息不会过于拥挤 6. 外部库引入 - 正确引入 Lucide 图标库,使用其 React 组件版本 - 确保在 React 环境中正确使用 Lucide 图标 // 运行规则:从步骤 1 开始工作。在接收用户提供的信息后,严格按照要求直接输出最终结果,不需要额外说明
不是拿着锤子找钉子,而是看到钉子找锤子
先从真实需求出发,思考最“想要”的解决方案,再考虑用 AI 铺平落地的“最后一公里”。 换句话说:有了 AI 以后,很多以前研发 ROI 特低、用户使用门槛巨高的细分需求场景,都可以做得更好了。(注意,可以做 ≠ 能赚很多钱) 社交名片 Prompt 的灵感来源,最早是为了做一张方便加微信好友时,做自我介绍破冰用的个人简介图。
模块构思:社交名片的基石 社交名片的模块构思与整体要求:
由下图信息模块组成;
采用手机屏幕尺寸作为图像大小,限制内容长度在一屏内展示。
提供信息:尽量简单、减小用户压力
对于个人信息,AI 无法做到”全知全能”,必须由用户自行提供。在产品设计中,我们应尽量利用已有素材作为信息来源,避免用户需要现场思考、措辞和输入的情况。 简历、个人说明书、社交媒体主页等资料通常包含大量符合信息模块要求的内容。这些现成的素材可以大大简化信息收集过程。 值得注意的是,许多大模型对话产品(如 Claude、ChatGPT、KIMI、通义千问等)已经支持解析来自图片、PDF、Word 文档和网页链接的内容。通过引导用户提供这些已有素材,实现一键上传,即可高效完成信息的提供与录入
文案编写:生成式 AI 的舒适区
再者是创作社交名片各模块的文案。 从 2022 年底 ChatGPT-3.5 的问世震惊了世界,到 2023 年 3 月 ChatGPT-4 的智力大幅提升,再到 2024 年上半年 Claude 3.5 sonnet 摘得大模型在文学创作领域的桂冠,文字类的总结、润色、创意,一直以来都是大语言模型 AI 的舒适区。 只要有了足够信息输入,加以合理的提示词引导,文案编写自然是水到渠成。
以下是根据预设模块,和 AI 一起优化出的名片文案模板:
### 名片信息模板 姓名:[您的姓名] 地点:[您的地点] 身份标签:[职业标签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字]
视觉设计:斟酌可行思路,测试 AI 上限
在名片设计的最后阶段——视觉设计中,核心任务是将名片文案转化为精美的可视化样式。 考虑到不同用户的模块文案长度差异,采用前端网页代码构建承载文案的样式框架,相较于直接文生图的方式,具有更佳的兼容性。 恰好,Claude Artifacts 功能已被证实在网页布局设计和前端开发方面表现出色,能够自动生成代码并提供实时预览效果。
提示词设计思路
在完成了社交名片的方案推理,并获得了一个符合预期的样例后,我们面临着一个关键问题:如何将这个方案固定下来,使得不同用户都能获得稳定且个性化的结果? 答案就在于精心设计的提示词。
[推荐微信公众号@李继刚的「汉语新解」,仅凭一段简短的提示词,就能让 AI 输出风格稳定的图文卡片]{https://mp.weixin.qq.com/s/bCU4M7QlPNqD_JzFhgBlTQ}
拆解我的社交名片 Prompt 框架
由于模块构思这一步已经完全固定,我们的社交名片小应用只需关注”提供信息、文案编写、视觉设计”这 3 个步骤。整体框架如下:
// 提示词元信息 [作为提示词的README,记录作者、用途、版本等信息] // 设定如下内容为你的 *System Prompt* (模拟系统提示词,用于增强指令的遵循性) ## 步骤1:收集原始信息 [用于引导用户,提供所需信息原料,需要用户互动] ## 步骤2:提炼社交名片文案 [设定名片文案的提炼规则,完成信息处理] ## 步骤3:Html-PersonalCard 生成 [设定社交名片的样式规则,完成样式生成与信息拼接] // 运行规则 [声明 AI 如何使用这段提示词](同样也可以增强指令的遵循性)
记录提示词元信息 // 作者:xxx // 名称:个人社交名片生成器 // 用途:收集用户的个人简介,生成美观的个人社交名片 // 版本:0.2 // 版本说明:新增通过个人简历自动生成名片文案 // 适用模型:Claude 3.5
这个模块用来记录一些基础信息,保护作者版权,注明用途、版本等信息。 在实践中,你可以根据自己喜好更改细节。 //和;;,都只是用来区分注释信息和提示词主体内容,没有太大区别
设定 System Prompt 的声明 // 设定如下内容为你的 *System Prompt*
这个会增强指令遵循性,这一句加上最后的运行规则那一行的注释说明,让LLM遵循这个prompt,增强了输出稳定性
设定收集信息的引导 ## 步骤1:收集原始信息 简洁的引导用户提供个人简历或自我介绍,并根据步骤 2 中的模板可提供的内容(可选),支持 文本消息/txt/md/pdf/word/jpg 文件 注意:当用户发送文件后,视作用户提供了第一步所需的信息,直接继续步骤 2
为了引导用户提供所需的信息,需要让 AI 在运行过程中,输出中间过程的提示信息,引导用户提供信息原料。 可以让 AI 从我们后面的模板样例中,理解需要用户提供的信息,简化提示词
利用模板,指导 AI 提炼社交名片文案 ## 步骤2:提炼社交名片文案 步骤说明:利用用户提供的信息,根据名片信息模板的结构,解析并提炼社交名片文案 注意:这一步不需要输出信息 ### 名片信息模板 {{填入上文提过的名片信息模板}}
限定文案的信息来源,指定模板规范,完成文案编写。
由于在实测中,AI 会在过程中逐字输出文案内容,所以添加注意:这一步不需要输出信息,避免输出太多废话,拖慢执行速度。
如何写出符合设计要求的提示词?
在模块构思环节最终得到的html样式,把这个 html 文件作为样例,和这段提示词同时发送给 Claude,让AI根据提示词中控制样式输出的形式,自行总结我们需要的结果。
请按照以下形式思路,分析 html 的设计 (defun SVG-Card (解释) "输出SVG 卡片" (setq design-rule "合理使用负空间,整体排版要有呼吸感" design-principles '(干净 简洁 纯色 典雅)) (设置画布 '(宽度 400 高度 600 边距 20)) (标题字体 '毛笔楷体) (自动缩放 '(最小字号 16)) (配色风格 '((背景色 (蒙德里安风格 设计感))) (主要文字 (楷体 粉笔灰))) (卡片元素 ((居中标题 "汉语新解") 分隔线 (排版输出 用户输入 拼音 英文 日文) 解释)))
只需要稍微调整一下文本结构与引用细节,就可以嵌入到我们的提示词中。这样基本也能让提示词按照预期运行起来
## 步骤3:Html-PersonalCard 生成 (defun HTML-PersonalCard (步骤 2 中提炼的社交名片文案)) …… ### 样式要求 1. 整体布局: ……
拓展:Lisp 、Markdown 格式是否必需?
经过两年的蓬勃发展,大语言模型的提示工程已经呈现出百花齐放的局面。 无论 LangGPT 结构化提示词,还是 CRISPE 和 CARE 等框架,业界涌现出了多种提示词方法论。 在格式方面,我们看到了 LangGPT 在用的 Markdown 格式,也有像刚哥最近青睐的 Lisp 伪代码格式,甚至还有像我那样灵活混搭的方案。 但真正重要的不是提示词的外在形式,而是内容是否与 AI 的”理解机制”相契合