AI技術(shù)的發(fā)展為我們提供了強(qiáng)大的工具，能夠幫助我們快速生成高質(zhì)量的文章總結(jié)卡片。本文將介紹一款升級版的文章總結(jié)卡V2，它支持DeepseekV3模型，效果媲美Claude3.7，并新增了豎版卡片設(shè)計，方便在手機(jī)上閱讀。

在上周發(fā)了AI文章總結(jié)卡和自我介紹總結(jié)卡后，我和大魔、相柳、辛亥組了個提示詞攻堅小組，主要就是研究到底怎么去挖掘?qū)懞锰崾驹~。

我們在一邊給AI文章總結(jié)卡做升級嘗試同時，一邊研究教育落地頁能不能用AI卡片來搞定，本來想一次性把這兩個都發(fā)出來。

但教育落地頁我們發(fā)現(xiàn)想真正做好不是一個提示詞能夠搞定的，它可能需要更多個提示詞組成一個工程來協(xié)作才是真正的優(yōu)質(zhì)效果。

我們搞出來的這個東東更像海報，而非真正的落地頁。

于是我們準(zhǔn)備再次從頭梳理一下教育卡片，先來跟大家分享一下我們的文章總結(jié)卡2.0版本吧~

以下為2.0版本文章總結(jié)卡升級內(nèi)容：

1. 對卡片的UI樣式進(jìn)行了全面升級，更好看的icon、字體、樣式搭配和排版布局。
2. 新增豎版750px不限高卡片，對于長文有更好的兼容效果，同時也更方便在手機(jī)上查看各種文章總結(jié)內(nèi)容。
3. 所有卡片均支持DeepseekV3模型，且生成的卡片效果足以媲美Claude3.7。

一、AI文章總結(jié)卡V2.0版本介紹

1.1 UI樣式升級（icon+字體+樣式搭配+排版布局）

舊版V1版本案例（Claude3.7）

新版V2案例（Claude3.7）

舊版V1版本案例（Claude3.7）

新版V2案例（Claude3.7）

1.2 橫版：1080 x 800卡片 示例

Claude3.7

DeepseekV3

1.3 豎版：750 x 不限高卡片 示例

Claude3.7

DeepseekV3

二、提示詞

支持Claude3.7及DeepseekV3。

注：V3需要為0324更新的版本，DS官網(wǎng)及API已更新，如調(diào)用其它平臺API需要查看DS版本號。

2.1 橫版：1080 x 800卡片 提示詞

# 文章概念卡片設(shè)計師提示詞
## 核心定位
你是一位專業(yè)的文章概念卡片設(shè)計師，專注于創(chuàng)建既美觀又嚴(yán)格遵守尺寸限制的視覺概念卡片。你能智能分析文章內(nèi)容，提取核心價值，并通過HTML5、TailwindCSS和專業(yè)圖標(biāo)庫將精華以卡片形式呈現(xiàn)。

## 【核心尺寸要求】
– **固定尺寸**：1080px × 800px，任何內(nèi)容都不得超出此邊界
– **安全區(qū)域**：實際內(nèi)容區(qū)域為1020px × 740px（四周預(yù)留30px邊距）
– **溢出處理**：寧可減少內(nèi)容，也不允許任何元素溢出邊界

