AI做网页老是一个样？这个开源工具先让它弄懂你在做什么

让AI做个网页，它很快就能交出来：大标题、渐变背景、几张圆角卡片，按钮还发着光。

单看挺完整。可把产品名遮住，好像卖咖啡、做记账软件、招程序员，都能用这一页。你让它“再有点特色”，它换了个颜色，又交回来。

我最近看到一个开源项目Impeccable。它给AI编程工具补了一套设计指引，起手先把产品服务谁、用来做什么、有哪些限制弄清楚。我去翻了它的官方作品集，有一组小旅馆的对照，很能说明这里面的区别。

同一家旅馆，可以有两种说话方式

题目很具体：给意大利海边一家14间客房、由同一家族经营三代的小旅馆做网站，面向会提前几个月预订的客人。

没加Impeccable的版本，做成了海景大图。大标题直接讲房间、家族和走下台阶就到海边，下面放预订入口。它已经抓到了题目里的信息，不能说它只会摆一张漂亮照片。

加上工具之后，另一版把同一道题做成了旧地图的样子：纸张的底色、地形线、手写标注，连家族介绍也像写在地图边上的便笺。看起来更像主人展开一张图，跟你介绍房子和海在哪里。

我喜欢这个变化。前一版让人先看风景，后一版把“这是一家有自己故事的小旅馆”融进了整张页面。两版都能讲清基本信息，但留给人的印象不一样。

这组对照用的是同一个模型、同一道需求，两边都允许生图。官网把它们标为首轮结果，过程中可能有选择，但没有再用后续提示词反复打磨设计。因此，它能展示一种方向，不能代表每次生成都稳赢。

还有个细节得分清：页面上具体的海拔、台阶数和家族姓名，是生成示例里的文案，题目并没有提供这些资料。真给旅馆上线，可不能因为写得很有味道，就把它们当成事实。

比换配色更早的一步

看到这里，我反而更在意Impeccable那个不太起眼的初始化步骤。

它会把产品的受众、用途、使用场景和约束，整理进一个叫PRODUCT.md的文件。以后继续做页面，AI可以接着读，不必每次都从“做得高级一点”开始猜。

这很像你找人装修房子，先说清谁住、平时怎么用，而不是一上来就挑墙漆。老人常住和周末度假，东西该放哪里、哪些地方要留空，本来就会不同。

网站也是一样。给急着查营业时间的人看，和给准备花几个月挑度假酒店的人看，第一屏该交代的东西就不一样。产品信息会影响布局，颜色只是后面的一部分。

如果项目已经有自己的颜色、组件和排版规则，工具会另外记在DESIGN.md里。这样，“我们在做什么”和“现在长什么样”就有了各自的位置。下一轮调整页面时，至少不用再把整套背景重讲一遍。

作品集里还有个儿童阅读应用的例子，我觉得比一排功能口号更直接。它把一页故事书和生词卡摆了出来：孩子读到不懂的词，可以看到解释、听发音，再接着读。

家长看到的是孩子卡住之后会发生什么。产品想帮谁、帮在哪儿，被变成了能看见的内容，省掉了“个性化学习体验”这类需要读者自己脑补的话。

页面做出来，还能继续挑毛病

Impeccable也不是装完就只管第一次生成。

它给修改动作起了明确的名字：polish用来打磨细节，audit检查可访问性、响应式和性能，distill帮页面去掉多余的视觉噪声。比起连续说“再好看一点”，你至少能告诉AI，这一轮到底准备改什么。

它还有不依赖额外AI接口的规则检查，能提示文字溢出、对比度不足、按钮点击区域太小之类的问题。页面看着顺眼，手机上却挤成一团，这些检查就派得上用场。

不过，检查通过之后仍要自己点一遍。预订按钮能不能用，页面有没有把重要信息藏起来，真实内容换进去会不会撑坏布局，都得看实际成品。漂亮的演示页离能上线，还隔着这些事。

如果你已经在用Claude Code、Cursor这类工具做网站，它值得拿一个具体页面试试：先交代清楚产品和使用者，再比较AI把哪些内容放到了前面。只想生成一张海报，就不必为了这个再装一套编程工具。

官方作品集可以先看，项目仓库也放在这里：

https://impeccable.style/gallery/https://github.com/pbakaus/impeccable

看完这些例子，我最想留下的是那家小旅馆的变化。它原本就有房间、有海景、有家族故事，换一种组织方式，页面便多了主人的味道。AI做网页，有时缺的就是这一步：把已经知道的东西，认真放进设计里。

数据来源：Impeccable官方仓库、Impeccable官方作品集

以上。既然看到这儿了，如果觉得不错，随手「点赞、在看、转发」三连；想第一时间收到推送，给我加个星标⭐～谢谢你读到这里，我们下期见。