Taste-Skill：3步让AI生成的页面摆脱“一眼AI“味

Taste-Skill3步让AI生成的页面摆脱一眼AI味【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill让AI写落地页你大概率又拿到了那张熟悉的AI脸三张等大特性卡片、紫蓝渐变、纯黑背景配 Inter 字体。Taste-Skill 就是冲着这个问题来的——一组给编码代理用的 Agent Skills专门阻止 AI 生成千篇一律的模板化界面让它输出的页面在布局、排版、动效和间距上拿得出手。一句话定位给AI装上设计品味Taste-Skill 是一套可移植的 Agent Skills装进 Codex、Cursor、Claude Code 或任何支持 skill 的代理里管住AI 味最重的几个环节反平庸规则明令禁止三卡片布局、AI紫渐变、全页 Inter 等默认套路13个技能分工既有出代码的实现类也有只出设计图的图像生成类三个调音旋钮布局变化度、动效强度、视觉密度1~10档随你拨框架无关规则针对设计意图而非某个框架APIReact、Vue、Svelte 都适用安装后第一步把技能装进项目最低门槛的路径就三步把仓库拉到本地git clone https://gitcode.com/gh_mirrors/ta/taste-skill在支持 skills 的编码代理里执行npx skills add 仓库地址它会扫描仓库的 skills 目录并安装全部技能只想要某一个加--skill参数指定安装名比如--skill imagegen-frontend-mobile不想走 CLI 也行直接把对应的 SKILL.md 复制进项目甚至粘进 ChatGPT/Codex 对话里用装完不用配置。你在代理里说一句做个 SaaS 落地页代理会自动读取技能里的规则来约束输出。这张图是由 taste-skill 生成的 Floria 站点首屏左文右图的非对称首屏、衬线斜体标题、克制的单强调色都是反平庸规则直接约束出来的结果。核心能力拆解它管住哪几件事落地页不再AI脸没装它之前AI 的默认动作是内容居中、三张等大卡片并排、标题用黑体默认字、背景纯 #000。装了之后它会先读你的需求、给出一行设计判断比如这是一个面向技术买家的 B2B 落地页走 Linear 式极简语言再动手。布局上刻意打破居中偏见——左对齐标题配居中数据、不等高的图片并排、用负边距制造层叠配色上强调色最多一种、饱和度压到 80% 以下紫蓝渐变这种指纹被直接拉黑。设计图先行先出图再写码如果你要的是好看优先的营销页可以走图像先行的流水线先用imagegen-frontend-web技能让代理生成网站设计图英雄区、多区块布局强调排版和间距你自己先当甲方审图满意后把图丢给image-to-code技能它按生成参考图→分析→实现代码的顺序落地。之前是 AI 一口气写完再返工现在是对着定稿的图写代码方向不会跑偏。移动端同理imagegen-frontend-mobile出的是可阅读的 iOS/Android 界面流而不是一堆互相不搭的碎屏。旧站改造先体检再动刀老项目最忌推倒重来。redesign-skill的流程是固定的先扫描代码库搞清框架和样式方案然后按一份审计清单逐条挑毛病——标题字号撑不起存在、段落超过 65 字符宽、悬停态缺失、动画用了top/width而不是transform——最后只修这些问题不动功能代码。说白了它是给前端做 code review 的那种同事只是审的是 UI。进阶玩法三个旋钮怎么拨taste-skill 文件开头有三个 1~10 的旋钮直接决定输出的性格DESIGN_VARIANCE布局变化度低档是严格对称网格、均匀内边距高档出现不对称网格、分数单位、大片留白页面更有编辑感MOTION_INTENSITY动效强度低档只有悬停和点击反馈中档是 0.3 秒级 CSS 过渡加级联延迟高档上滚动触发的视差和编排式入场通常交给 GSAP/Framer MotionVISUAL_DENSITY视觉密度低档像画廊区块之间大量呼吸高档像驾驶舱小内边距、1px 线条分隔、数字全部等宽字体默认基线是 8/6/4偏有设计感的落地页。你不用背档位跟代理说一句动效再收一点它会对话式改值不用手改文件。它擅长什么不擅长什么诚实说边界主场落地页、作品集、品牌站、营销型多区块页面以及现有站点的 UI 翻新。这些是技能文件明确针对的场景不在射程内仪表盘、数据表格、多步表单这类产品 UI 它自己声明不是我的活高密度数据界面建议按 DENSITY 高档档单独调别和官方设计系统硬刚如果你的项目该用 Fluent、Material、Carbon 这类官方组件库技能要求直接装官方包而不是手搓一套近似 CSS版本在快速迭代默认技能现在是 v2 实验版规则还在动生产项目建议锁定 v1 或固定安装名避免下次更新后行为漂移快速答疑绑定某个框架或代理吗不绑。规则写的是设计意图怎么用 Grid、阴影怎么调不是某个框架的 API所以 React、Vue、Svelte、原生 CSS 都能配合。代理侧凡是能读 SKILL.md 的都能装。SKILL.md 到底是什么一份可移植的指令文件。代理加载它之后里面的设计规则就生效了。它可以躺在仓库里被npx skills add自动发现也可以直接复制进项目或对话里。图像生成技能也是同样方式安装吗是。它们和代码技能同放在 skills 目录 下同一个 CLI 就能发现装完用于 ChatGPT Images 或 Codex 的图像模式产出只有设计图、没有代码。输出效果不稳定怎么办先检查需求描述里有没有给vibe 词比如 minimalist、brutalist、editorial。技能是先做需求推断再动手的描述越具体三档旋钮的取值越准跑偏概率越小。写在最后开头那张AI脸本质是模型在偷懒走默认审美。Taste-Skill 没换模型只是把设计底线写成了规则塞给它。建议先拿一个不起眼的活动页或作品集页面试水装好技能跑一遍对比一下前后两版首屏——差别大概比你想的大。【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考