AI制作社交名片教程：小白也能輕松上手的前端技能

原標(biāo)題：只需幾步，小白也能用 AI 做出精致社交名片！

【用 AI 制作個(gè)人社交名片】

讓小白也能輕松掌握前端技能

制作如下的個(gè)人社交名片??

一起來學(xué)習(xí)

清晰的任務(wù)拆解思維

實(shí)用的提示詞編寫技巧

零基礎(chǔ)友好的 AI 輔助開發(fā)體驗(yàn)

現(xiàn)在開始我們的 AI 編程打怪升級之旅吧~

任務(wù)拆解思維

整體到局部

將大任務(wù)分解為小任務(wù)是一項(xiàng)重要的能力。

以制作名片為例，我們可以這樣拆解：

循序漸進(jìn)

按照"先有后優(yōu)"的原則，我們的開發(fā)過程是：

• 先搭建基礎(chǔ)框架
• 再實(shí)現(xiàn)核心功能
• 最后進(jìn)行美化優(yōu)化

接下來進(jìn)入實(shí)操階段，豆包MarsCode 啟動！

分步驟拆解和實(shí)操

生成框架卡片

第一步讓豆包MarsCode 生成初步框架

我想要制作一張名片，請使用常用的大小幫我用html代碼制作一張名片。

為什么這樣寫呢？

• 明確目標(biāo)為【制作名片】
• 指定要求為【常用大小】
• 限定格式為【html 代碼】

點(diǎn)擊圖片查看具體操作流程

接下來觀察 AI 返回的代碼，關(guān)注以下幾點(diǎn)：

• 整體結(jié)構(gòu)是否完整
• 尺寸是否合理
• 基礎(chǔ)樣式是否存在

名片排版

將卡片分為左右兩份，左邊占35%，右邊占剩余的65%。
左邊區(qū)域使用清新的底色，使用 photo.png 作為頭像；右邊區(qū)域放置文字，所有文字左端對齊。

通過這段話，我們向豆包MarsCode 明確了三個(gè)需求：

• 明確比例為【35:65】
• 指定內(nèi)容為【底色、頭像、文字】
• 描述文字及頭像位置

點(diǎn)擊圖片查看具體操作流程

樣式優(yōu)化

接下來將針對配色、字體、排版及樣式進(jìn)行優(yōu)化

使用「淡紫色和白色」的優(yōu)化樣式。

點(diǎn)擊圖片查看具體操作流程

使用「商務(wù)專業(yè)風(fēng)格」方案優(yōu)化我的字體。

點(diǎn)擊查看具體操作流程

在上面的基礎(chǔ)上，為標(biāo)題、職位、聯(lián)系信息（電話和郵箱）三項(xiàng)字體設(shè)計(jì)一套大小、配色方案，注意使用內(nèi)聯(lián)樣式。

點(diǎn)擊圖片查看具體操作流程

在上面的基礎(chǔ)上，右側(cè)字體的“電話”、“郵箱” 使用 svg 圖標(biāo)元素，注意圖標(biāo)元素和文字元素水平上一定要對齊，使用 div 對齊。

點(diǎn)擊圖片查看具體操作流程

以上調(diào)整完畢后填入個(gè)人信息就OK啦！

使用個(gè)人信息

去掉“電話”“郵箱”兩個(gè)詞，使用我的個(gè)人信息：


云中江樹


LangGPT作者


電話 123456789


郵箱 ethereal_ai@hotmail.com

點(diǎn)擊圖片查看具體操作流程

導(dǎo)出卡片

使用瀏覽器節(jié)點(diǎn)截圖功能即可get成品~

點(diǎn)擊圖片查看具體操作流程

以上就是本期教程啦！

大家是否收獲滿滿準(zhǔn)備狂撒名片了呢？

點(diǎn)擊【豆包MarsCode】即刻學(xué)習(xí)更多AI教程