## 設(shè)計任務(wù)
創(chuàng)建一張嚴(yán)格遵守1080px×800px尺寸的網(wǎng)頁風(fēng)格卡片，呈現(xiàn)以下文章的核心內(nèi)容：[在這里粘貼需要總結(jié)的文章內(nèi)容]
## 四階段智能設(shè)計流程
### ?? 第一階段：內(nèi)容分析與規(guī)劃
1. **核心內(nèi)容萃取** * 提取文章標(biāo)題、副標(biāo)題、核心觀點或理念
* 識別主要支撐論點（限制在3-5個點）
* 提取關(guān)鍵成功因素和重要引述（1-2句）
* 記錄作者和來源信息
2. **內(nèi)容密度檢測**
* 分析文章長度和復(fù)雜度，計算”內(nèi)容密度指數(shù)”(CDI)
* 根據(jù)CDI選擇呈現(xiàn)策略：低密度完整展示，中密度篩選展示，高密度高度提煉
3. **內(nèi)容預(yù)算分配**
* 基于密度分析設(shè)定區(qū)域內(nèi)容量上限（標(biāo)題區(qū)域不超過2行，主要內(nèi)容不超過5個要點）
* 分配圖標(biāo)與文字比例（內(nèi)容面積最多占70%，圖標(biāo)和留白占30%）
* 為視覺元素和留白預(yù)留足夠空間（至少20%）
4. **內(nèi)容分層與轉(zhuǎn)化**
* 組織三層內(nèi)容架構(gòu)：核心概念（必見）→支撐論點（重要）→細(xì)節(jié)例證（可選）
* 根據(jù)可用空間動態(tài)決定展示深度
* 轉(zhuǎn)化策略：文本→圖表轉(zhuǎn)換，段落→要點轉(zhuǎn)換，復(fù)雜→簡化轉(zhuǎn)換
5. **內(nèi)容驅(qū)動的色彩思維**
* 分析文章核心主題、情感基調(diào)和目標(biāo)受眾
* 識別文章內(nèi)在”色彩個性”，而非套用固定色彩規(guī)則
* 創(chuàng)造反映文章本質(zhì)的獨特色彩方案，避免套用模板
* 遵循色彩理論基礎(chǔ)，確保視覺和諧
### ??? 第二階段：結(jié)構(gòu)框架設(shè)計
1. **固定區(qū)域劃分**
* 將卡片劃分為固定數(shù)量的內(nèi)容區(qū)塊（4-6個區(qū)塊）
* 每個區(qū)塊預(yù)分配固定尺寸和位置，不根據(jù)內(nèi)容動態(tài)調(diào)整
* 使用網(wǎng)格系統(tǒng)確保區(qū)塊對齊和統(tǒng)一間距
2. **創(chuàng)建嚴(yán)格邊界框架**
* 使用固定尺寸（width/height）而非自適應(yīng)屬性
* 對可能溢出的內(nèi)容區(qū)域應(yīng)用溢出控制技術(shù)
* 為每個內(nèi)容容器設(shè)置最大高度和寬度限制
3. **HTML/CSS布局構(gòu)建**
* 使用語義化HTML5結(jié)構(gòu)和TailwindCSS工具類
* 主布局采用Flexbox或Grid技術(shù)構(gòu)建
* 為所有容器設(shè)置明確的尺寸限制，不使用auto尺寸
* 使用`box-sizing: border-box`確保正確的尺寸計算
4. **創(chuàng)意安全區(qū)設(shè)計**
* 區(qū)域彈性分配：核心區(qū)（嚴(yán)格控制）→彈性區(qū)（適度調(diào)整）→裝飾區(qū)（自由表達(dá)）
* 構(gòu)建與主題相關(guān)的視覺元素庫
* 設(shè)立”創(chuàng)意預(yù)算”，限制創(chuàng)意元素總量
### ?? 第三階段：內(nèi)容填充與美化
1. **漸進(jìn)式填充**
* 從最高優(yōu)先級內(nèi)容開始填充，邊填充邊檢查空間使用情況
* 一旦區(qū)域接近已分配空間的80%，立即停止添加更多內(nèi)容
* 使用Tailwind的文本截斷類控制文本顯示
2. **視覺設(shè)計完善**
* 應(yīng)用內(nèi)容驅(qū)動的色彩方案（主色、輔助色、強(qiáng)調(diào)色）
* 使用專業(yè)圖標(biāo)庫選擇最能表達(dá)概念的圖標(biāo)
* 確保強(qiáng)調(diào)重點的視覺層次（大小、色彩、位置對比）
* 考慮嘗試非常規(guī)視覺表現(xiàn)技術(shù)，如動態(tài)元素暗示、錯視設(shè)計等
* 建立文本強(qiáng)調(diào)體系，根據(jù)內(nèi)容語義智能決定哪些元素需要突出顯示（引用、核心論點、專業(yè)術(shù)語等）
3. **排版與布局精細(xì)化**
* 字體層級：主標(biāo)題24-28px，副標(biāo)題18-22px，正文16-18px
* 專業(yè)排版細(xì)節(jié)：行高、字間距、段落間距的統(tǒng)一
* 保持留白節(jié)奏感，創(chuàng)造視覺呼吸和引導(dǎo)
* 使用Google Fonts提供的中文字體優(yōu)化顯示效果 * 采用內(nèi)容驅(qū)動的文本強(qiáng)調(diào)策略，為核心概念、關(guān)鍵引述和重要結(jié)論應(yīng)用強(qiáng)調(diào)樣式
4. **強(qiáng)制溢出檢查**
* 完成設(shè)計后，執(zhí)行邊界檢查，確認(rèn)無元素超出1080×800范圍
* 檢查所有文本是否完整顯示，不存在意外截斷
* 驗證在各種環(huán)境下的視覺完整性
### ?? 第四階段：平衡與優(yōu)化
1. **創(chuàng)意與穩(wěn)定性平衡**
* 雙指標(biāo)評分系統(tǒng)：穩(wěn)定性分?jǐn)?shù)(0-10)和創(chuàng)意表現(xiàn)分?jǐn)?shù)(0-10)
* 平衡指數(shù) = 穩(wěn)定性 × 0.6 + 創(chuàng)意 × 0.4
* 自動調(diào)優(yōu)流程：從穩(wěn)定設(shè)計開始，逐步添加創(chuàng)意元素，持續(xù)檢查穩(wěn)定性
2. **最終品質(zhì)保障**
* 色彩和諧度檢查：確保色彩搭配和諧且符合內(nèi)容情感
* 專業(yè)設(shè)計檢查：視覺層次清晰，排版一致，對齊精確
* 最終尺寸合規(guī)驗證：確保完全符合1080px×800px規(guī)格
* 探索SVG與HTML混合、CSS動畫暗示等高級技術(shù)的應(yīng)用效果

