前后对比：我们怎么把自己的落地页从「工具」做成「品牌」
逐区拆解我们自己落地页的改版前后——一个强调色、衬线嗓音、留白、真实证据，以及一套你可以照做的流程。
一个能用的页面，和一个让人记得住的页面，是两回事。
我们的旧落地页能用：把产品讲清楚了，步骤列全了，也能转化。但它看起来像个工具——而工具很容易 被忘记。所以我们把整页的视觉语言，从头到尾重做了一遍。
下面是逐区的 before / after：改了什么、为什么改，以及你可以在自己网站上照做的流程。
先说一句实话：clone 给你的是一个高质量的起点——可编辑源码，而不是一张白纸。重设计本身仍然是 设计工作。下面这些决策，才是把「能用的页面」变成「品牌」的关键。
起点：信息清楚，但像个工具
第一版用的是 "Paper and Evergreen" 风格：绿调的 hero、粗体无衬线大标题，然后一节接一节用深浅 灰块交替分隔。该有的信息都在。光是 hero 就塞了一个标签 pill、一行 emoji、四个信任徽章。
问题不在信息，在身份感。堆叠的灰色面板和 emoji 徽章，读起来像「功能型 SaaS 模板」，而不是 「一个有观点的品牌」。
改版前——Paper and Evergreen 风格的 hero。信息都在，但没有一处有声音。
一个强调色，而不是一整盘颜色
之前： 绿色品牌色既当强调色又当氛围色。
之后： 一个克制的靛蓝——#4f66d8——只用在真正需要吸引注意的地方：标题高亮、链接、
主按钮、聚焦态。
克制的强调色读起来「是故意的」。把什么都染上色的页面，读起来像「下载来的主题」。选一个强调色， 给它一个明确的职责，其余部分保持中性。
给工具一点衬线的嗓音
之前： 全站一个粗体无衬线。
之后： Libre Baskerville 衬线标题 + Inter 正文。
衬线标题做了一件工具很少允许自己做的事：它听起来像个编辑，而不是个仪表盘。最清楚的例子，就是 hero 标题本身。
之前——一行，塞满：
Clone Any Website from a URL — yours to edit & export
之后——两个情绪节拍：
Clone any website from a URL. Yours to edit and export.
第一行说「发生了什么」。第二行用斜体衬线，说「为什么重要」：所有权。几乎是同样的词，完全不同的 感觉。
上：旧的无衬线标题。下：衬线改写版，拆成「发生了什么」和「为什么重要」。
用留白，而不是灰块
之前： 从头到尾用深浅灰块交替来分隔每一节。
之后： 一整块白色编辑画布——以及恰好一条近黑色带，只留给整页最硬核的技术主张： "Not a screenshot guess. The real site, rebuilt."
对比之所以有效，是因为它稀有。当每隔一节就是灰色，没有一节会突出。当整页是白的、只有一条带子是 黑的，那条带子就成了你会记住的东西。我们用一层柔和的靛蓝辉光和一层很淡的方格网纹来制造层次， 而不是堆叠阴影。
整页前后对比，前（左）后（右）：堆叠的灰块，对比一整块白色画布加恰好一条深色带。
把证据展示出来，而不是声称
之前： hero 用文字声称「可编辑」——徽章写着 "Your branded version, not a copy"。
之后： hero 把它演示出来。我们在输入框下面加了一个浏览器框，循环播放真实的克隆——Stripe、 Framer、Slack 等等——地址栏写着 "domain → cloned"，旁边一个小小的 rebrand 控件，暗示可以换 配色和字体。
「可编辑源码」是抽象的。一个浏览器预览让它变具体。我们还加了一条安静的 logo 跑马灯—— "Point it at any public site"——让可信度在第一次滚动之前就建立起来，而不是塞在一个徽章里。
重设计后的 hero 用浏览器框展示一个实时克隆——是证据，不是承诺。
砍掉一些区块，让故事更锋利
重设计也是一次做减法的机会。旧页面有一节「两种用法」和一节「真实案例」。有用，但它们稀释了 主路径。我们把两节都砍了。
新的顺序更紧：hero、logos、如何运作、案例库、它是什么、对比、价格、那条黑色技术带、FAQ、CTA。 更少的转弯，更少的滚动疲劳，一条清晰的叙事。
把它做成系统，而不是一个页面
最重要的改动，在任何单个屏幕上都看不见。我们没有直接给落地页上样式，而是把新外观沉淀成 design tokens——色阶、字体、间距、黑带和辉光的辅助类——再用共享组件把页面拼出来。
这就是为什么新身份能在价格页、案例库、FAQ、页脚上保持一致。一个只上一次样式的页面会漂移； 一套定义一次的系统，在任何地方都保持一致。
改版后——Indigo Serif 的 hero，用共享 tokens 构建，让每个页面都继承同一套身份。
同一套系统，逐区展开
大多数改版止步于 hero。但一套视觉系统，只有铺到每一个区块才算数。下面是页面的其余部分—— 前（左）后（右）。
How it works——灰卡片和数字圆圈，变成衬线标题配干净的白底卡片。
对比表——同样的信息，和全站一致的单一强调色。
价格——同样的三档，用单一靛蓝高亮代替互相抢的颜色，并砍掉了那行嘈杂的数据。
FAQ——同样的问题，更多留白。
footer 获得了最大的升级——从一行细链接，变成深靛蓝的 floor，把过去那些塞了「SEO」徽章的列，换成干净、唯一的链接。
你可以照做的流程
同样的打法，你可以用在自己网站上——而这正是 clone 的用武之地。
- 找一个你欣赏其视觉语言的网站。不是为了抄，是为了研究。
- 用 Clonesite 克隆它：粘贴 URL，得到一份可编辑源码，而不是一张截图。
- 读懂它的决策：用了几个强调色？什么字体搭配？对比放在哪？留白有多少？
- 把这些决策用到你自己的内容上，用你自己的 tokens。
- 替换掉每一处品牌资产——logo、文案、图片、主张——让结果毫无疑问是你的。
- 导出代码，上线。
clone 让你离开白纸。而上面那些决策，才是让页面像品牌、而不像模板的原因。
我们的页面，说的还是它一直在说的那件事。只是它终于看起来像是认真的了。
Paste a URL. Get the source. Restyle the whole site. Make it yours.
