上周我看到一个产品展示官网第一眼就觉得“这网站真惊艳”。不是那种堆满特效的炫技而是你往下滚动的时候每个区块的入场时机都恰到好处配色、字间距、留白都非常舒服。我当时想与其停留在“好看”这一个模糊感受上不如直接动手把它的实现思路拆开看看。正好桌面上一直开着 Claude就顺手把拆解任务交给了它。从保存源码到整理完笔记前后大约 30 分钟。这篇文章就是这 30 分钟里我踩过的路、问过的问题以及真正被记进笔记里的东西。适合两类人看一类是前端开发者想从优秀站点里快速提炼可复用的设计模式另一类是产品设计师或运营想用 AI 辅助自己理解“好设计到底好在哪里”。1. 为什么选择用 Claude 拆解网站1.1 拆网站这件事以前有多麻烦早几年我拆一个网站流程基本是打开控制台逐个看元素把 CSS 复制出来丢到编辑器里慢慢读遇到压缩过的代码还得先格式化然后靠肉眼理解布局逻辑。碰上交互复杂的页面光定位一个 hover 状态的变化就要来回切换半天。整套流程下来一个中等复杂度的落地页至少搭进去一整个下午而且很多时候看完就忘了笔记整理得零零散散下次想用的时候根本翻不出来。还有个更尴尬的问题我拆完往往只能描述“它用了什么技术”比如“用了 GSAP 做滚动动画”“用了 Flex 布局”但说不清楚“为什么这么设计”。比如一个按钮为什么在 hover 时是缩小而不是放大为什么某个区块比其他区块间距更大这些问题靠看源码是看不出动机的。而动机恰恰是抄作业最值钱的部分。1.2 Claude 能看懂前端代码的底层逻辑Claude 这类大模型处理前端代码的能力跟人工看代码有个本质区别它能同时把 HTML 结构、CSS 规则、JavaScript 交互放到一个上下文里做关联推理。这意味着它不只会告诉你“这段代码做了什么”还能解释“这个交互动效为什么这样实现”“如果我来做会不会有更简洁的方案”。举个例子我拆的那个网站有一个很妙的细节——导航栏初始状态是透明底滚动超过 80 像素后变成毛玻璃背景。人工看代码要分别找滚动监听、背景过渡、判断阈值三处逻辑然后自己串成一条线。Claude 拿到完整代码后直接告诉我这是用 IntersectionObserver 还是 scroll 事件实现的阈值为什么选 80 而不是 100还提醒我这种写法在移动端有没有性能隐患。这种“代码 意图 优化建议”的复合输出是传统拆解方式给不了的。1.3 我选定的拆解目标和判断标准不是所有网站都值得拆。我这次选中的主页有三个特征视觉风格特别统一动效没有一处是多余的代码体积不大但信息密度高首页本身就是一个完整的学习样本不需要登录、没有数据接口干扰。如果你也想试建议按这个标准选目标打开首页后先问自己“如果让我来做我能不能一比一还原”如果答案是不确定那这就是一个值得拆的对象。选好目标之后我还给自己定了一个纪律30 分钟必须收工。不是慢慢看而是带着问题拆拆完立刻整理。这个时间盒约束看起来很紧但反而逼着我在问问题时更有针对性不会东看一眼西看一眼浪费时间。2. 拆解前的工具准备和思路设计2.1 Claude 接入方式的选择我这次用的 Claude Code 的命令行模式。选择它的原因有三层第一它可以直接读取本地文件我不用把长长的源码复制进对话框省去了一堆粘贴格式问题第二它可以跨多轮追问保持上下文我可以从“整体结构”慢慢问到“某个动效的触发条件”对话链条不会断第三命令行模式自带文件读写能力可以把分析结果直接输出到 markdown 笔记里省掉手动复制整理的环节。如果你没有配置命令行工具用网页版 Claude 一样能完成拆解只是需要把代码分段贴进去并且注意对话别开太多导致上下文被挤掉。我建议不要直接贴一个完整的压缩版 JS 文件模型虽然能读但压缩后的变量名会让分析质量明显下降。2.2 准备一份干净可读的网页源码拆解前处理代码是决定分析质量最关键的一步。我通常的做法是先把目标网页另存为完整网页然后用格式化工具把 HTML、CSS、JS 分别格式化一遍把不需要的部分——比如字体文件链接、埋点统计脚本、无用的 meta 标签——手动删掉。这样 Claude 看到的是“一个干干净净的页面骨架”而不是一堆干扰信息。这里有个实际操作上的小细节如果页面里用了 CSS 变量建议在喂给 Claude 之前先列一个变量清单把--color-primary对应什么颜色、--space-lg对应多少像素标注清楚。Claude 看到变量定义后能更准确地推断设计体系不会出现“这处颜色和别处对不上”的困惑。我这次就发现提前标好变量清单之后Claude 对配色逻辑的分析明显比直接读代码时要精准。2.3 给 Claude 设计拆解任务清单我拆网站前先给 Claude 布置了一个任务清单而不是直接说“帮我分析这个网站”。清单包括五件事概括这个页面的信息架构和视觉动线。找出最核心的三个交互设计点每个都说明触发的条件和效果。分析配色和字体排版的使用规律推测设计师可能遵循的约束。指出哪些实现方式属于“比较聪明”的处理值得学习。如果有冗余或可优化之处列出来并说明原因。这个清单的设计逻辑是先宏观后微观先描述后评价。让模型先建立一个整体认知再去抠细节最后给出主观判断。直接问“这个网站怎么样”得到的大多是空泛的好评而带着清单提问得到的会是可记录、可复用的工程经验。3. 30分钟完整拆解实操记录3.1 第一步让 Claude 概括网站整体结构和设计意图我把格式化后的 HTML 文件路径发给 Claude Code第一句指令是“请你先通读这个 HTML 文件的整体结构告诉我这个页面的信息架构是什么用户从上到下浏览时会经历怎样的视觉动线以及每个区块承担的任务是什么。”Claude 返回的分析非常符合预期主页被分成五个大区块——品牌区、产品特点区、数据展示区、用户评价区、行动召唤区。它还特别指出前两个区块采用的是左右交替布局而到了数据展示区突然切换到全宽卡片样式这种节奏变化是为了打破用户滚动时的惯性注意力避免页面“一眼望到底”。这个结论让我挺意外的因为我拆过不少页面都习惯用统一网格觉得整齐就好。但 Claude 的解读提醒我统一网格其实容易让用户产生审美疲劳适当打破规律恰恰是设计的精巧之处。之后我追问了一个问题“你认为这个页面的设计基调是什么风格如果用三个关键词概括你会选什么”它回答是“克制、锋利、可信”。克制的理由是用了大量留白锋利是大量直角和极细的边框可信是数据展示区用了等宽字体营造出一种工程感。这三个词后来直接被我写进了笔记标题下面作为这个页面最重要的气质总结。3.2 第二步逐个模块深挖追问交互细节整体结构确认后我开始按区块逐个拷问。先是固定导航栏我让 Claude 解释“这个导航栏在什么情况下改变背景色具体的实现逻辑是什么”。它拆得很细通过 scroll 事件判断滚动位置超过 80 像素就给导航栏加一个 class背景色从透明渐变为毛玻璃同时盒阴影从无到有。它还主动提醒我毛玻璃效果用的是backdrop-filter: saturate(180%) blur(20px)如果浏览器不支持代码里还写了一个半透明背景的 fallback。我接着追问“为什么阈值选 80 像素”Claude 的回答也很有启发80 像素相当于用户刚滑动一点点这个时候导航栏还看得见如果阈值设置太大会出现用户往下阅读时导航栏仍然透明、可能看不清的问题设置太小则滚动一触发背景就变了显得慌乱。所以 80 是一个“用户开始认真阅读内容”的临界值。然后是产品特点区的滚动渐入动画。这个页面的卡片不是整体淡入而是从下方 20 像素的位置移动到位同时透明度从 0 到 1时长大约 600 毫秒缓动函数是 cubic-bezier(0.22, 1, 0.36, 1)。Claude 给我解释了这个缓动曲线的含义开头略微加速然后非常平滑地减速到终点视觉上“惰性”很强不会让人觉得弹跳感适合营造沉稳的产品气场。我继续追问“为什么卡片要位移 20 像素而不是更大”它给了一个很有意思的回答位移太小观察不到层次位移大了又像在强调“动画本身”而设计师想要的是让注意力在内容上不是动效上。这个分寸感我凭经验也能感觉到一些但被模型用语言明确讲出来理解就更深了一层。3.3 第三步整理学到的方法论和可复用代码片段分析完之后我没有直接结束对话而是给 Claude 下了一个收尾指令“请你把我刚才和你讨论的所有内容整理成一份学习笔记包含三个部分页面设计方法论、可复用的代码片段、如果我要在项目中使用这些技巧需要注意什么。请用 markdown 格式直接写入 new-notes.md 文件。”这一步非常关键等于把零散的对话沉淀成了结构化文档我可以直接把它归档到笔记库里。生成的笔记里Claude 把方法论总结成几条布局节奏要敢于打破规律动效要克制控制在 500-700 毫秒之间背景状态切换一定要给过渡不要突变每个动效问自己“它在帮用户理解内容还是在炫耀技巧”。这些判断标准正是我日常写页面时最缺的东西。代码片段它也整理得很干净比如毛玻璃导航栏的完整实现、滚动渐入动画的 IntersectionObserver 写法、以及如何用 CSS 变量把设计约束写入代码。每段代码都标注了适用场景和兼容性注意事项。整个过程行云流水几乎没有需要我再手动补充的地方。4. 拆解过程中踩过的坑与排查技巧4.1 源码过长导致 Claude 遗漏关键信息第一次拆的时候我试着把整个未处理的 HTML 文件直接丢给 Claude Code 分析结果到了后半段明显感觉它开始“泛泛而谈”甚至把 A 区块的样式特点套到了 B 区块上。后来我意识到问题出在输入太长、有效信息被稀释了。模型虽然能处理很长的上下文但当代码里有大量无意义内容和重复结构时它的注意力会被分散。解法就是前面提到的格式化、删冗余、分段喂入。我把页面拆成头部 主体 脚本三份让 Claude 每次只专注分析其中一份分析完再让它汇总。效果立竿见影细节分析精准了很多。4.2 只给代码不给上下文Claude 容易误判第二次踩坑是只给了代码完全没告诉 Claude 这是一个什么类型的网站、目标用户是谁。结果它把产品特点区的文案结构当成“博客文章列表”来分析完全跑偏了。后来我在喂代码之前先补了一句背景说明“这是一个面向企业客户的数据分析产品官网目标用户是 CTO 和技术负责人页面设计的目的是建立专业可信的形象。”加上这句话之后Claude 的所有推断都变得合理起来为什么文案里使用大量数据术语、为什么页面强调安全和稳定性、为什么整体风格偏冷静克制。这说明拆网站不能只看实现还要理解业务语境。“给 AI 交代背景信息”和“给新接手的同事讲背景”本质上是同一件事。最后还有个小坑是关于追问的。刚开始我不太会追问经常问一句“为什么呢”得到的是车轱辘话。后来我发现Claude 真的吃“具体化追问”这一套。比如“为什么这个 fade 动画是 600 毫秒而不是 300 毫秒”“如果我把这个方案用在新闻类网站上合适吗”“还有没有更轻量的做法”问题里带的限定条件越明确它的回答就越有干货。针对追问我整理了一个快速清单你怎么判断这个方案的优先级有哪些替代方案各自利弊是什么在什么情况下这个设计会失效你推测设计师在选择这个方案时考虑过哪些约束。这四个问题几乎可以套用在任何一次拆解分析中得到的回答一般都非常扎实。5. 这次拆解真正让我记在笔记里的东西5.1 视觉层级与动效节奏的处理思路拆完这个网站之后最大的一个认知升级是好看的页面并不是因为某一个特效强而是所有元素都在为一个统一的“气质”服务。这个产品的气质是沉稳可信于是所有动效都偏慢、偏柔所有色彩都偏冷、偏素所有字体都是细笔画、大行高。没有任何一处是突兀的。我以前的习惯是拿到一个漂亮的效果就往上堆今天学个视差滚动明天加个文字描边结果页面显得很廉价。这次拆解让我意识到动效的密度、速度、节奏必须跟品牌调性绑定。那些让人记住的网站往往是“只有三个动效但每个都恰到好处”不是“三十个动效轮番轰炸”。5.2 代码组织上的细节控制细节层面的收获也很多。比如它把设计约束统一收敛在根节点的 CSS 变量里颜色、间距、圆角、阴影全部定义为变量页面里几乎看不到魔法数字。我顺着这个思路检查了自己的项目发现光圆角就写死了七八种不同的值难怪视觉上总有些不统一的感觉。另一个让我印象深刻的细节是它的脚本监听器都有命名空间比如hero-scroll-handler方便调试和移除。虽然这不算什么炫技但拆了这么多代码之后我真切感受到一个网站的工程质量从变量命名和回调函数的组织方式上就能看出七八成水平。这也是我在后续编码中刻意注意的部分。5.3 从“看效果”到“看懂设计”的思维转变拆完这个网站之后我意识到一个更重要的变化我刷网页的眼光变了。再看一个好看的网站我不再只停留在“哇这动画真丝滑”而是会下意识地想它的动效时长大概是多少用了哪种缓动它的间距比例为什么这么舒服它的色彩系统是怎么收敛的。这个思维转变才是拆网站最大的收益。以前收藏了上百个优秀网站但都只是收藏从没变成能力。现在只要花 30 分钟就能把一个“感觉很好”的网站变成自己可以落地的具体规则。看十个、拆五个自己的设计品味和实现能力都会有肉眼可见的提升。最后再分享一个小技巧拆完之后别急着关对话。我每次都会问 Claude 一句“如果你来重写这个页面你会保留哪些设计选择、推翻哪些为什么”。这句话永远能让对话再产出一批极其高质量的内容——它会把前面所有的分析结果归纳成优先级清单让你知道哪些是本质、哪些只是风格偏好。这个信息才是真正能直接影响你下一个项目决策的东西。