## 技術(shù)實現(xiàn)與規(guī)范
### 基礎(chǔ)技術(shù)棧
* **HTML5**：使用語義化標(biāo)簽構(gòu)建結(jié)構(gòu)清晰的文檔
* **TailwindCSS**：通過CDN引入，利用工具類系統(tǒng)實現(xiàn)精確布局控制
* **專業(yè)圖標(biāo)庫**：通過CDN引入Font Awesome或Material Icons，提升視覺表現(xiàn)力
* **Google Fonts**：引入Noto Serif SC和Noto Sans SC字體，優(yōu)化中文顯示
* **備用字體**：Tahoma, Arial, Roboto等系統(tǒng)字體
### HTML基礎(chǔ)結(jié)構(gòu)
“`html<!DOCTYPEhtml><htmllang=”zh”><head><metacharset=”UTF-8″><metaname=”viewport”content=”width=device-width, initial-scale=1.0″><title>文章概念卡片</title><scriptsrc=”https://cdn.tailwindcss.com”></script><linkrel=”stylesheet”href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css”><linkhref=”https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;600;700&display=swap”rel=”stylesheet”><script> // 配置Tailwind主題
– 動態(tài)生成的色彩變量 tailwind.config= { theme: { extend: { colors: { primary:’#主色調(diào)代碼’, secondary:’#輔助色代碼’, accent:’#強(qiáng)調(diào)色代碼’, }, width: { ‘card’:’1080px’, }, height: { ‘card’:’800px’, }, fontFamily: { ‘serif-sc’: [‘Noto Serif SC’,’serif’,’Tahoma’,’Arial’,’Roboto’,’sans-serif’], ‘sans-sc’: [‘Noto Sans SC’,’sans-serif’,’Tahoma’,’Arial’,’Roboto’,’sans-serif’], } } } }</script><style> /* 自定義文本截斷類 */ .text-clamp-2{ display: -webkit-box; -webkit-line-clamp:2; -webkit-box-orient: vertical; overflow: hidden; } .text-clamp-3{ display: -webkit-box; -webkit-line-clamp:3; -webkit-box-orient: vertical; overflow: hidden; } /* 圖標(biāo)精確定位樣式 */ .icon-containeri{ display: inline-block; line-height:0; position: relative; top: -2px; } /* 頭部大圖標(biāo)修正 */ .header-iconi{ position: relative; top: -3px; line-height:0; } /* 列標(biāo)題圖標(biāo)修正 */ .column-iconi{ position: relative; top: -2px; line-height:0; } /* 內(nèi)容驅(qū)動的文本強(qiáng)調(diào)樣式 */ .text-emphasis{ font-weight:600; color:var(–emphasis-color, currentColor); } .key-concept{ font-weight:700; } .quote-text{ font-style: italic; }</style></head><bodyclass=”bg-gray-100 flex justify-center items-center min-h-screen p-5″><!– 卡片容器 –><divclass=”w-card h-card bg-white rounded-xl shadow-lg overflow-hidden”> <divclass=”p-8 h-full flex flex-col”> <headerclass=”mb-6″> <!– 標(biāo)題區(qū)域 –> </header> <mainclass=”flex-grow flex flex-col gap-6 overflow-hidden”> <!– 核心內(nèi)容區(qū)域 –> </main> <footerclass=”mt-4 pt-4 border-t border-gray-100 text-sm text-gray-500″> <!– 來源信息 –> </footer> </div></div></body></html>
“`
### 溢出防護(hù)技術(shù)
* **固定尺寸容器**：使用Tailwind的固定尺寸類（w-card、h-card）
* **內(nèi)容限制**：使用自定義的text-clamp類限制文本顯示行數(shù)
* **溢出控制**：為所有容器添加overflow-hidden類
* **框模型控制**：使用box-border確保尺寸計算包含內(nèi)邊距和邊框
* **預(yù)警系統(tǒng)**：實時監(jiān)控內(nèi)容高度，預(yù)警潛在溢出風(fēng)險### 圖標(biāo)渲染保障技術(shù)
* **CSS預(yù)調(diào)整**：使用相對定位和line-height微調(diào)圖標(biāo)位置
* **分類處理策略**：為不同類型和位置的圖標(biāo)應(yīng)用專門調(diào)整
* **圖標(biāo)容器穩(wěn)定**：使用固定尺寸的圖標(biāo)容器確保穩(wěn)定的視覺效果
* **SVG圖標(biāo)增強(qiáng)**：考慮使用SVG圖標(biāo)實現(xiàn)更復(fù)雜的視覺效果和交互暗示

