Taste-Skill 指南让 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 写一个前端页面十次里有九次长得很像紫色渐变背景、居中大标题加副文案、三张整齐划一的卡片、再配一套 Inter 字体加深色配色。这就是AI 模板感也是很多 AI 生成界面的通病。Taste-Skill是一组可以直接装进 AI 编码助手的「设计技能」文件它不写具体代码而是教会 AI 先读需求、再动手产出的页面在布局、字体、动效和间距上更像人工设计而不是套模板。一、AI 页面为什么总像同一个模子问题不在模型能力而在它跳过了设计判断直接调用记忆里的「安全默认值」。这些默认值恰好是所有 AI 页面撞脸的重灾区AI 紫渐变深色底网纹加紫色光晕几乎成了 AI 落地页标配三卡片排版三个等宽功能卡并排谁都用、谁都没想过换玻璃拟态滥用到处糊一层毛玻璃显得高级实则廉价装饰性废话页脚堆版本号、标题下加城市名和时间条没有信息量Taste-Skill 的思路是把设计师的工作流程拆成指令先理解你要做什么再决定长什么样最后才输出代码。规则都写在SKILL.md这类纯文本文件里AI 助手能自动加载的指令文件你不需要学任何框架 API。二、先看设计简报再动三个调节旋钮装好默认技能后AI 的第一步不是写代码而是做两件事。1. 输出一行「设计判读」AI 会先从你的描述里提取信号页面类型SaaS 落地页、个人作品集还是政府服务网站、你用的风格词「简约」「高端」「实验感」、参考链接、目标受众以及已有的品牌资产。然后它必须用一行话报出结论例如「这是一个面向技术买家的 B2B 落地页走 Linear 式极简风」。如果需求模糊到结论会分叉它只允许追问一个问题不许连续轰炸。2. 调好三个 1 到 10 的旋钮判读完成后AI 设置三个全局参数后续所有布局、动效、密度决策都受它们约束DESIGN_VARIANCE布局变化度。1 是完全对称保守10 是不对称的实验性排版MOTION_INTENSITY动效强度。1 是基本不动10 是滚动联动加磁吸等电影级效果VISUAL_DENSITY视觉密度。1 是画廊式留白10 是驾驶舱式信息密度旋钮不用你手改文件在对话里说一句「这个页面再实验一点」就行AI 会自己换算成新数值。三、一行命令安装你的设计技能所有技能都放在仓库的skills/目录用npx skills add命令即可安装AI 助手会自动发现并加载npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill只需要某一个技能时加--skill指定安装名注意安装名是技能文件里的name字段不一定等于文件夹名npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend不想装 CLI 也没关系把任意SKILL.md复制到项目里或整段粘贴进 AI 对话效果一样。四、一个落地页场景从判读到成品的完整参数以最常见的创业公司 SaaS 落地页为例推荐组合是默认的taste-skill加上imagegen-frontend-web图像参考技能分两步走先让 AI 用图像技能生成几张首屏参考图你挑一版满意的再把参考图连同下面的参数交给编码 AI 实现按 image-to-code 流程执行先分析参考图再实现代码 DESIGN_VARIANCE: 7, MOTION_INTENSITY: 6, VISUAL_DENSITY: 4这一组数值对应「主流 SaaS 落地页」预设布局有变化但不过分有滚动动效但克制信息量适中。做作品集就把 VARIANCE 拉到 8、密度压到 3走编辑感大留白路线给政府或合规类站点做页面则降到 3 / 2 / 5信任感优先于视觉炫技。五、技能怎么选默认版、严格版和风格包仓库里有十多个技能按需取用即可不用全装。常用的几个差异如下taste-skillv2 实验版默认技能完整走判读 旋钮流程适合大多数落地页、作品集和重设计项目taste-skill-v1原版行为被完整保留依赖 v1 精确效果时安装design-taste-frontend-v1gpt-tasteskill面向 GPT / Codex 的更严格变体布局变化和动效要求更高redesign-skill改造现有项目先审计现有 UI 的问题间距、层级、样式再动手修soft / minimalist / brutalist三个风格包分别是高端柔和、编辑部极简、工业粗野适合方向已定的项目output-skill专治 AI 输出半成品强制完整交付、禁止占位注释imagegen 系列只出参考图不出代码可配合 ChatGPT Images 等工具图生成后再交给编码 AI六、参数调优对照表和常见疑问按项目类型快速取值项目类型VARIANCEMOTIONDENSITY营销落地页7-96-83-5企业官网 / 合规站点3-42-34-5设计师作品集873数据密集型后台页2-31-28-9拿不准时就用默认基线 8 / 6 / 4再根据判读微调比凭感觉拍数字稳。常见问题Q支持 React、Vue、Svelte 吗支持。规则针对的是设计意图而不是某个框架的 API主流前端框架都能用。Qv2 和 v1 差别在哪v2 新增了简报推理、设计系统映射、暗色模式协议、重设计审计流程和收尾预检清单v1 是原版行为安装名不同两者可共存。Q图像生成技能需要额外付费工具吗不需要。它本质是写作指令任何能生图的 AI 都能配合使用出图后交给编码 AI 落地即可。Q怎么避免页面还是「一眼 AI」v2 内置了一份禁用清单包括紫色渐变、三卡片并排、装饰性版本号等典型 AI 痕迹输出前会逐项自查这是它和随手写提示词最大的区别。想让 AI 交出拿得出手的界面现在就可以装上默认技能试一个真实项目效果不满意再换风格包。项目内可参考 skills/ 目录浏览全部技能文件版本差异详见 CHANGELOG.md。【免费下载链接】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），仅供参考