Impeccable去除AI网页模板味

VISUAL01/不同产品 可以有不同的界面语气

NIGHTGLASS SYSTEMS 界面案例·非本文实测成果

页面已经能跑了          为什么还是像一份换了名字的模板

让 AI 做一个产品官网，导航、首屏、功能卡片和价格表很快就能凑齐。可把产品名遮住，你可能认不出它属于谁。继续说“高级一点”，往往只会得到更亮的背景和更多装饰。

这篇想聊的，是怎样把“感觉不对”拆成能够判断、能够修改的问题。Impeccable 提供了一套设计词汇，帮助 AI 编程助手把这一步继续做下去。

当一句需求只有“现代、简洁、有科技感”，助手能够自由发挥的空间很大，最后却容易落到熟悉的组合上。我们真正欠缺的，往往是关于内容、用户和取舍的说明。先把这些条件补齐，再讨论视觉方向，每一次修改才更容易判断是否接近目标。

约 8.1 万 Star◆Skill / CLI v4.5.2◆2026.10.15 核验

AI 工具观察/FIND THE FOCUS

很多页面看起来元素齐全，却没有清楚的主次：每块内容都在强调自己，用户找不到重点；功能写了一大堆，却没说明它和用户有什么关系。

同质化有时从需求写法就开始了：只规定页面应该像什么，却没有说明用户带着什么问题进入、看完之后要作出什么决定。缺少这层信息，功能区、评价区和行动按钮就容易被当作需要填满的栏目，排列齐整之后，内容之间仍然缺少逻辑。

PATTERNS/先看常见选择怎样堆在一起

常见设计模式示例·图内标注用于观察 不代表这些样式一律不能使用

圆角、渐变、卡片或者某种字体，本身并不等于“AI 味”。同一张卡片，放在套餐比较里可能很清楚，套在每一段文字外面就可能增加负担。关键是它在帮助谁、完成什么任务。

另一个常见误区，是把参考图当作元素采购单。看到大字就加大字，看到渐变就补渐变，最后每块内容都很好看，却无法共同讲清一件事。参考图更值得借鉴的是组织信息的方法：先让人理解价值，再解释差异，最后给出与当前判断匹配的行动。

◆ 先看主次标题、按钮和装饰都在抢注意力时，先确定谁应该被第一眼看见。

◆ 再看关系内容被分成很多容器，不等于它们之间的关系已经清楚。

◆ 最后看行动按钮足够醒目还不够，用户也要知道点下去会发生什么。

AI 工具观察/VISUAL LANGUAGE

Impeccable 是给 AI 编程助手使用的设计技能，可配合 Claude Code、Cursor、Codex 等工具。它把设计讨论拆成布局、字排、文案、交互和质量检查等具体任务，不用每次都从一句“做漂亮点”开始。

CASE01/ACORNNEST

界面视觉案例·保留原有图片的插画 材质与布局

仔细看这张图，奶油色底、绿色按钮与粉色家具并不是各说各话：颜色和材质在房间、导航与信息区里反复出现，使整张页面拥有连贯的语气。大标题负责建立第一印象，较小的说明负责解释场景，插画则提供一个可以理解的产品想象。

这个案例的个性来自一套反复出现的选择。漂亮插画负责吸引注意，后面的信息层级则要说明用户能做什么，两者需要一起成立。

DETAIL/看物件之外也看操作与信息

局部观察·主按钮 物件工具栏与周边信息的关系

再把视线从房间挪开：左侧有开始入口，下方有装饰工具，右侧还有访客与留言。它们对应的是几种不同意图。如果当前目标是让新人开始布置，就需要检查这些入口的顺序和分量，避免所有功能同时招手，让初次进入的人不知道该先点哪里。

AI 工具观察/DESIGN FOR THE TASK

再看这张森林界面：深色、衬线字、木屋和地图入口共同形成安静的探索氛围。它和封面的终端风格、上一页的温暖房间，提供了完全不同的视觉语气。

CASE02/WILDERSONG ATLAS

界面视觉案例·整图看氛围 也要检查实际内容是否可读

终端案例依靠紧凑的信息、等宽文字和连续状态建立机器运行的感觉；森林案例则把大部分视觉空间交给景色，让标题和入口融入探索主题。两张图的差异，来自信息密度、字体和内容节奏共同变化，仅仅互换背景颜色，很难得到相同效果。

DETAIL/让氛围落到具体操作上

局部观察·主要行动与辅助入口仍然需要区分

这些案例不意味着每个项目都该如此装饰。运营后台需要稳定的信息密度，帮助文档需要清楚的阅读路径，作品集才可能需要更强的视觉表达。产品和任务变了，设计取舍也应该跟着变。

氛围越完整，越要留意操作是否被背景吞没。森林图里的正文、导航和按钮落在不同明暗区域，放到更小屏幕上仍需检查可读性；终端图里大量状态并排出现，则要确认真正异常时能够被迅速找到。视觉方向成立以后，还有具体的使用问题要回答。

设计感不只有一种          能解释为什么这样选 更重要

AI 工具观察/FROM PROMPT TO PAGE

设想一张小团队协作产品的价格页：三个套餐列了二十行功能，按钮却都叫“立即开始”。这是说明思路的假设场景。先由人确认价格、计费方式和权益，再让助手参与修改。

先把目标说具体：面向第一次了解产品的小团队负责人，帮助他们比较套餐；保留品牌色，突出适用人数、关键差异和付费条件。这样，后面的每轮修改才有依据。

WORKFLOW/从助手指令到浏览器页面

功能演示画面·并非本文现场运行或效果承诺