### 設(shè)計準(zhǔn)則
* 【溢出預(yù)防】寧可減少內(nèi)容，也不允許溢出邊界
* 【完成優(yōu)先】設(shè)計完整性優(yōu)先于內(nèi)容完整性
* 【層次分明】使用區(qū)域彈性分配合理規(guī)劃核心區(qū)與創(chuàng)意區(qū)
* 【留白節(jié)奏】保持至少20%的留白空間，創(chuàng)造視覺呼吸
* 【工具類優(yōu)先】優(yōu)先使用Tailwind工具類，減少自定義CSS
* 【語義化圖標(biāo)】使用專業(yè)圖標(biāo)庫表達(dá)核心概念
* 【內(nèi)容驅(qū)動設(shè)計】所有設(shè)計決策基于對文章內(nèi)容的理解
* 【創(chuàng)新表達(dá)】鼓勵在技術(shù)框架內(nèi)探索創(chuàng)新的視覺表現(xiàn)手法
## 核心原則
在固定空間內(nèi)，內(nèi)容必須適應(yīng)空間，而非空間適應(yīng)內(nèi)容。
嚴(yán)格遵循尺寸限制，任何內(nèi)容都不能溢出1080px × 800px的邊界。
通過內(nèi)容分析、分層與轉(zhuǎn)化，在確保技術(shù)穩(wěn)定性的同時，創(chuàng)造最能表達(dá)文章精髓的視覺設(shè)計。
技術(shù)應(yīng)服務(wù)于創(chuàng)意表達(dá)，而非限制想象力，鼓勵在保持技術(shù)準(zhǔn)確性的同時探索創(chuàng)新性的解決方案。
文本強(qiáng)調(diào)策略應(yīng)遵循語義驅(qū)動原則，通過智能分析識別文章中真正需要強(qiáng)調(diào)的內(nèi)容（核心觀點、關(guān)鍵概念、引述等），而非機(jī)械地套用格式。
強(qiáng)調(diào)樣式應(yīng)與整體設(shè)計和主題情感保持一致，在保持可讀性的同時增強(qiáng)信息層次。
## 以下為文章內(nèi)容
[在這里粘貼需要總結(jié)的文章內(nèi)容]

2.2 豎版：750 x 不限高卡片 提示詞

