前两天看到阿西老师分享的GitHub 上这两个项目,专门解决这个前端AI味的问题,实测后发现确实能把 AI 的审美拉到可用水平
taste-skill:给 AI 装审美自查系统
GitHub 地址:
github.com这个项目的核心思路很简单:不是等 AI 生成完再改,而是在生成之前就把“什么是好设计”写成规则
它把字体、间距、配色、动效这些审美规则,全部写成了 SKILL.md 文件,AI 在生成前端代码时会先按这套规则自查一遍
快速上手:
# 方式1:CLI 安装(推荐)
npx skills add
github.com# 方式2:手动复制
# 直接把 SKILL.md 文件复制到项目根目录
它能解决什么问题:
自动避开 AI 默认模板:不再是清一色的 AI-purple 渐变、居中英雄区、三等分特性卡片
强制视觉多样性:Bento 网格布局中,至少 2-3 个单元格必须有真实图片或品牌渐变
字体选择克制:默认禁用衬线字体,除非有明确的品牌需求
impeccable:23 条命令 + 反模式库
GitHub 地址:
github.com 官网:
impeccable.style这个项目由前 Google 开发者布道师 Paul Bakaus 创建,基于 Anthropic 的 frontend-design 技能扩展而来
它不只是规则库,更像是一套“设计指挥系统”,内置 23 个斜杠命令,让你能用专业术语指导 AI
核心命令清单:
/impeccable init - 初始化项目,生成 PRODUCT.md 和 DESIGN.md
/audit - 审查当前设计,找出 AI 味问题
/polish - 精修界面细节
/critique - 批判性审查
/distill - 简化冗余设计
/animate - 添加克制的动效
/bolder - 增强视觉层级
/quieter - 降低视觉噪音
快速部署:
# 安装到项目
npx impeccable skills install
# 初始化设计系统
# 在 Cursor 或 Claude Code 中运行
/impeccable init
# 扫描现有代码的设计问题
npx impeccable detect src/
npx impeccable detect index.html
npx impeccable detect
example.com# 快速扫描(仅正则,输出 JSON)
npx impeccable detect --fast --json .
反模式检测器:
impeccable 内置了 41 条确定性检测规则,能自动识别:
AI 常见陋习:侧边栏边框、紫色渐变、bounce 缓动、深色光晕
通用设计问题:行长过长、内边距拥挤、触摸目标过小、跳过标题层级
这两个项目的出现,从产品本质上是把设计决策变成了工程规则
对于独立开发者和小团队来说,这意味着你可以用 AI 的速度,输出接近专业设计师的质量,不用再花时间手动调 padding、纠结配色、反复改字体了