熱評 星若AI

很詳細,之前看過一個針對文章的知識卡片版本,這一篇剛好補足了其它知識卡片的場景,點贊作者~

超多模版!如何用AI快速批量制作設計感卡片?

嗨大家好啊!

今天原本正在寫最近比較火的 Claude3.7 制作信息卡片海報的過程,寫著寫著發現 DeepSeek V3 更新了,做信息卡片也很強!這里我沒有測評兩個之間的差距,只是挑選了兩個工具做的一些我覺得效果不錯的圖片展示。

目前看見許多大佬已經玩出很多花樣了,數不勝數非常有趣,這里我也想從設計的角度,分享一些關于我制作信息海報卡片的一些提示詞想法,只是我個人的使用心得,沒有什么深度,但是也期待能夠給大家帶來一些靈感~!

簡易版教程:

一、使用 Claude 制作的圖文展示

下面的每一張圖,都是使用 Claude 制作的,大部分是 svg 格式導圖片,小部分是 html 截圖:

超多模版!如何用AI快速批量制作設計感卡片?

超多模版!如何用AI快速批量制作設計感卡片?

超多模版!如何用AI快速批量制作設計感卡片?

大家主要看設計和版式,圖片里的文字內容沒有經過設定,基本是 AI 生成,文字內容沒有參考價值;最后 2 張的靈感來自于@云中江樹老師,這里超級感謝一下!

上面畫面的代碼我全都放在這個多維表格模板中了,大家復制網址打開,右上角點擊「使用該模板」就可以看見詳細代碼和使用:
https://a80cyp5nki.feishu.cn/base/OWq3bHmwxaBloCsqfeZcNGrTnSb?from=from_copylink

二、使用 DeepSeek V3 制作的卡片展示

這個是我使用了一個自己寫的玄學提示詞之后制作的圖片,前兩個是動圖:

超多模版!如何用AI快速批量制作設計感卡片?

超多模版!如何用AI快速批量制作設計感卡片?

超多模版!如何用AI快速批量制作設計感卡片?

原本想多嘗試一些案例發上來的,但是 deepseek 崩潰了……

三、我的 DeepSeek V3 玄學提示詞分享

之所以稱之為“玄學提示詞”,是因為這個看起來可能還有點亂七八糟不知所云也不完整,來源于我在做一個 html 的時候反復向 DeepSeek 提示后,在得到了相對比較滿意的結果后,向它提出總結和整理并且系統化我之前提出的所有提示詞要求,最后 DeepSeek 反推整理給我后我再整理的。使用它的方式很簡單,只要在提示詞最后將自己的要求和文案放上去就可以。上面第 2 部分絕大多數圖片都是這樣推導來的。

下面是完整代碼,最后一段我標注了!!!的位置可以進行內容修改,其他我留空的地方可改可不改,不改也不用擔心,享受快樂抽卡,AI 會幫你改,如果效果不好的話可以繼續抽卡。來嘗試一下吧,期待大家評論區的返圖!

超多模版!如何用AI快速批量制作設計感卡片?

超多模版!如何用AI快速批量制作設計感卡片?

超多模版!如何用AI快速批量制作設計感卡片?

超多模版!如何用AI快速批量制作設計感卡片?

超多模版!如何用AI快速批量制作設計感卡片?

超多模版!如何用AI快速批量制作設計感卡片?

超多模版!如何用AI快速批量制作設計感卡片?

注意:

  1. 一定要限定輸出格式比如“輸出為 html 格式代碼”,有時間還可以嘗試限定分辨率
  2. 這個在 Claude 3.7 和 DeepSeek 都可以使用,但是效果不一定特別穩定
  3. ?這個提示詞不是萬能的,僅供參考~

四、反推卡片與收集 svg 代碼復用

1. 一個很粗暴的復現卡片效果的的方式

直接使用參考圖,比如我在用 Monica 中的 Claude3.7 反推一個海報的流程如下:

首先在 canva 上找一張文字海報圖,發給 Claude 作為參考(疊甲:我是 canva 會員),這里我用的是 Monica 的 Claude 3.7,其他反推圖片代碼的 AI 可能就不太理想,豆包可以試一下,但是效果看運氣。

注意:做內容要有版權意識,參考圖不要隨便用網絡上別人的,除非你能改到完全面目全非不像原圖或者你有這個圖的商用權利。

超多模版!如何用AI快速批量制作設計感卡片?

然后我會得到反推的代碼,稍微做一些字體、行距上的要求和調整,提示詞和代碼太長了這里就不做截圖了。大概會用到的提示詞類似這樣:

超多模版!如何用AI快速批量制作設計感卡片?

根據自己的需要,查看預覽后給出調整要求。然后給到 Claude 主題和內容要求。我這里沒準備內容,直接給主題讓 Claude 輸出了。

超多模版!如何用AI快速批量制作設計感卡片?

在這樣帶要求的指令輸出后得到的效果:

超多模版!如何用AI快速批量制作設計感卡片?

左:原圖;中:第一次修改;右:調整內容后效果

當然,對于設計要求高的還可以繼續調整,這里只做一個簡單的思路的舉例。

做到這里,可能很多人會說了,你小子擱這脫褲子放 P 嗎,這樣一步步做還用的 Claude,我不如直接買個稿定設計或者創客貼 Canva 會員來的快嗎?!

這里說明下,首先,這個是最簡單的也沒有什么技術含量效果還快的辦法,適合自己輸入描述不出來但是想做類似類型的圖同時加入自己的想法的人。

2. 分享一個便于卡片復用的多維表格

另外我有一個想法,當我們獲得了一組生成圖片的代碼,可以使用飛書多維表格將它保存起來,再將預覽圖也保存,然后使用我下面的多維表格,在「輸入修改內容」的位置修改后,表格會自動出來根據內容修改后的圖片的 svg 代碼,哪怕你沒有 Claude 工具,也可以在通義和豆包 APP 使用他人分享的模板,修改后變成自己的內容輸出,也可以通過多維表格的多個表格進行快速復制。表格效果如下:

超多模版!如何用AI快速批量制作設計感卡片?

超多模版!如何用AI快速批量制作設計感卡片?

編輯表格列中生成的「修改后 svg 代碼」的單元格進行復制,將代碼貼到豆包或者通義的輸入框。

超多模版!如何用AI快速批量制作設計感卡片?

圖 1 是原圖;

超多模版!如何用AI快速批量制作設計感卡片?

圖 2 是在表格里修改主題和關鍵詞后的 2 個版本,這個是將代碼復制到豆包后的預覽效果。(豆包客戶端甚至支持了字體,太棒了。字體是匯文明朝體,我也放在多維表格模板的「工具網站推薦」收集表中了)

超多模版!如何用AI快速批量制作設計感卡片?

圖 3 是在通義的預覽效果。

可惜多維表格中目前無法實現 svg 和代碼的預覽,真期待有大佬早日發現這個需求并且將其實現一下哈哈哈。

這個飛書多維表格鏈接我在這里分享給大家,復制網址打開,右上角點擊「使用該模板」就可以看見詳細代碼和自行使用:
https://a80cyp5nki.feishu.cn/base/OWq3bHmwxaBloCsqfeZcNGrTnSb?from=from_copylink

最終得到的圖片可以截圖使用,也可以使用類似
https://chromewebstore.google.com/detail/svg-to-png/

這樣的插件,導出圖片。

五、讓 AI 生成更具風格的設計的提示詞技巧

因為我不是專業的提示詞工程師,接下來給到的一些提示詞靈感都是來自于我從設計角度上的想法,只是比較零碎的基于我自己個人經驗的一些關鍵詞參考,不是完整的、一用就一定有好結果的提示詞。如果需要一次性實現的,可以參考@歸藏的 AI 工具箱以及@向陽喬木推薦看之前的提示詞相關的公眾號推文,有幾段非常完整精巧的提示詞集合,使用的時候加入自己的要求基本就能得到很不錯的結果。

這些關于和設計有關的提示詞關鍵詞適用于各種格式的設計,網頁 UI 卡片可視化圖形等都可以考慮這些方面,對于生成想要的風格會有一些幫助。

1. 指定視覺元素

下面是一些可以具體指定以下元素的方式:

  1. 色彩 - 色彩方案、色調、飽和度、對比度
  2. 排版 - 使用字體、字號層級、行距、字距
  3. 布局 - 網格系統、空間組織、比例關系
  4. 技術和視覺動效 - 動畫原則、過渡效果、交互反饋

其他補充:

  1. 形狀與形式 - 幾何形狀、有機形態、線條風格
  2. 紋理與材質 - 表面、材質效果
  3. 圖像處理 - 圖片、圖標

在最開始的時候可以按照這樣的方向梳理自己的需求,這樣可以更加節省時間,也可以讓 AI 更清晰明白你想要的效果。

2. 加入設計風格