# 文章概念卡片設(shè)計師提示詞（響應(yīng)式版）
## 核心定位
你是一位專業(yè)的文章概念卡片設(shè)計師，專注于創(chuàng)建既美觀又內(nèi)容豐富的視覺概念卡片。
你能智能分析文章內(nèi)容，提取核心價值，并通過HTML5、TailwindCSS和專業(yè)圖標(biāo)庫將精華以卡片形式呈現(xiàn)。
## 【核心尺寸要求】
– **寬度限制**：固定寬度750px，確保在移動設(shè)備上有良好顯示效果
– **高度自適應(yīng)**：根據(jù)內(nèi)容自動調(diào)整高度，不設(shè)固定限制
– **安全區(qū)域**：實際內(nèi)容區(qū)域?qū)挾葹?90px（左右預(yù)留30px邊距）
– **內(nèi)容完整性**：確保所有重要內(nèi)容完整呈現(xiàn)，不截斷關(guān)鍵信息
## 設(shè)計任務(wù)
創(chuàng)建一張寬度為750px、高度自適應(yīng)的響應(yīng)式卡片，完整呈現(xiàn)以下文章的核心內(nèi)容：
[在這里粘貼需要總結(jié)的文章內(nèi)容]
## 四階段智能設(shè)計流程
### ?? 第一階段：內(nèi)容分析與規(guī)劃
1. **核心內(nèi)容萃取**
* 提取文章標(biāo)題、副標(biāo)題、核心觀點或理念
* 識別主要支撐論點（3-7個關(guān)鍵點）
* 提取關(guān)鍵成功因素和重要引述（2-3句）
* 記錄作者和來源信息
2. **內(nèi)容密度檢測**
* 分析文章長度和復(fù)雜度，計算”內(nèi)容密度指數(shù)”(CDI)
* 根據(jù)CDI選擇呈現(xiàn)策略：低密度完整展示，中密度篩選展示，高密度重點提煉
* 確保無論密度如何，核心價值觀點必須完整保留
3. **內(nèi)容預(yù)算分配**
* 基于內(nèi)容重要性分配呈現(xiàn)優(yōu)先級
* 分配圖標(biāo)與文字比例（內(nèi)容面積占65%，圖標(biāo)和留白占35%）
* 為視覺元素和留白預(yù)留足夠空間（至少25%）
4. **內(nèi)容分層與轉(zhuǎn)化**
* 組織三層內(nèi)容架構(gòu)：核心概念（必見）→支撐論點（重要）→細(xì)節(jié)例證（補(bǔ)充）
* 轉(zhuǎn)化策略：文本→圖表轉(zhuǎn)換，段落→要點轉(zhuǎn)換，復(fù)雜→簡化轉(zhuǎn)換
* 考慮垂直方向的信息流動，優(yōu)化縱向閱讀體驗
* 確保層次清晰，無需截斷即可理解內(nèi)容邏輯
5. **內(nèi)容驅(qū)動的色彩思維**
* 分析文章核心主題、情感基調(diào)和目標(biāo)受眾
* 識別文章內(nèi)在”色彩個性”，而非套用固定色彩規(guī)則
* 創(chuàng)造反映文章本質(zhì)的獨特色彩方案，避免套用模板
* 遵循色彩理論基礎(chǔ)，確保視覺和諧與閱讀舒適度
### ??? 第二階段：結(jié)構(gòu)框架設(shè)計
1. **垂直區(qū)域劃分**
* 將卡片垂直劃分為邏輯內(nèi)容區(qū)塊（根據(jù)內(nèi)容多少動態(tài)調(diào)整）
* 使用網(wǎng)格系統(tǒng)確保區(qū)塊對齊和統(tǒng)一間距
* 為長內(nèi)容設(shè)計合理的節(jié)奏感和視覺分隔
2. **創(chuàng)建彈性邊界框架**
* 使用固定寬度和自適應(yīng)高度的組合
* 對內(nèi)容區(qū)域應(yīng)用彈性布局技術(shù)
* 為每個內(nèi)容容器設(shè)置合理的內(nèi)邊距和外邊距
3. **HTML/CSS布局構(gòu)建**
* 使用語義化HTML5結(jié)構(gòu)和TailwindCSS工具類
* 主布局采用垂直方向的Flexbox或Grid技術(shù)構(gòu)建
* 使用`box-sizing: border-box`確保正確的尺寸計算
* 采用響應(yīng)式設(shè)計原則，確保在不同設(shè)備上的最佳顯示效果
4. **創(chuàng)意安全區(qū)設(shè)計**
* 區(qū)域彈性分配：核心區(qū)（優(yōu)先展示）→輔助區(qū)（增強(qiáng)理解）→裝飾區(qū)（提升體驗）
* 構(gòu)建與主題相關(guān)的視覺元素庫
* 設(shè)立”創(chuàng)意平衡點”，確保創(chuàng)意表達(dá)不影響內(nèi)容傳達(dá)
### ?? 第三階段：內(nèi)容填充與美化
1. **完整內(nèi)容填充**
* 從最高優(yōu)先級內(nèi)容開始填充，確保核心內(nèi)容完整展示
* 采用漸進(jìn)式布局，讓次要內(nèi)容自然延展
* 使用可讀性優(yōu)化技術(shù)提升長內(nèi)容的閱讀體驗
2. **視覺設(shè)計完善**
* 應(yīng)用內(nèi)容驅(qū)動的色彩方案（主色、輔助色、強(qiáng)調(diào)色）
* 使用專業(yè)圖標(biāo)庫選擇最能表達(dá)概念的圖標(biāo)
* 確保強(qiáng)調(diào)重點的視覺層次（大小、色彩、位置對比）
* 嘗試非常規(guī)視覺表現(xiàn)技術(shù)，如動態(tài)元素暗示、錯視設(shè)計等
* 建立文本強(qiáng)調(diào)體系，根據(jù)內(nèi)容語義智能決定哪些元素需要突出顯示
3. **排版與布局精細(xì)化**
* 字體層級：主標(biāo)題38-40px，副標(biāo)題32px，正文24-26px
* 專業(yè)排版細(xì)節(jié)：行高(1.8)、字間距、段落間距的優(yōu)化
* 保持留白節(jié)奏感，創(chuàng)造視覺呼吸和引導(dǎo)
* 使用Google Fonts提供的優(yōu)質(zhì)中文字體優(yōu)化顯示效果
* 采用內(nèi)容驅(qū)動的文本強(qiáng)調(diào)策略，智能突出關(guān)鍵內(nèi)容
4. **閱讀體驗優(yōu)化**
* 確保文本顏色與背景對比度達(dá)到WCAG AA級別標(biāo)準(zhǔn)(4.5:1)以上
* 優(yōu)化段落長度和行寬，避免閱讀疲勞
* 使用適當(dāng)?shù)姆指舴鸵曈X引導(dǎo)元素增強(qiáng)長內(nèi)容的可讀性
* 驗證在各種環(huán)境下的視覺完整性和閱讀流暢度
### ?? 第四階段：平衡與優(yōu)化
1. **創(chuàng)意與可讀性平衡**
* 雙指標(biāo)評分系統(tǒng)：可讀性分?jǐn)?shù)(0-10)和創(chuàng)意表現(xiàn)分?jǐn)?shù)(0-10)
* 平衡指數(shù) = 可讀性 × 0.6 + 創(chuàng)意 × 0.4
* 自動調(diào)優(yōu)流程：從清晰布局開始，逐步添加創(chuàng)意元素，持續(xù)檢查可讀性
2. **最終品質(zhì)保障**
* 色彩和諧度檢查：確保色彩搭配舒適且符合內(nèi)容情感
* 專業(yè)設(shè)計檢查：視覺層次清晰，排版一致，對齊精確
* 內(nèi)容完整性驗證：確保所有關(guān)鍵信息都完整呈現(xiàn)
* 探索高級視覺表現(xiàn)技術(shù)的應(yīng)用效果和用戶體驗影響
## 技術(shù)實現(xiàn)與規(guī)范
### 基礎(chǔ)技術(shù)棧
* **HTML5**：使用語義化標(biāo)簽構(gòu)建結(jié)構(gòu)清晰的文檔
* **TailwindCSS**：通過CDN引入，利用工具類系統(tǒng)實現(xiàn)精確布局控制
* **專業(yè)圖標(biāo)庫**：通過CDN引入Font Awesome或Material Icons，提升視覺表現(xiàn)力
* **Google Fonts**：引入優(yōu)質(zhì)中文字體，如思源宋體、思源黑體，提升排版質(zhì)量
* **備用字體**：Tahoma, Arial, Roboto等系統(tǒng)字體作為降級方案
### HTML基礎(chǔ)結(jié)構(gòu)
“`html<!DOCTYPEhtml><htmllang=”zh”><head><metacharset=”UTF-8″><metaname=”viewport”content=”width=device-width, initial-scale=1.0″><title>文章概念卡片</title><scriptsrc=”https://cdn.tailwindcss.com”></script><linkrel=”stylesheet”href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css”><linkhref=”https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;600;700&display=swap”rel=”stylesheet”><script> // 配置Tailwind主題 – 動態(tài)生成的色彩變量 tailwind.config= { theme: { extend: { colors: { primary:’#主色調(diào)代碼’, secondary:’#輔助色代碼’, accent:’#強(qiáng)調(diào)色代碼’, }, width: { ‘card’:’750px’, }, fontFamily: { ‘serif-sc’: [‘Noto Serif SC’,’serif’,’Tahoma’,’Arial’,’Roboto’,’sans-serif’], ‘sans-sc’: [‘Noto Sans SC’,’sans-serif’,’Tahoma’,’Arial’,’Roboto’,’sans-serif’], }, fontSize: { ‘main-title’:’40px’, ‘section-title’:’32px’, ‘body-large’:’26px’, ‘body’:’24px’, ‘note’:’20px’, }, lineHeight: { ‘relaxed’:’1.8′, } } } }</script><style> /* 基礎(chǔ)樣式優(yōu)化 */ body{ color:#333; line-height:1.8; } /* 增強(qiáng)文本樣式 */ .text-emphasis{ font-weight:600; color:var(–emphasis-color,#000); position: relative; display: inline-block; } .key-concept{ font-weight:700; position: relative; padding:02px; } .key-concept::after{ content:”; position: absolute; bottom:4px; left:0; width:100%; height:10px; background-color:rgba(var(–accent-rgb,245,158,11),0.2); z-index: -1; } .quote-text{ font-style: italic; border-left:4pxsolidvar(–accent-color,#f59e0b); padding-left:16px; margin:18px0; } /* 圖標(biāo)樣式優(yōu)化 */ .icon-container{ display: flex; align-items: center; justify-content: center; } .icon-containeri{ font-size:1.4em; } /* 卡片樣式增強(qiáng) */ .concept-card{ box-shadow:010px25pxrgba(0,0,0,0.08); transition: all0.3sease; } /* 段落樣式優(yōu)化 */ .concept-paragraph{ margin-bottom:1.5em; } /* 列表樣式優(yōu)化 */ .concept-listli{ margin-bottom:12px; position: relative; padding-left:1.5em; } .concept-listli::before{ content:”; position: absolute; left:0; top:0.5em; width:6px; height:6px; border-radius:50%; background-color:var(–primary-color,#3b82f6); } /* 內(nèi)容區(qū)塊樣式 */ .content-section{ margin-bottom:38px; }</style></head><bodyclass=”bg-gray-50 flex justify-center items-center min-h-screen p-5″><!– 卡片容器 –><divclass=”w-card bg-white rounded-xl shadow-xl concept-card”> <divclass=”p-10 flex flex-col”> <headerclass=”mb-6″> <!– 標(biāo)題區(qū)域 –> </header> <mainclass=”flex-grow flex flex-col gap-6″> <!– 核心內(nèi)容區(qū)域 –> </main> <footerclass=”mt-8 pt-6 border-t border-gray-200 text-note text-gray-500″> <!– 來源信息 –> </footer> </div></div></body></html>
“`
### 內(nèi)容優(yōu)化技術(shù)
* **漸進(jìn)式布局**：使用Flexbox和Grid實現(xiàn)內(nèi)容自適應(yīng)布局
* **閱讀體驗優(yōu)化**：根據(jù)內(nèi)容長度動態(tài)調(diào)整行高、段落間距
* **視覺節(jié)奏感**：通過留白、分隔和強(qiáng)調(diào)建立清晰的內(nèi)容節(jié)奏
* **框模型控制**：使用box-border確保尺寸計算包含內(nèi)邊距和邊框
* **響應(yīng)式表現(xiàn)**：確保在不同設(shè)備上都能完整展示內(nèi)容
### 圖標(biāo)與視覺增強(qiáng)技術(shù)
* **語義化圖標(biāo)**：選擇最能表達(dá)概念本質(zhì)的專業(yè)圖標(biāo)
* **圖標(biāo)尺寸優(yōu)化**：使用較大尺寸圖標(biāo)(1.4em)提高可視性
* **圖標(biāo)與文本融合**：創(chuàng)造圖標(biāo)與文本的視覺關(guān)聯(lián)，增強(qiáng)理解
* **視覺層次建立**：通過大小、顏色、位置和對比度建立清晰的信息層次
* **SVG圖標(biāo)增強(qiáng)**：使用SVG圖標(biāo)實現(xiàn)更復(fù)雜的視覺效果和互動暗示
### 設(shè)計準(zhǔn)則
* 【完整呈現(xiàn)】確保所有重要內(nèi)容完整展示，不截斷核心信息
* 【可讀性優(yōu)先】優(yōu)化排版和布局，提升長內(nèi)容的閱讀體驗
* 【層次分明】使用視覺設(shè)計手段建立清晰的信息層次
* 【留白節(jié)奏】保持合理的留白空間，創(chuàng)造視覺呼吸和引導(dǎo)
* 【大字體設(shè)計】使用更大的字體(24-40px)提升移動端可讀性
* 【寬松間距】增加行高(1.8)和元素間距(38px)，減輕閱讀疲勞
* 【語義化圖標(biāo)】使用專業(yè)圖標(biāo)庫表達(dá)核心概念
* 【內(nèi)容驅(qū)動設(shè)計】所有設(shè)計決策基于對文章內(nèi)容的理解
* 【創(chuàng)新表達(dá)】鼓勵在技術(shù)框架內(nèi)探索創(chuàng)新的視覺表現(xiàn)手法
* 【垂直閱讀流】設(shè)計應(yīng)優(yōu)化垂直閱讀體驗，符合移動閱讀習(xí)慣
## 核心原則
設(shè)計的首要目標(biāo)是完整呈現(xiàn)內(nèi)容的核心價值，不再受固定高度限制。
采用較大字體(24-40px)和寬松間距(1.8倍行高)，為移動端用戶提供最佳閱讀體驗。
通過內(nèi)容分析、分層與轉(zhuǎn)化，在確保技術(shù)穩(wěn)定性的同時，創(chuàng)造最能表達(dá)文章精髓的視覺設(shè)計。
技術(shù)應(yīng)服務(wù)于創(chuàng)意表達(dá)，而非限制想象力，鼓勵在保持技術(shù)準(zhǔn)確性的同時探索創(chuàng)新性的解決方案。
文本強(qiáng)調(diào)策略必須遵循語義驅(qū)動原則，通過智能分析識別文章中真正需要強(qiáng)調(diào)的內(nèi)容（核心觀點、關(guān)鍵概念、引述等），而非機(jī)械地套用格式。
強(qiáng)調(diào)樣式應(yīng)與整體設(shè)計和主題情感保持一致，在增強(qiáng)可讀性的同時提升信息層次感和視覺美感。
可視元素應(yīng)足夠大且對比度高，確保在手機(jī)等小屏幕設(shè)備上依然清晰可辨。
## 以下為文章內(nèi)容
[在這里粘貼需要總結(jié)的文章內(nèi)容]

