太简单了!HTML+AI两步生成小红书语录卡片,12套配色随便换,零基础也能做出高级感封面!(附完整代码)

刷小红书的时候，你有没有刷到过这种封面？

一张干净的背景，一句扎心的话，配上恰到好处的配色——高级感直接拉满。

我之前一直以为这种图要用PS或者Canva慢慢调。直到有一天我实在懒得动手，就把需求丢给了AI。

结果AI给我生成了一个HTML文件。改几个字，换个主题，截图——完事。

整个过程不到5分钟。关键是，你不用学设计，不用装软件，甚至不太懂代码都行。

今天就把这个方法分享给你。

这个封面怎么做呢？

废话少说，老陈一步步教大家怎么弄。

1、复制下面的HTML代码，保存成名字叫xiaohognshu.html

PS：名字可以随便改，后缀是.html即可。代码也不是老陈自己写的，让AI帮我生成的。

<!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>

2、双击打开或者右键选择浏览器进行打开，应该就可以看到下面这个画面。

3、主题修改。上面的代码里面内置了12种配色。

主题名称对照表：

mint：薄荷粉彩（你的原版配色，清新治愈）
oatmeal：燕麦拿铁（极简风，高级感中性色）
ice-blue：极简冷灰蓝（清冷文艺，非常适合emo/哲理语录）
sunset：落日暖桃（橘黄色调，温馨有活力）
matcha：宇治抹茶（宁静自然，适合复盘/成长类）
lavender：香芋轻紫（温柔浪漫，有女性力量感）
midnight：暗夜星空（深色模式，金色高亮，适合深夜晚安语录）
butter：元气奶油黄（明快活力，适合正能量/早安鸡汤）
vintage：复古胶片（低饱和棕红色，港风浓郁）
ocean：蔚蓝海岸（海风感，开阔豁达的心境）
rose：玫瑰柔纱（甜美纯欲，适合恋爱/情感类）
cyber：赛博朋克（黑底+霓虹高亮，适合酷感张扬的内容）

修改方式，只需要修改下面双引号里面的主题，保存就可以切换主题颜色了。

<bodydata-theme="butter">

位置在这里：

比如，我们修改成：

<bodydata-theme="cyber">

效果如下：

怎么样，是不是感觉张扬了很多。

4、文案修改跟标记的位置，是在下面这部分进行修改

        <divclass="content">            曾经，让你<spanclass="highlight">无比</span><br>            <spanclass="highlight">焦虑</span>的事，最后<br>            都怎么样了呢        </div>

4.1 着重标记

标记的文案用<spanclass="highlight"></span>包裹着，那它会有背景颜色

<spanclass="highlight">焦虑</span>

4.2 换行

输入<br>代表换行，一般一行也就五六个字，然后插入一个<br>就好了。

4.3 文字修改

        <divclass="content">            <spanclass="highlight">人生</span><br>            <spanclass="highlight">最艰难</span>的时候<br>            你是靠哪句话<br>            撑下去的？        </div>

上面翻译“人生”加标记+换行，“最艰难”加标记“的时候”+换行

“你是靠哪句话”换行，写完“撑下去的？”

PS：我还顺便换了主题：“matcha”，就抹茶色。

5、截图保存到本地

-----------------------END-------------------------

评论区聊聊

你最喜欢哪种主题风格？

或者你最近有哪句特别想做成卡片的语录？

发在评论区，我可以帮你生成一张试试。

如果这篇对你有用，收藏+在看，下次做封面直接翻出来照做就行。

我是老陈，我们下期见！