夜雨聆风刷小红书的时候，你有没有刷到过这种封面？
一张干净的背景，一句扎心的话，配上恰到好处的配色——高级感直接拉满。
我之前一直以为这种图要用PS或者Canva慢慢调。直到有一天我实在懒得动手，就把需求丢给了AI。
结果AI给我生成了一个HTML文件。改几个字，换个主题，截图——完事。
整个过程不到5分钟。关键是，你不用学设计，不用装软件，甚至不太懂代码都行。
今天就把这个方法分享给你。
<!DOCTYPE html><htmllang="zh-CN"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>小红书语录卡片 - 12款主题版</title><style>/* =========================================✨ 主题配置区 (12种配色方案)========================================= *//* 1. 薄荷粉彩 (原版) - 清新治愈 */body[data-theme="mint"] {--bg-color: #CFF3EB;--deco-color: #A6E2D6;--text-color: #3E4D52;--highlight-color: #F8C8DC;}/* 2. 燕麦拿铁 - 高级中性，极简风 */body[data-theme="oatmeal"] {--bg-color: #F5F0E6;--deco-color: #E1D5C9;--text-color: #5C4D43;--highlight-color: #D6C4B0;}/* 3. 极简冷灰蓝 - 清冷文艺，适合emo语录 */body[data-theme="ice-blue"] {--bg-color: #EBF1F4;--deco-color: #B8C5D1;--text-color: #2C3E50;--highlight-color: #D4E6F1;}/* 4. 落日暖桃 - 橘黄暖色调，温馨有活力 */body[data-theme="sunset"] {--bg-color: #FFF1E6;--deco-color: #FFD6BA;--text-color: #594A42;--highlight-color: #FFB5A7;}/* 5. 宇治抹茶 - 宁静自然，适合静心/复盘语录 */body[data-theme="matcha"] {--bg-color: #E8F0E4;--deco-color: #C2D5C4;--text-color: #3A4B3C;--highlight-color: #F3E5AB;}/* 6. 香芋轻紫 - 浪漫温柔，充满女性力量感 */body[data-theme="lavender"] {--bg-color: #F4EEFF;--deco-color: #DCD6F7;--text-color: #424874;--highlight-color: #A6B1E1;}/* 7. 暗夜星空 - 深邃沉静，适合晚安/深夜哲理 */body[data-theme="midnight"] {--bg-color: #2F3640;--deco-color: #718093;--text-color: #F5F6FA;--highlight-color: #E1B12C; /* 金色高亮 */}/* 8. 元气奶油黄 - 活力明快，适合鸡汤/正能量 */body[data-theme="butter"] {--bg-color: #FFF9E6;--deco-color: #FDE49C;--text-color: #5A4626;--highlight-color: #FFB8B8;}/* 9. 复古胶片 - 港风浓郁，文艺复古感 */body[data-theme="vintage"] {--bg-color: #E8D8C8;--deco-color: #C0A080;--text-color: #4A1515;--highlight-color: #C25953;}/* 10. 蔚蓝海岸 - 清新海风，开阔豁达 */body[data-theme="ocean"] {--bg-color: #E0F4FF;--deco-color: #87C4FF;--text-color: #0B2447;--highlight-color: #FFEED9;}/* 11. 玫瑰柔纱 - 甜美纯欲，适合情感/恋爱语录 */body[data-theme="rose"] {--bg-color: #FFF0F5;--deco-color: #FFB6C1;--text-color: #704264;--highlight-color: #FFDAB9;}/* 12. 赛博朋克 - 潮流前卫，适合酷炫/个性张扬 */body[data-theme="cyber"] {--bg-color: #111215;--deco-color: #22D3EE;--text-color: #FFFFFF;--highlight-color: #D946EF;}/* =========================================🎨 全局与结构样式========================================= */body {margin: 0;padding: 0;min-height: 100vh;display: flex;justify-content: center;align-items: center;background-color: #f2f2f2;font-family: "PingFang SC", "Hiragino Sans GB", -apple-system, "Microsoft YaHei", sans-serif;transition: background-color 0.3s ease; /* 增加切换动画 */}.card {position: relative;width: 375px;height: 500px;/* 使用变量替换固定颜色 */background-color: var(--bg-color);border-radius: 20px;box-shadow:0 20px 40px -10px rgba(62, 77, 82, 0.15),0 0 10px rgba(0,0,0,0.02);display: flex;flex-direction: column;justify-content: center;align-items: center;overflow: hidden;box-sizing: border-box;padding: 0 40px;transition: all 0.3s ease; /* 平滑过渡效果 */}.quote-mark {position: absolute;top: 45px;left: 35px;font-family: Arial, sans-serif;font-size: 110px;line-height: 1;font-weight: 900;/* 使用变量替换固定颜色 */color: var(--deco-color);opacity: 0.9;user-select: none;z-index: 1;transition: color 0.3s ease;}.bottom-dash {position: absolute;bottom: 50px;right: 45px;width: 36px;height: 6px;/* 使用变量替换固定颜色 */background-color: var(--deco-color);border-radius: 10px;z-index: 1;transition: background-color 0.3s ease;}.content {position: relative;z-index: 10;font-size: 38px;font-weight: 600;/* 使用变量替换固定颜色 */color: var(--text-color);line-height: 1.8;letter-spacing: 1.5px;text-align: left;margin-top: 20px;transition: color 0.3s ease;}.highlight {position: relative;display: inline-block;z-index: 0;}.highlight::after {content: '';position: absolute;left: -2px;right: -2px;top: 15%;bottom: 15%;/* 使用变量替换固定颜色 */background-color: var(--highlight-color);z-index: -1;border-radius: 2px;transition: background-color 0.3s ease;}</style></head><bodydata-theme="butter"><divclass="card"><divclass="quote-mark">“</div><divclass="content">曾经，让你<spanclass="highlight">无比</span><br><spanclass="highlight">焦虑</span>的事，最后<br>都怎么样了呢</div><divclass="bottom-dash"></div></div></body></html>
主题名称对照表：
mint：薄荷粉彩（你的原版配色，清新治愈）oatmeal：燕麦拿铁（极简风，高级感中性色）ice-blue：极简冷灰蓝（清冷文艺，非常适合emo/哲理语录）sunset：落日暖桃（橘黄色调，温馨有活力）matcha：宇治抹茶（宁静自然，适合复盘/成长类）lavender：香芋轻紫（温柔浪漫，有女性力量感）midnight：暗夜星空（深色模式，金色高亮，适合深夜晚安语录）butter：元气奶油黄（明快活力，适合正能量/早安鸡汤）vintage：复古胶片（低饱和棕红色，港风浓郁）ocean：蔚蓝海岸（海风感，开阔豁达的心境）rose：玫瑰柔纱（甜美纯欲，适合恋爱/情感类）cyber：赛博朋克（黑底+霓虹高亮，适合酷感张扬的内容）
修改方式，只需要修改下面双引号里面的主题，保存就可以切换主题颜色了。
<bodydata-theme="butter">位置在这里：
比如，我们修改成：
<bodydata-theme="cyber">
<divclass="content">曾经，让你<spanclass="highlight">无比</span><br><spanclass="highlight">焦虑</span>的事，最后<br>都怎么样了呢</div>
<spanclass="highlight">焦虑</span><divclass="content"><spanclass="highlight">人生</span><br><spanclass="highlight">最艰难</span>的时候<br>你是靠哪句话<br>撑下去的？</div>
评论区聊聊
你最喜欢哪种主题风格？
或者你最近有哪句特别想做成卡片的语录？
发在评论区，我可以帮你生成一张试试。
如果这篇对你有用，收藏+在看，下次做封面直接翻出来照做就行。
我是老陈，我们下期见！