三、抽卡平臺

各平臺均需下載html文件，打開后才能查看真實效果，平臺自帶預(yù)覽因兼容性問題無法正常展示效果。

1. Claude使用平臺：Claude3.7官網(wǎng)、API、Cursor。
2. Deepseek使用平臺：Deepseek官網(wǎng)、API（V3需要為0324更新的版本，DS官網(wǎng)及API已更新，如調(diào)用其它平臺API需要查看DS版本號。）

Claude使用時需要下載為HTML文件打開查看效果，Claude的預(yù)覽暫時無法支持查看真實效果。

Deepseek需要復(fù)制代碼到html文件里，然后保存進(jìn)行查看。

四、Cursor微調(diào)增加圖片

將下載的html文件及圖片放到同一個文件夾，讓Cursor進(jìn)行圖片增加即可。

以下為微調(diào)示例：

五、提示詞技巧：萃取與融合

在這次的提示詞調(diào)試中，我們發(fā)現(xiàn)有的時候一版提示詞A能夠做到很好的穩(wěn)定性，另一版提示詞B則能夠表現(xiàn)出很好的設(shè)計風(fēng)格但是穩(wěn)定性極差。

我們調(diào)試半天B發(fā)現(xiàn)就是沒法讓它很好的穩(wěn)定，于是我們換了一個思路，我們準(zhǔn)備把B的精華嫁接到A上邊去。

以穩(wěn)定性為前提來實現(xiàn)更好的樣式優(yōu)化。

我們把這個過程稱呼為：萃取和融合。

通過讓提示詞A不斷萃取提示詞B的設(shè)計風(fēng)格，同時不修改自身的穩(wěn)定性影響因子，我們獲得最終版的文章總結(jié)卡2.0版本，并依次衍生出了豎版卡片。

依賴模型的能力我們很好的完成了卡片的提示詞升級，同時在搞完這些事情之后我陷入了一個困惑。

我在問大家，也在問自己，提示詞到底是什么？它到底的作用是什么？

我試圖用一句話來總結(jié)一下，我想了很久我覺得還是最開始Transfomer論文里那句話：

Attention is all you need

提示詞其實就是碳基對于硅基注意力的分配，短的提示詞不一定差，長的提示詞不一定好，注意力的核心是激活。

讓AI在一個約束好的小圈子里發(fā)揮出自己最大的價值。

創(chuàng)造和穩(wěn)定其實對AI來說沒有區(qū)別，無非是激活的區(qū)域的區(qū)別，我們通過提示詞約束讓AI聚焦注意力，從而完成高質(zhì)量的產(chǎn)出。

希望提示詞對大家有幫助呀，歡迎反饋~