用代码当设计参考：20个开源HTML页面给Claude换肤项目

在用 Claude Code 构建网站的过程中，一位有多年建站经验的开发者发现了一个反复出现的痛点：生成能用的界面越来越简单，但要得到一致、有辨识度的视觉风格，往往需要反复折腾。于是他做了一件事——把 20 个落地页做成免费开源的单文件 HTML，专门用来给 Claude 当"视觉参考样本"。项目名为 InstaLanding.ai，无需登录即可使用。

为什么文字 Prompt 描述设计总是不够用

如果你用过 AI 编程助手，大概率体验过这种无力感：你让 Claude "做得高级一点"或者"做成现代 SaaS 的样子"，但这些指令留下了巨大的解释空间。同样一句"premium"，模型每次给出的结果都可能截然不同。

作者的核心洞察在于：设计是一种很难用自然语言精确传达的信息。 排版的微妙层级、间距的节奏感、阴影和圆角的搭配、动效的时序——这些东西用文字描述既冗长又失真。你可能写了 20 轮 Prompt，仍然没能把脑中那个画面准确同步给模型。

他提出的替代思路很直接：与其向 Claude 描述一个设计，不如直接给它一个完整可运行的设计作为参照物。

单文件 HTML：为编程 Agent 优化的设计载体

这个库里的 20 个落地页都只用原生 HTML、CSS 和 JavaScript 构建，每个页面自包含在一个 HTML 文件里，没有框架、没有依赖、没有构建步骤。

这种"反潮流"的技术选型是经过考量的。作者的目标是让设计对编程 Agent 尽可能可移植、可理解。单文件意味着 Claude 能直接读到实现本身：

• 排版、配色与间距
• 布局结构与响应式行为
• 组件样式
• 动画与交互
• 整体的视觉语言

关键区别在于：没有需要靠猜测的截图，也没有需要层层穿透的依赖树，只有可运行的代码。 对模型而言，读一个自洽的 HTML 文件远比解析一张 PNG 图片或追踪 node_modules 来得准确。这实际上是把"设计意图"编码成了机器最擅长消化的形式——源代码。

这种做法的底层逻辑涉及 LLM 处理不同输入模态的能力差异。当 Claude 接收一张截图时，它依赖视觉理解去"猜测"背后的 CSS 属性，这个逆向推断过程不可避免地引入误差——它能感知"按钮是圆的"，却无法精确还原 border-radius: 12px 加上 box-shadow: 0 2px 8px rgba(0,0,0,0.12) 的组合。而 HTML/CSS 源码是一种天然对齐模型训练数据分布的格式：模型在预训练阶段见过海量代码，对代码的"理解"本质上是模式匹配而非推断。单文件的约束进一步消除了模块化代码中常见的上下文碎片化问题——所有的设计决策都在同一个文件内可见，模型不需要在多个文件之间追踪变量引用或类继承关系，能以最低的认知负担提取出完整的视觉系统。

最有意思的用法：给已有的 Claude Code 项目换肤

这个库真正的价值不在于"再做一个新站"，而在于一个 reskin（换肤）的场景。

设想你已经用 Claude Code 搭好了一个 dashboard 或 SaaS 应用，功能跑得好好的，但视觉设计让你不满意。常规做法是推倒重建，成本很高。作者的方案是：把其中一个 HTML 文件丢给 Claude，让它提取并套用这套设计系统，而不动你已有的代码架构。

他分享了实际在用的 Prompt（译文大意）：

分析附带的 HTML 文件，提取其视觉设计系统，包括排版、配色、间距、布局原则、组件、边框、阴影和动画。将这套设计语言一致地应用到我现有的项目上。保留所有现有内容、功能、路由和业务逻辑。把这个 HTML 当作视觉的唯一真实来源（source of truth），而不是用来替换我应用架构的东西。

这段 Prompt 的精妙之处，在于它刻意把 AI 辅助开发中经常被搅在一起的两件事分开了：你的应用"做什么" vs. 你的应用"长什么样"。你保留已经构建好的功能与架构，同时给 Claude 一个具体的视觉锚点去对齐。

"Reskin"（换肤）这个概念在传统软件开发中由来已久，指在不改变底层逻辑的前提下替换 UI 表现层。它得以实现的前提是关注点分离（Separation of Concerns）——即业务逻辑与视觉呈现被妥善解耦。在现代前端架构中，这通常通过 CSS 变量（Custom Properties）、设计 Token 或主题系统来实现。作者的方案在 AI 辅助开发语境下复现了类似的思路：Prompt 中明确要求 Claude 只操作视觉层，不触碰路由、数据流或组件接口。这种约束实际上是在弥补 AI 编码工具的一个常见风险——当你请求"改进 UI"时，模型可能为了实现某种视觉效果而顺手重构了组件结构，导致功能回归。将视觉参考与架构指令分离，是降低这类副作用的一种实用防护策略。

核心启示：代码本身可以成为设计参考

作者总结的最大一条经验是：代码本身可以充当设计参考。 与其花 20 个 Prompt 去描述一种美学，不如直接给 Claude 一个体现这种美学的可运行样本。

他也很诚实地指出局限：这并不保证完美结果。你仍然需要检查响应式布局、组件一致性，以及 Agent 可能在无意中改动的地方。但相比纯文字描述，这个方法给了模型一个具体得多的起点。

对于正在用 AI 工具做前端的人来说，这个思路可以推广到更广的实践：把高质量的参考实现当作"风格字典"喂给模型，让其在既定的视觉约束内生成，而不是放任它每次自由发挥。这本质上是用确定性的输入去约束生成式工具的不确定性输出。

一个值得讨论的开放问题

项目完全免费、开源、无需登录（instalanding.ai），任何人都可以拿这些 HTML 文件去实验或嵌入现有项目。

作者最后抛出的问题其实更有价值，也适合所有 Claude Code 用户思考：到底哪种方式传达设计意图效果最好——文字描述、提供截图，还是直接给出可运行的代码？ 从他的实践看，可运行代码胜在信息无损且机器友好；但截图在传达"整体氛围"上可能更快，文字则胜在灵活。三者或许并非互斥，而是适用于设计迭代的不同阶段。

这也反映出 AI 辅助开发正在走向成熟的一个信号：当生成功能不再是瓶颈，如何高效、可控地传递"品味"和"风格"，正成为下一个值得打磨的工作流环节。