使用 critique 时，可以把问题进一步缩小：“请沿着首次购买者的阅读顺序，指出价格页上最难判断的三处，并说明缺少了什么信息。”这样的要求把注意力拉回选择过程。读完建议后，先核对每条理由是否符合真实业务，再决定哪些值得进入修改。

使用 audit 时，可以要求把发现项和对应位置说清楚，区分实际检查到的问题与仍需人工确认的判断。例如，手机宽度下出现内容截断，可以复现后修；套餐权益写得含糊，则要回到产品资料核对。两类问题需要的证据不同，处理方式也应有所区别。

到了 polish，可以明确圈定范围：“保留三个套餐及全部权益，只调整标题层级、按钮文案和对齐关系。”完成后查看改动清单，确认价格与条件仍然准确，再打开页面走一遍选择过程。范围越清楚，越容易评价这一轮修改，而不是被新画面带走注意力。

AI 工具观察/WHAT IS NEW

截至 2026 年 10 月 15 日核验，最新正式版本为 v4.5.2，发布于 10 月 9 日。相比继续增加“漂亮”的形容词，这一版更值得看的是，它怎样根据页面任务选择构建方式。

LATEST/2026.10.09官方更新日志

当前官网更新说明截图·原文与下方中文解读相互对应

◆ 工作页面先进入代码

后台、工具页和文档页面直接从代码构建。真实的筛选器、表格、状态与长文本，需要在实际结构里观察；落地页和展示类网站仍保留用户选定的构建路径。

代码优先的方向选择中，新版使用可打开的 HTML 草图，帮助比较布局、配色与文字层级。先讨论方向，再继续细化，比在完成之后全部推倒更容易控制。

对后台和文档而言，尽早进入代码的价值，在于把讨论放回真实结构。表格增加几列之后能否阅读，文章变长之后导航是否方便，都需要带着内容观察。方向选择时的草图帮助我们作出初步取舍，后续仍应在实际页面里继续验证这些决定。

◆ CLI 与 Skill 对齐

此前 npm 包曾落后于 Skill；新版把版本号和运行的引擎对齐，更新时更容易确认自己拿到哪一版，也减少照着新文档操作却运行旧检测器的困惑。

版本对齐也值得普通使用者留意。遇到教程与本机表现不一致时，可以先确认安装来源和当前版本，避免一边阅读新说明，一边用旧环境反复尝试。对团队而言，在项目说明中记下使用版本与更新时间，也有助于后来的人理解当时的操作背景。

AI 工具观察/CONTEXT THAT LASTS

AI 经常套模板，还有一个原因：它并不知道这个产品究竟给谁用。只说“现代化 Dashboard”，很难交代真实的用户、任务、约束和既有品牌规则。

CONTEXT/尊重已有设计也了解真实用户

项目上下文示例·关键分工在下文展开

◆ PRODUCT.md 记录产品事实

由 init 建立产品上下文，保存用户、目标、使用环境、约束和语气等信息。它回答的是“为什么做这个产品，用户要完成什么”，不只是收集喜欢的颜色。

产品文档适合保存相对稳定的事实，也需要随着业务变化维护。目标用户从个人转向团队，或者原本只在桌面使用的功能开始面向手机，都会改变页面的设计前提。更新这些背景以后，再让助手继续改版，能减少它依据旧条件作出看似合理的选择。

◆ DESIGN.md 记录视觉系统

用 document 从已有项目整理配色、字体、组件和间距等视觉规则，给下一页、下一位助手留下共同依据。已有设计系统的项目尤其需要这一层一致性。

视觉规范则要分清已经采用的决定和仍在尝试的想法。某个新页面临时用了更大的标题，不必立刻变成全站规则；一种按钮样式经过确认后，才值得写入共同规范。记录时补上一句适用范围和选择理由，下一位维护者才知道什么时候沿用、什么时候重新讨论。

两份文件都要人工核对。业务目标写偏了，或者把临时样式记成品牌规范，后续修改就容易沿着错误前提继续。团队也可以随修改记录一句理由，让以后的人知道哪些决定值得延续。

记住设计依据          下一次 才不必重新猜

AI 工具观察/TRY IT ON ONE PAGE

CURRENT/最新README 概览

当前官方仓库截图·已更新为 59 条检测规则

先留住修改前的版本，挑一个明确问题，例如“手机上难以比较套餐”，列出要保留的内容，再开始改。别一次把整站推倒，这样更容易看清哪一步确实有帮助。

安装或更新后重新加载编程工具。Hook 还需完成工具侧审核或工作区信任：Codex 应用在设置的 Hooks 中处理，CLI 使用 /hooks；输入开启命令不等于检查已经生效。

最后，把修改前后的页面放在相同屏幕宽度下，用真实内容比较。费用是否清楚，下一步是否好找，长文能否读完？能解释这些变化，比单纯换一种配色更有价值。

验收可以从一条完整路径开始：第一次进入价格页，找到适合自己的套餐，看清费用，再到达预期入口。然后换成手机宽度、较长的真实文案和较少的数据重走一遍。不要只看首屏是否整齐，也要观察内容发生变化时，阅读顺序和关键操作是否仍然清楚。

还可以请一位不了解页面的人完成相同任务，先观察他看哪里、停在哪里，再听他的解释。反馈尽量落到具体时刻，例如不知道费用按月还是按年计算，比一句“有点乱”更容易推进修改。把这个问题记下来，下一轮就有了可以比较的起点。

编辑 & 排版　　朱贵禄

初   审黄冠诚

   终   审　　江韵婷　赖永凯

奇点艺客工作室