Agent Skills
返回列表
模板化页面识别与设计精修

模板化页面识别与设计精修

设计多媒体 更新于 2026.08.29

将以下提示词粘贴到你的 AI 对话框中：

请根据 https://skillhub.cn/install/skillhub.md，安装 @user_fccf428b/design-claude-design-critic。

技能介绍

为什么“没报错”不等于“没模板感”

很多页面在技术实现上完全合规，代码跑通、接口正常、响应式断点也在，但一眼看去依然带着强烈的“AI 一次性生成”味道。这种问题很难通过跑 Lighthouse 或检查构建日志发现，它通常藏在具体的决策细节里：

  • 布局僵化：首屏永远是居中大标题 + 三个特性卡片（3-Cards Reflex），后续 CTA 区域缺乏视觉节奏与呼吸感。
  • 配色雷同：紫色渐变背景几乎成了 AI 生成页面的默认皮肤，且色彩往往没有映射到设计变量（Tokens）。
  • 排版平庸：全文依赖系统默认无衬线字体，只有 2–3 种字号，缺乏清晰的视觉层级与模块化比例。
  • 文案生硬：充斥着“赋能”、“无缝”、“释放潜能”等典型 AI 高频词汇，或者是全篇 “Welcome to {Product}” 这种无效填充。

它如何工作

这个技能将“设计评审”视为一项需要锚定目标的具体工程任务。它不会空谈审美，而是先通过 URL、截图或本地代码确认页面的单一核心目标，然后按以下维度逐层审计：

  1. 布局与构图（Layout & Composition）：寻找那些被过度对称、留白均匀得令人不适的区块，指出那些被默认模板化思维驱动的布局。
  2. 视觉细节（Visual Details）：审计颜色 Token 的映射关系、文字的对比度（AA 标准）、图标库是否被 Emoji 替代，以及动效是否仅仅是装饰性的 fade-up。
  3. 文案与语义（Copy & Semantics）：像审查代码一样审查文案，精确定位那些典型的 AI 生成痕迹（如强制性的三连排比句、滥用破折号），并要求修改。
  4. 可落地的修复（Prioritized Fixes）：最终的输出不是一份风格指南，而是一份指向具体文件、具体区块甚至具体行号的修复清单。如果有现成的 Design Tokens，它会直接引用建议使用的变量名。

适用边界与注意点

  • 作为收尾质检：它最适合用在 claude-landing-composer 产出之后，或者任何通过 Vibe Coding 快速生成的前端项目落地前的最后一次检查。
  • 需要设计系统支撑：如果项目缺乏既定的 Design Tokens，它会指出色彩与字体的随意性，但无法提供基于特定品牌规范的自动修复。
  • 拒绝通用套话：它不负责帮你写具体的业务逻辑，也不会输出“让设计更美观”这种废话。如果你的页面目标是极致的功能主义而非 “Premium” 质感，某些关于留白和动效的建议可能需要酌情处理。

获取使用帮助和更多实用 Skill，请关注公众号「简诗 AI」，或在 SkillHub 搜索「简诗 AI」

使用场景

  • 刚用 AI 生成了产品落地页，需要排查页面布局、配色和文案中的模板化痕迹，并获取具体到代码行的修改建议。
  • 网站代码能跑通但视觉像 AI 做的，需要逐项检查排版层级、动效和 Emoji 图标，剔除紫色渐变等默认生成特征。
  • 在发布新前端项目前，作为收尾质检步骤，对组件样式和营销文案进行一次深度的语义与视觉双重审查。
  • 接手了一个充满 AI 套话和默认系统字体的旧页面，需要重新梳理视觉层级并重写核心卖点文案以摆脱廉价感。

适合人员

  • 独立开发者，使用 AI 工具快速搭建产品官网后，苦于无法识别并修复页面中明显的“AI 味”和同质化设计。
  • 全栈工程师，负责维护通过 Vibe Coding 生成的前端项目，需要一套客观的标准来审查和重构缺乏设计系统的代码。
  • 增长/运营设计师，希望提升落地页转化率，需要排查并重写那些充满“赋能”、“无缝”等 AI 高频词汇的营销文案。