Taste-Skill 实战指南：30秒装好，用3个参数告别AI界面模板感
Taste-Skill 实战指南30秒装好用3个参数告别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 生成的落地页总是长得差不多紫蓝渐变、居中大标题、三张一模一样的卡片横排。换十个提示词出来的还是同一个模板脸。Taste-Skill 就是一组可以装进 AI 代理的前端技能Agent Skills专门让 AI 写界面时避开这种千篇一律的低质设计把布局、排版、动效和间距拉上去。它还提供纯出图的技能可以先画设计稿再交给编码代理实现。下面是从安装到调参的完整路径。快速上手30秒装好 Taste-Skill仓库里的全部技能代码类和图像生成类用同一条命令即可发现并安装npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill只装某一个技能用--skill指定npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill imagegen-frontend-mobile不想用命令行也行把任意一个SKILL.md复制进项目或直接粘贴到 ChatGPT / Codex 的对话里效果一样。按场景选技能新建、改造还是出图技能一共有十几种每种只做一件事不需要全装。看你的场景对号入座即可完整的技能目录见 skills/。实现类产出代码你的场景推荐技能一句话说明从零做新页面想要稳妥默认taste-skill通用默认款不绑定单一视觉风格用 GPT / Codex要更严格的规则gpt-taste更高布局变化、更强动效方向、激进反模板想先出参考图分析后再写代码image-to-code-skill出图 → 分析 → 实现一条流水线已有项目UI 观感差要修redesign-skill先审计 UI再修布局、间距、层次方向已定精致、平静、高端soft-skill柔和对比度、大留白、弹性动效模型输出老被截断output-skill强制完整输出不留占位注释要 Notion / Linear 那种克制感minimalist-skill克制配色、清晰结构要硬朗机械、瑞士风brutalist-skill⚠️ BETA强对比、实验性布局要兼容 Google Stitchstitch-skill可选 DESIGN.md 导出格式图像生成类只出图不写代码你想画什么推荐技能一句话说明网站稿hero、着陆页、多区块imagegen-frontend-web强排版、强间距的反模板艺术指导移动屏幕与流程imagegen-frontend-mobileiOS / Android字体易读、整套连贯品牌身份面板brandkitlogo 方向、配色、字体、跨类别应用新手直接从 taste-skill 开始。如果交付物本身是图设计稿、流程、身份板先用 imagegen 系技能出图再把结果喂给你的编码代理。三个参数调界面风格taste-skill 在技能文件skills/taste-skill/SKILL.md顶部留了三个旋钮取值都是 1 到 10。改一个数字界面气质就变一档默认基线是 8 / 6 / 4源码见 skills/taste-skill/。参数控制什么默认值含义从低到高DESIGN_VARIANCE布局实验程度81 完美对称10 艺术化混乱居中整洁 → 不对称、现代MOTION_INTENSITY动画深度61 静态无动效10 电影级物理只有悬停 → 滚动、磁性效果VISUAL_DENSITY每个视口的信息量41 艺术画廊般空旷10 驾驶舱般密集宽敞 → 数据密集仪表板做政府或公共服务站就把三项调低做创意工作室站就调高。不用手改文件在对话里直接说把动效调到 3即可。接入前后对比界面到底好在哪变化不是装饰更多而是五个维度上肉眼可见的升级维度接入前接入 Taste-Skill 后布局全部居中、三张同款卡片不对称分屏、留白有层次色彩AI 紫 / 蓝渐变绝对中性基调Zinc / Slate 唯一强调色饱和度低于 80%字体清一色 InterGeist、Outfit、Satoshi 等非通用字体仪表板禁用衬线体动效没有或通用圆形加载按压反馈、弹性物理、匹配布局的骨架屏状态只写成功态加载、空态、错误、触觉反馈全实现避坑规则必须做和千万别做技能文件里埋了大量红线压缩成下面两张清单照着执行就不会翻车✅ 必须做❌ 千万别做强调色只用 1 种全程一个调色板用AI 紫 / 蓝美学布局实验值高于 4 时用分屏、左文右图等结构居中堆 Hero该参数 4 时被明令禁止加载、空态、错误态一个不少只写成功态其余留空玻璃效果在 backdrop-blur 上加 1px 内边框和内阴影模拟折射只糊一层 backdrop-blur 交差磁性悬停用 useMotionValue跑在渲染周期外用 useState 驱动连续动画移动端直接卡死噪点滤镜放固定的、不可点击的伪元素上把噪点滤镜挂在滚动容器上持续 GPU 重绘只动画 transform 和 opacity动画 top、left、width、heightz-index 只给粘性导航、模态框、覆盖层用到处随手 z-50规则背后多是性能和物理感问题GPU 只擅长合成 transform滚动容器上盖滤镜等于每帧重画。快问快答React、Vue、Svelte 都能用吗能。规则针对的是设计意图不是某个框架的 API。SKILL.md 是什么代理能自动加载的可移植指令文件用 npx 命令装或复制进仓库、贴进对话都行。图像生成技能也用 npx 安装吗是的它们和代码技能同放skills/目录同一个命令就能发现。和其他 AI 设计技能差在哪多个专业变体、可调参数外加基于专项研究的反重复规则研究底稿见 research/且对主流编码代理都框架无关。收尾Taste-Skill 本质上是一套装进 AI 的设计品味指令集。把上面那条 npx 命令跑一遍让代理加载技能你的下一个页面就不会再是模板脸。【免费下载链接】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），仅供参考