我個人認為這個是很重要的,加入設計風格的描述會很快產生質的變化,王受之的《世界現代設計史》和《世界現代建筑史》中有很清晰的提到很多設計師和風格,類似的設計風格可以在在網絡上進行搜索和查找,大概有個視覺印象更好。AI 視覺呈現出來不一定準,但是會帶給你靈感。

超多模版!如何用AI快速批量制作設計感卡片?

個人推薦的風格(不過有的藝術性很強,好看但不實用):

  1. 現代主義 - 有機形式、功能性
  2. 波普藝術 - 大膽色彩、流行文化元素
  3. 孟菲斯風格 - 幾何圖案、不協調色彩
  4. 極簡主義 - 簡潔、功能、減法設計
  5. 洛可可風格 - 輕盈優雅、柔和色調、自然元素、精致細節
  6. 巴洛克風格 - 宏偉戲劇性、強烈明暗對比、動感曲線
  7. 哥特風格 - 簡單說,就是吸血鬼、古堡、大教堂 (怎么樣有畫面了嗎)

比如這個是在終端風格的基礎上,修改提示詞為「洛可可風格」:

超多模版!如何用AI快速批量制作設計感卡片?

3. 使用你印象深刻的風格

如果你不是設計師,有一些游戲、影視等風格讓你印象深刻,那么它一定有它的獨特之處,將這個關鍵詞用在你的提示詞中會非常有趣。下面是一些靈感發散:

① 電影/影視風格

科幻類

銀翼殺手風格、異形風格、黑客帝國風格、星球大戰風格

奇幻/魔幻類

哈利波特風格、指環王風格、權力的游戲風格

② 游戲風格

像素藝術

超級馬里奧風格: 鮮艷色彩、磚塊、管道、可愛敵人

我的世界風格: 方塊世界、低分辨率紋理、簡單幾何形狀

傳說之下風格: 簡約像素、強烈色彩對比、卡通角色

現代游戲

塞爾達曠野之息風格: 柔和水彩風景、廣闊開放世界、自然元素

生化危機風格: 恐怖氛圍、廢棄設施、暗角處的危險

艾爾登法環風格: 哥特式奇幻、龐大建筑、神秘生物、金色點綴

獨立游戲

空洞騎士、紀念碑谷、死亡細胞

3. 動漫/漫畫風格

宮崎駿、新海誠、賽博朋克、進擊的巨人

舉個例子!圖 1 是最開始的效果,圖 2 是修改為「星球大戰風格」的效果(Claude 3.7):

超多模版!如何用AI快速批量制作設計感卡片?

4. 設計原則方法論

  1. 網格系統 - 如使用 X 欄網格
  2. 組織原則 - 要求層級清晰、整體平衡、要求對稱/非對稱等
  3. 視覺心理學 - 要求遵循格式塔原則、顏色心理學
  4. 好用的配色關鍵詞 - 莫蘭迪色、奶油色系、大地色系、漿果色系、日系清新色系、復古暖調色系、低飽和糖果色系

簡單點的話:

  1. 四個最簡單的調整要求:加強對比、重復、對齊、親密性(哪些內容放一起哪些內容不放一起)從細節上進行微調
  2. 四個最簡單的玄學口令(有點玄學、可以嘗試):①增加設計感 ②遵循網格設計排版 ③使用高對比度、清晰層次和精心控制的留白

不加任何其他提示,嘗試這幾個口令(圖片左上角可以看見指令):

超多模版!如何用AI快速批量制作設計感卡片?

超多模版!如何用AI快速批量制作設計感卡片?

超多模版!如何用AI快速批量制作設計感卡片?

超多模版!如何用AI快速批量制作設計感卡片?

細節上還有較大修改空間,但是就這樣沒有一個要求就直接生成,效果上還不錯了。

5. 最后一點,少即是多

上面的內容僅供參考,可以參考一些、部分組合,但千萬不要全放或者放太多,多多嘗試積累自己喜歡的風格,發現嘗試很多還是效果不夠好,可以回到第二條。

6. 最后最后一點,工具推薦(不一定最好,我用著順手)

svg 格式內容,個別整體完好,細節還有問題的話,可以使用 Figma 或 https://unpkg.com/svgedit@7.3.4/dist/editor/index.html人工調整 。

html 格式內容,推薦這個 https://html.onlineviewer.net/ ,粘貼代碼就可以快速預覽 html 效果,如果懂一點點代碼,改文字改位置不成問題。

快速將代碼轉換成網頁效果,推薦@歸藏的 AI 工具箱推薦的網站,貼代碼到上面就可以快速看到網頁效果了。 https://www.yourware.so/

收藏 50
點贊 60

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。