只需几步,小白也能用 AI 做出精致社交名片!

豆包MarsCode AI 编程云课堂 【用 AI 制作个人社交名片】

让小白也能轻松掌握前端技能,制作如下的个人社交名片👇

同学们快来码住这期课程回顾

一起来学习清晰的任务拆解思维、实用的提示词编写技巧、零基础友好的 AI 辅助开发体验!

任务拆解思维

整体到局部

将大任务分解为小任务是一项重要的能力。

以制作名片为例,我们可以这样拆解:

循序渐进

按照"先有后优"的原则,我们的开发过程是:

  • 先搭建基础框架
  • 再实现核心功能
  • 最后进行美化优化

接下来进入实操阶段,豆包MarsCode 启动!

分步骤拆解和实操

生成框架卡片

第一步让豆包MarsCode 生成初步框架,向豆包MarsCode提出:

"我想要制作一张名片,请使用常用的大小帮我用html 代码制作一张名片。"

为什么这样写呢?

  • 明确目标为 【制作名片】
  • 指定要求为 【常用大小】
  • 限定格式为 【html 代码】

接下来观察 AI 返回的代码,关注以下几点:

  • 整体结构是否完整
  • 尺寸是否合理
  • 基础样式是否存在

名片排版

"将卡片分为左右两份,左边占35%,右边占剩余的65%。

左边区域使用清新的底色,使用 photo.png 作为头像;右边区域放置文字,所有文字左端对齐。"

通过这段话,我们向豆包MarsCode 明确了三个需求:

  • 明确比例为【35:65】
  • 指定内容为【底色、头像、文字】
  • 描述文字及头像位置

样式优化

接下来将针对配色、字体、排版及样式进行优化

"使用「淡紫色和白色」的优化样式。"

"使用「商务专业风格」方案优化我的字体。"

"在上面的基础上,为标题、职位、联系信息(电话和邮箱)三项字体设计一套大小、配色方案,注意使用内联样式。"

在上面的基础上,右侧字体的"电话"、"邮箱" 使用 svg 图标元素,注意图标元素和文字元素水平上一定要对齐,使用 div 对齐。

以上调整完毕后填入个人信息就OK啦!

使用个人信息

"去掉"电话""邮箱"两个词,使用我的个人信息:云中江树、LangGPT作者......"

导出卡片

使用浏览器节点截图功能即可get成品~

以上就是本期教程啦!

大家是否收获满满准备狂撒名片了呢?

欢迎加入豆包MarsCode AI 编程云课堂和我们一起跟练!

相关推荐
木易 士心1 小时前
Ref 和 Reactive 响应式原理剖析与代码实现
前端·javascript·vue.js
程序员博博1 小时前
概率与决策 - 模拟程序让你在选择中取胜
前端
被巨款砸中2 小时前
一篇文章讲清Prompt、Agent、MCP、Function Calling
前端·vue.js·人工智能·web
sophie旭2 小时前
一道面试题,开始性能优化之旅(1)-- beforeFetch
前端·性能优化
Cache技术分享2 小时前
204. Java 异常 - Error 类:表示 Java 虚拟机中的严重错误
前端·后端
uhakadotcom2 小时前
execjs有哪些常用的api,如何逆向分析网站的加签机制
前端·javascript·面试
ObjectX前端实验室2 小时前
【图形编辑器架构】:无限画布标尺与网格系统实现解析
前端·canvas·图形学
你的电影很有趣2 小时前
lesson71:Node.js与npm基础全攻略:2025年最新特性与实战指南
前端·npm·node.js
闲蛋小超人笑嘻嘻2 小时前
find数组方法详解||Vue3 + uni-app + Wot Design(wd-picker)使用自定义插槽内容写一个下拉选择器
前端·javascript·uni-app
小牛itbull3 小时前
初始化electron项目运行后报错 electron uninstall 解决方法
前端·javascript·electron