夜雨聆风学习资料网

ARTICLE · 1107893

AI 写的页面总有股“模板味”?这个开源 Skill 想改改它的设计习惯

发布时间：2026-10-01 07:30:54 最近访问：2026-10-01 07:30:54
AI 写的页面总有股“模板味”?这个开源 Skill 想改改它的设计习惯
让 AI 做一个“高级一点”的网页，需求听起来很简单。等页面出来，却可能又是一张巨大的渐变标题，下面排着几块圆角卡片。换了行业，改了文案，骨架依然熟悉。继续追问“能不能更有设计感”，往往也很难说清究竟该改哪里。
最近看到的 finesse-skill，把这个问题拆得比较细：页面用来做什么，哪些地方可以大胆设计，哪些地方应该遵守用户习惯，以及做完后怎么检查。
它的核心是一套供 AI 编码助手读取的设计技能，包含主规则、专项参考文件和示例页面。安装后，助手可以依据这些材料组织界面设计与实现。
我比较认同它的一项选择：先判断页面的用途。
品牌官网要让人记住，订单后台要让人高效处理业务。它们对字体、布局和动效的要求，本来就有很大差别。如果把“高级感”理解成给所有页面加暗色背景和粒子动画，后台用户很可能每天都得忍受这份设计。
finesse 将需求分成 4 条路线：
  • brand
品牌站、落地页、作品集，重点是视觉表达和第一印象。
  • product
后台、仪表盘、设置页，重点是信息密度与操作效率。
  • commerce
商品详情、列表、购物车和结算，根据具体任务选择表达方式。
  • h5
只在手机上使用的页面，先处理视口、安全区和触摸操作，再套用对应的内容路线。
其中，H5 被当成一种容器。手机商品详情页可以组合 h5 + commerce，手机数据界面则可以组合 h5 + product。这种拆法让屏幕约束和页面用途各自有了明确位置。
另一个有意思的设计，是它给“别再做得一样”安排了具体步骤。
在品牌页面上，finesse 会从配色、字体关系、主布局、视觉引擎、材质隐喻 5 个维度组合方向，并用 .finesse/log.json 记录近期构建选择。下次开工时，助手要读取记录，检查新方案是否重复。
这个办法至少让“换个风格”有了可比较的依据。你可以保留字体，调整布局和材质，也可以查看为什么几次生成都落在同一套搭配上。
但它也为变化划了边界。后台可以更换配色、密度和图表语言，排序、筛选、表单行为等操作习惯则应保持稳定。对天天使用后台的人来说，一个看起来很新鲜、却让人找不到筛选入口的页面，会增加实际负担。
比起视觉效果，我更想展开的是它对 AI 工作台的处理。
当用户把任务交给智能体，界面需要持续解释：当前做到哪一步，依据是什么，花了多少资源，怎样停止。一个转圈图标能够表示“正在忙”，却很难帮助用户判断任务是否卡住。
项目的 ai-console.md 围绕这些问题安排界面：用逐步运行记录展示进度；把排队任务、当前运行和历史结果放在可同时查看的位置；审批卡提供操作范围与依据链接；停止按钮保持可见；运行结束后显示耗时和费用回执。
它还单独定义了 partial，也就是部分完成。批量任务只处理了部分数据时，页面需要说明遗漏了什么，给用户继续处理的入口。这类状态看着不起眼，缺失后却很容易让人误判结果。
当然，这些都是界面设计要求。真实的任务取消、权限校验和审批执行，仍然需要业务系统配合实现。
想试用，仓库给出的安装命令是：
npx skills add https://github.com/mouse-lin/finesse-skill
它提供了 Claude Code、Trae、CodeBuddy、Cursor、Codex 等工具的适配方式，但不同接入形式的材料完整度有区别，使用时可以对照仓库说明选择。
需求也可以说得具体一点。例如：

用 finesse 做一个电商订单异常处理后台。客服每天使用，要能快速筛选超时订单、查看处理记录。浅色主题，信息紧凑，动效只用于操作反馈。

按照使用文档，它会先描述准备做出的页面，等用户确认方向后再写代码。拿到第一版后，可以直接指出“表格太挤”或“筛选区占用太多空间”；audit 用于只读诊断，quieter 用于收敛视觉效果，densify 用于调整信息密度。
读到这里，也得说说它的局限。
这套规则有鲜明的审美偏好，比如限制某些渐变文字、配色和装饰方式。用于打破模型的惯性很合理，应用到已有品牌时，则需要判断规则是否合适。字体或颜色是否恰当，仍然取决于内容、受众和品牌规范。
它附带的 detect.mjs 能静态扫描代码中的部分问题，但脚本也明确列出了检查盲区：布局是否重复、视觉效果是否真正渲染、手机上有没有文字溢出，都需要查看实际页面。
还有一个接入细节容易漏掉：检测脚本默认即使发现严重问题，也返回退出码 0。接入 CI 时，需要读取报告，或使用 --strict，让严重问题产生非零退出码。
文档中的性能目标同样需要实际测量。比如要求动效在中端设备上保持流畅，是验收标准；生成代码有没有达到这个标准，要到设备上检查。
我会把 finesse 放进界面原型和页面迭代的工具箱，尤其是在需求描述总停留于“好看一点”的时候。它提供了一套更具体的讨论方式：先谈用途和方向，再谈布局与交互，最后对照最初的约定验收。
如果准备拿它做正式项目，我会从一个真实页面开始，给出实际数据和主要操作任务，观察生成结果是否让这些任务更容易完成。比起展示页截图，这更能看出一套设计技能能帮上多少忙。
开源地址：
https://github.com/mouse-lin/finesse-skill

相关学习资料