返回 html-ppt-skill
index.html
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1">
6 <title>XHS Pastel Card</title>
7 <link rel="stylesheet" href="../../../assets/fonts.css">
8 <link rel="stylesheet" href="../../../assets/base.css">
9 <link rel="stylesheet" href="style.css">
10 </head>
11 <body class="tpl-xhs-pastel-card">
12 <div class="deck">
13
14 <!-- 1. COVER -->
15 <section class="slide is-active">
16 <div class="xp-blob b1"></div>
17 <div class="xp-blob b2"></div>
18 <div class="xp-blob b3"></div>
19 <div class="xp-topbar"><div class="xp-chip">A soft manifesto</div><div class="xp-page">01 · 08</div></div>
20 <div class="xp-kicker">Living With AI · 2026</div>
21 <h1 class="xp-h1">放慢一点,<br>让 <em>AI</em> 帮你<br>过一种 <span class="rose">更温柔</span><br>的生活</h1>
22 <div class="xp-divider"></div>
23 <p class="xp-sub">这不是一份效率指南。这是一份「怎么用 AI 少做一些事」的清单 —— 把挤出来的 4 小时还给你自己。</p>
24 <div class="xp-footer"><span>by lewis · pastel edition</span><span>cover</span></div>
25 </section>
26
27 <!-- 2. SECTION -->
28 <section class="slide">
29 <div class="xp-blob b2"></div>
30 <div class="xp-blob b3"></div>
31 <div class="xp-topbar"><div class="xp-chip mint">Chapter one</div><div class="xp-page">02 · 08</div></div>
32 <div style="margin:auto 0">
33 <div class="xp-kicker">先问自己</div>
34 <h1 class="xp-h1" style="font-size:120px">什么事<br>是你 <span class="mint">其实不想做</span> 的?</h1>
35 <p class="xp-sub">不是「不得不做」,是「做的时候灵魂在叹气」。</p>
36 </div>
37 <div class="xp-footer"><span>section · chapter 1</span><span>02 · 08</span></div>
38 </section>
39
40 <!-- 3. CONTENT 2x2 pastel cards -->
41 <section class="slide">
42 <div class="xp-blob b1"></div>
43 <div class="xp-topbar"><div class="xp-chip rose">Four little escapes</div><div class="xp-page">03 · 08</div></div>
44 <h2 class="xp-h2">四件可以<br>完全交给 <em>AI</em> 的小事</h2>
45 <div class="xp-grid-2">
46 <div class="xp-card peach"><div class="xp-num">01</div><h4>回复那种「收到」邮件</h4><p>它们不需要你思考。让 AI 按你的语气自动处理,一周省 40 分钟。</p></div>
47 <div class="xp-card mint"><div class="xp-num">02</div><h4>订餐厅、改签、查路线</h4><p>一句话外包出去。你只负责选最后选项,不负责翻十个 app。</p></div>
48 <div class="xp-card sky"><div class="xp-num">03</div><h4>把会议录音变成行动项</h4><p>录音 → 摘要 → todo 一键完成。你只需要确认和签字。</p></div>
49 <div class="xp-card lilac"><div class="xp-num">04</div><h4>整理上周拍的 300 张照片</h4><p>按事件分类、挑 10 张精选、写图说。整理档案这件事终于被自动化了。</p></div>
50 </div>
51 <div class="xp-footer"><span>content · 2x2</span><span>03 · 08</span></div>
52 </section>
53
54 <!-- 4. QUOTE -->
55 <section class="slide">
56 <div class="xp-blob b3"></div>
57 <div class="xp-blob b2"></div>
58 <div class="xp-topbar"><div class="xp-chip lilac">A small pause</div><div class="xp-page">04 · 08</div></div>
59 <div class="xp-hero-card">
60 <p class="xp-quote">效率工具的终点,不是<em> 做更多</em>,<br>而是 <em>有资格做更少</em>。</p>
61 <div class="xp-divider"></div>
62 <p class="xp-sub">当你把「收到」邮件、订餐、行程、照片整理都交出去,你才会惊讶地发现 —— 原来一周有 4 个小时是空的。</p>
63 </div>
64 <div class="xp-footer"><span>quote</span><span>04 · 08</span></div>
65 </section>
66
67 <!-- 5. CODE / PROMPT -->
68 <section class="slide">
69 <div class="xp-blob b1"></div>
70 <div class="xp-topbar"><div class="xp-chip">My auto-reply prompt</div><div class="xp-page">05 · 08</div></div>
71 <h2 class="xp-h2">把「<em>收到邮件</em>」<br>自动化的 <span class="rose">一段 prompt</span></h2>
72 <pre class="xp-codebox"><span class="cm"># auto-reply skill</span>
73 <span class="kw">when</span> email matches <span class="st">"收到 / 好的 / 确认 / 收到谢谢"</span>:
74 reply:
75 tone: <span class="st">"温柔,简短,不要太商业"</span>
76 max_lines: <span class="hl">2</span>
77 sign_with: <span class="st">"— Lewis"</span>
78
79 <span class="kw">always_skip</span>:
80 - from: [<span class="st">"家人"</span>, <span class="st">"伴侣"</span>, <span class="st">"亲密朋友"</span>]
81 - contains: [<span class="st">"紧急"</span>, <span class="st">"合同"</span>, <span class="st">"付款"</span>]
82
83 <span class="cm"># 一周省 38 分钟,测过</span></pre>
84 <div class="xp-footer"><span>content · prompt</span><span>05 · 08</span></div>
85 </section>
86
87 <!-- 6. CHART — time donut -->
88 <section class="slide">
89 <div class="xp-blob b2"></div>
90 <div class="xp-topbar"><div class="xp-chip mint">Your week, rebuilt</div><div class="xp-page">06 · 08</div></div>
91 <h2 class="xp-h2">一周 4 小时 <span class="mint">还给自己</span></h2>
92 <div style="display:flex;align-items:center;gap:60px;margin-top:30px">
93 <svg viewBox="0 0 260 260" style="width:300px;flex-shrink:0">
94 <circle cx="130" cy="130" r="100" fill="none" stroke="#fef0e4" stroke-width="40"/>
95 <!-- email 12% -->
96 <circle cx="130" cy="130" r="100" fill="none" stroke="#f48b5c" stroke-width="40" stroke-dasharray="75 628" stroke-dashoffset="0" transform="rotate(-90 130 130)"/>
97 <!-- logistics 18% -->
98 <circle cx="130" cy="130" r="100" fill="none" stroke="#2e9d70" stroke-width="40" stroke-dasharray="113 628" stroke-dashoffset="-75" transform="rotate(-90 130 130)"/>
99 <!-- meetings 14% -->
100 <circle cx="130" cy="130" r="100" fill="none" stroke="#4e7ed6" stroke-width="40" stroke-dasharray="88 628" stroke-dashoffset="-188" transform="rotate(-90 130 130)"/>
101 <!-- photos 6% -->
102 <circle cx="130" cy="130" r="100" fill="none" stroke="#7b5dc4" stroke-width="40" stroke-dasharray="38 628" stroke-dashoffset="-276" transform="rotate(-90 130 130)"/>
103 <text x="130" y="130" text-anchor="middle" font-family="Playfair Display" font-size="44" font-weight="900" fill="#2a2340">4h</text>
104 <text x="130" y="156" text-anchor="middle" font-family="Inter" font-size="12" fill="#9089a8">per week saved</text>
105 </svg>
106 <div style="flex:1">
107 <div class="xp-grid-2" style="grid-template-columns:1fr;gap:12px;margin-top:0">
108 <div class="xp-card peach" style="padding:14px 20px;display:flex;align-items:center;gap:14px"><div style="width:14px;height:14px;border-radius:50%;background:var(--xp-peach-d)"></div><div><h4 style="margin:0;font-size:17px">48 min · 邮件</h4></div></div>
109 <div class="xp-card mint" style="padding:14px 20px;display:flex;align-items:center;gap:14px"><div style="width:14px;height:14px;border-radius:50%;background:var(--xp-mint-d)"></div><div><h4 style="margin:0;font-size:17px">72 min · 订/改/查</h4></div></div>
110 <div class="xp-card sky" style="padding:14px 20px;display:flex;align-items:center;gap:14px"><div style="width:14px;height:14px;border-radius:50%;background:var(--xp-sky-d)"></div><div><h4 style="margin:0;font-size:17px">56 min · 会议摘要</h4></div></div>
111 <div class="xp-card lilac" style="padding:14px 20px;display:flex;align-items:center;gap:14px"><div style="width:14px;height:14px;border-radius:50%;background:var(--xp-lilac-d)"></div><div><h4 style="margin:0;font-size:17px">24 min · 照片整理</h4></div></div>
112 </div>
113 </div>
114 </div>
115 <div class="xp-footer"><span>chart · donut</span><span>06 · 08</span></div>
116 </section>
117
118 <!-- 7. CTA -->
119 <section class="slide">
120 <div class="xp-blob b1"></div>
121 <div class="xp-blob b3"></div>
122 <div class="xp-topbar"><div class="xp-chip rose">This weekend</div><div class="xp-page">07 · 08</div></div>
123 <h2 class="xp-h2">这周末,<br>先给自己 <em>放一个小假</em></h2>
124 <div class="xp-grid-3">
125 <div class="xp-card lemon"><div class="xp-num">☕</div><h4>Saturday morning</h4><p>挑一个你最烦的小事,写 prompt,让它从此不再烦你。</p></div>
126 <div class="xp-card peach"><div class="xp-num">🌸</div><h4>Saturday afternoon</h4><p>去散步。什么都不带。AI 在家帮你看着消息。</p></div>
127 <div class="xp-card sky"><div class="xp-num">🌙</div><h4>Sunday night</h4><p>复盘:哪 4 小时是真的空的?下周继续。</p></div>
128 </div>
129 <div class="xp-footer"><span>cta</span><span>07 · 08</span></div>
130 </section>
131
132 <!-- 8. THANKS -->
133 <section class="slide">
134 <div class="xp-blob b2"></div>
135 <div style="margin:auto 0;text-align:center">
136 <div class="xp-kicker" style="text-align:center">thanks for reading</div>
137 <h1 class="xp-h1" style="font-size:160px;text-align:center">谢谢 <em>·</em> thanks</h1>
138 <div class="xp-divider" style="margin:24px auto"></div>
139 <p class="xp-sub" style="margin:0 auto">如果你也想过更温柔的一周,评论区跟我说说你打算把哪一件事先交出去 ♡</p>
140 </div>
141 <div class="xp-footer"><span>end</span><span>08 · 08</span></div>
142 </section>
143
144 </div>
145 <script src="../../../assets/runtime.js"></script>
146 </body>
147 </html>
148
148 lines HTML