html-anything/next/src/lib/templates/skills/card-xiaohongshu/example.html at main · chenmofei/html-anything · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>5 个让你的 AI 编辑用得更顺手的小习惯</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;600;700;900&family=Inter:wght@500;600;700&display=swap" rel="stylesheet">
<style>
  body { margin:0; background:#f3eee5; font-family:'Noto Sans SC',sans-serif; padding:36px 0; -webkit-font-smoothing:antialiased; }
  .deck { display:flex; flex-direction:column; align-items:center; gap:24px; }
  .card { width:1080px; max-width:96vw; aspect-ratio:3/4; border-radius:32px; overflow:hidden; position:relative; padding:80px 64px; display:flex; flex-direction:column; box-shadow:0 24px 60px -20px rgba(0,0,0,0.18); }
  .c1 { background:linear-gradient(160deg,#f7d2c2 0%,#f3a98a 100%); color:#3a1d10; }
  .c2 { background:linear-gradient(160deg,#fff7e6 0%,#ffe4b8 100%); color:#3a2e10; }
  .c3 { background:linear-gradient(160deg,#e8f0e3 0%,#bcd6b3 100%); color:#1f3a1f; }
  .c4 { background:linear-gradient(160deg,#e7e8f5 0%,#bec1e8 100%); color:#1d1f4a; }
  .c5 { background:linear-gradient(160deg,#fce7f0 0%,#f5b3ce 100%); color:#4a1b34; }
  .c6 { background:linear-gradient(160deg,#fff8e1 0%,#f7c99b 100%); color:#3a2210; }
  .c7 { background:linear-gradient(160deg,#15140f 0%,#3a2620 100%); color:#fafaf7; }
  .badge { display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; background:rgba(255,255,255,0.55); backdrop-filter:blur(8px); font-size:18px; font-weight:600; align-self:flex-start; }
  .num { font-family:Georgia, serif; font-style:italic; font-size:120px; font-weight:700; line-height:0.9; opacity:0.85; margin-bottom:24px; }
  h2 { font-size:64px; font-weight:900; line-height:1.1; letter-spacing:-0.01em; margin:0 0 32px; }
  .body { font-size:30px; font-weight:500; line-height:1.55; opacity:0.85; max-width:24ch; }
  .watermark { position:absolute; bottom:32px; right:36px; font-size:16px; opacity:0.55; font-weight:500; }
  .pageno { position:absolute; top:36px; right:44px; font-family:'Inter',sans-serif; font-size:18px; font-weight:600; opacity:0.45; letter-spacing:0.08em; }
  .hero { font-size:120px; font-weight:900; line-height:1.0; letter-spacing:-0.025em; margin:0; }
</style>
</head>
<body>
<div class="deck">

  <div class="card c1">
    <div class="pageno">01 / 07</div>
    <div class="badge">⚡ 建议收藏 · 干货预警</div>
    <div style="margin:auto 0">
      <div style="font-size:24px; font-weight:600; opacity:0.7; margin-bottom:18px">AI 工具党 · 必看</div>
      <h2 class="hero">5 个让你的<br/>AI 编辑<br/>更顺手的<br/><span style="color:#9c2a25">小习惯</span></h2>
    </div>
    <div style="font-size:22px; opacity:0.65; font-weight:500">滑动看 →</div>
    <div class="watermark">@HTMLAnything · 5/11</div>
  </div>

  <div class="card c2">
    <div class="pageno">02 / 07</div>
    <div class="num">01</div>
    <h2>放弃<br/>完美 prompt</h2>
    <p class="body">你写的 prompt 不可能一次完美。把它当 <strong>对话</strong>, 不是 SQL。</p>
    <div class="watermark">@HTMLAnything</div>
  </div>

  <div class="card c3">
    <div class="pageno">03 / 07</div>
    <div class="num">02</div>
    <h2>让 AI 看见<br/>你的格式</h2>
    <p class="body">贴 markdown / CSV 之前, 先告诉它 <strong>"我希望输出像 X 风格"</strong>。<br/><br/>给一个具体参考, 比 50 个形容词管用。</p>
    <div class="watermark">@HTMLAnything</div>
  </div>

  <div class="card c4">
    <div class="pageno">04 / 07</div>
    <div class="num">03</div>
    <h2>用模板,<br/>别每次重写</h2>
    <p class="body">把好用的提示词存成模板。HTML Anything 直接选模板就行 ——<br/><br/><strong>9 套世界级设计 system</strong> 现成的。</p>
    <div class="watermark">@HTMLAnything</div>
  </div>

  <div class="card c5">
    <div class="pageno">05 / 07</div>
    <div class="num">04</div>
    <h2>二次编辑<br/>跑 diff</h2>
    <p class="body">重新生成不是从 0 开始。改完内容<strong>只发 diff</strong>, 让 AI 在已有 HTML 上微调 ——<br/><br/>省 80% token + 保持设计风格。</p>
    <div class="watermark">@HTMLAnything</div>
  </div>

  <div class="card c6">
    <div class="pageno">06 / 07</div>
    <div class="num">05</div>
    <h2>复用<br/>本地 session</h2>
    <p class="body">不用 API Key, 让本地 Claude / Cursor / Codex 跑。<br/><br/><strong>0 边际成本</strong>, 速度比远程 API 快得多。</p>
    <div class="watermark">@HTMLAnything</div>
  </div>

  <div class="card c7">
    <div class="pageno">07 / 07</div>
    <div style="margin:auto 0">
      <div style="font-size:24px; font-weight:600; color:#e9b94a; margin-bottom:24px">看完别走 ✨</div>
      <h2 class="hero" style="color:#fafaf7">工具不是<br/>越多越好,<br/><span style="color:#e9b94a">流程顺</span><br/>才是真的好用。</h2>
    </div>
    <div style="display:flex; gap:14px; font-size:22px; font-weight:600">
      <span style="padding:10px 22px; background:#e9b94a; color:#15140f; border-radius:999px">关注</span>
      <span style="padding:10px 22px; background:rgba(255,255,255,0.12); color:#fafaf7; border-radius:999px; border:1px solid rgba(255,255,255,0.2)">收藏</span>
      <span style="padding:10px 22px; background:rgba(255,255,255,0.12); color:#fafaf7; border-radius:999px; border:1px solid rgba(255,255,255,0.2)">分享</span>
    </div>
    <div class="watermark" style="color:rgba(255,255,255,0.5)">@HTMLAnything · 每周 AI workflow 实战</div>
  </div>

</div>
</body>
</html>