让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写个落地页交回来的却是居中大标题、三张一模一样功能卡、紫蓝渐变背景。换十个模型写十遍长相都差不多。Taste-Skill 就是冲着这个问题来的它把一套设计规则打包成可安装的 Agent Skill装进你的 AI 编码工具后布局、字体、配色、动效都会被约束在不像AI的范围内。一句话看懂 Taste-Skill它是一份可以安装给 AI 的设计规范不是 UI 框架也不替代你写代码。装好之后AI 每次动笔前都会先读它然后帮你做成这些事新项目输出不再撞脸同一模型、同一提示词出来的页面布局不会千篇一律老项目不用推倒重来先审计现有 UI再按优先级修排版、间距和层次设计稿先行让 AI 先出分区设计图确认方向后再写成可运行的前端代码堵住偷懒输出禁止剩余代码类似这类占位写法要完整交付就完整交付快速上手三步装好 Taste-Skill第一步整包安装。用官方 CLI 拉取仓库里skills/目录下的全部技能npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill第二步按需只装一个可选。技能名取自 SKILL.md 里的name字段例如npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill imagegen-frontend-mobile第三步在对话里启用。对你的编码代理说一句按 taste-skill 的规则来做这个页面即可。懒人方案直接把任意一份 SKILL.md 复制进项目或粘贴进 ChatGPT/Codex 对话效果相同。按场景选对玩法不知道从哪个技能入手对照你现在要干的活使用场景推荐选项一句话理由刚接触想装完就出活taste-skill默认全能款读需求、推断风格、自动调三个旋钮已有站点想治好模板味redesign-skill先扫描审计再定向修复不重写整个代码库想先看图定方向再让 AI 写码image-to-code-skill出图、分析、实现一条流水线成品贴合参考图交付物就是设计稿网页/手机/品牌imagegen-frontend-web、imagegen-frontend-mobile、brandkit只生成图片不写代码适合喂给图像模型AI 总爱写到一半截断output-skill硬性禁止省略号占位强制完整输出视觉风格已定要高端克制感soft-skill / minimalist-skill分别对应安静贵气和Notion 式克制两条路线三个旋钮调出你要的样子taste-skill 文件顶部有三个 1-10 的档位改数字就行不用懂代码DESIGN_VARIANCE默认 8管布局的实验程度。做给保守甲方看的项目降到 4-5得到规整的对称栅格保留 8 以上得到非对称留白、错落排版。MOTION_INTENSITY默认 6管动效深度。政务类、文档型站点降到 2-3只留悬停和按压反馈想要滚动联动、磁性按钮拉到 8 以上但页面必须真的动起来不许宣称了动效却是静态页。VISUAL_DENSITY默认 4管一屏塞多少信息。品牌站、作品集降到 2-3得到画廊式大留白数据密集型产品拉到 8 以上用细线分隔和等宽数字代替卡片。拿不准就用默认值技能会先读懂你的需求再自己微调这三个数字。效果实拍下面的页面就是 taste-skill 的产出案例可以对照前面三条规则看它如何执行注意开头不是居中三件套而是左右分开的非对称构图标题用了有辨识度的无衬线字体而非 Inter强调色只有一处没有紫蓝渐变。往下翻能看到同一套调色板贯穿始终客户评价被裁成短片段而非大段文字行动按钮和页脚保持克制。整页没有一处布局家族重复使用。好看背后的内置规则规则很多挑四组最影响观感的说每条后面是它防住的问题排版Inter 不再是默认首选改用 Geist、Satoshi 等。收益一眼摆脱 AI 生成页的共同脸。正文限宽约 65 字符。后果不加这个限制长句会拉成影响阅读的全屏宽度。色彩全页只允许一个强调色饱和度压在 80% 以下底色走中性灰。AI 紫/蓝发光被明确禁止。违反的代价你的页面会立刻混进那 90% 无法区分的 AI 站里。布局DESIGN_VARIANCE 大于 4 时居中 Hero 直接禁用必须走分屏或左右错位。同一种版式结构如三列图卡整页只能用一次防止每个区块都长一样。交互加载、空状态、错误三个状态必须实现不许只画成功那一帧。:active时按钮下沉 1px 或缩小 98%模拟物理按压点下去才有反馈感。进阶技巧与性能红线让界面更上头磁性悬停、滚动进度这类连续动画用 Motion 的useMotionValue而不是useState。因为后者每帧都触发重渲染手机上直接卡死。动效一律走弹簧物理stiffness 100、damping 20别用线性缓动否则动作没有收住的感觉。玻璃拟态不要只叠一个 backdrop-blur加 1px 内边框和一层内阴影才能模拟出真实的边缘折射。别踩的性能坑噪点、颗粒滤镜只贴在固定且pointer-events-none的伪元素上。挂在滚动容器上会持续触发 GPU 重绘移动端帧率立刻下降。动画只碰transform和opacity别动top、width这类会触发重排的属性。z-index 只留给导航栏、弹层这类系统层级满屏z-50迟早互相打架。你可能想问React、Vue、Svelte 都能用吗可以。规则针对的是设计意图而不是某个框架的 API写在哪种技术栈里都成立。SKILL.md 到底是什么一份 AI 代理能自动加载的自然语言指令文件本质是写给模型的岗位说明。不需要安装工具复制进仓库或粘贴进对话也能生效。图像生成技能要另外装吗不用它们和代码技能同放在skills/目录下同一条npx skills add就能全部发现。默认装的是 v1 还是 v2现在是 v2 实验版是一次大重写。如果你的工作流依赖 v1 的精确行为单独装design-taste-frontend-v1即可锁定旧版。这套规则会不会管太死规则大多是默认禁止 明确豁免路径比如品牌本身是紫色紫色就可以用。想深入了解规则怎么来的可以看仓库里的research/目录。写在最后Taste-Skill 做的事其实只有一件把AI 默认审美从你项目的选项里删掉。装一次之后每次让 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），仅供参考 让AI生成的页面不再“模板味“：Taste-Skill前端设计指南
让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写个落地页交回来的却是居中大标题、三张一模一样功能卡、紫蓝渐变背景。换十个模型写十遍长相都差不多。Taste-Skill 就是冲着这个问题来的它把一套设计规则打包成可安装的 Agent Skill装进你的 AI 编码工具后布局、字体、配色、动效都会被约束在不像AI的范围内。一句话看懂 Taste-Skill它是一份可以安装给 AI 的设计规范不是 UI 框架也不替代你写代码。装好之后AI 每次动笔前都会先读它然后帮你做成这些事新项目输出不再撞脸同一模型、同一提示词出来的页面布局不会千篇一律老项目不用推倒重来先审计现有 UI再按优先级修排版、间距和层次设计稿先行让 AI 先出分区设计图确认方向后再写成可运行的前端代码堵住偷懒输出禁止剩余代码类似这类占位写法要完整交付就完整交付快速上手三步装好 Taste-Skill第一步整包安装。用官方 CLI 拉取仓库里skills/目录下的全部技能npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill第二步按需只装一个可选。技能名取自 SKILL.md 里的name字段例如npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill imagegen-frontend-mobile第三步在对话里启用。对你的编码代理说一句按 taste-skill 的规则来做这个页面即可。懒人方案直接把任意一份 SKILL.md 复制进项目或粘贴进 ChatGPT/Codex 对话效果相同。按场景选对玩法不知道从哪个技能入手对照你现在要干的活使用场景推荐选项一句话理由刚接触想装完就出活taste-skill默认全能款读需求、推断风格、自动调三个旋钮已有站点想治好模板味redesign-skill先扫描审计再定向修复不重写整个代码库想先看图定方向再让 AI 写码image-to-code-skill出图、分析、实现一条流水线成品贴合参考图交付物就是设计稿网页/手机/品牌imagegen-frontend-web、imagegen-frontend-mobile、brandkit只生成图片不写代码适合喂给图像模型AI 总爱写到一半截断output-skill硬性禁止省略号占位强制完整输出视觉风格已定要高端克制感soft-skill / minimalist-skill分别对应安静贵气和Notion 式克制两条路线三个旋钮调出你要的样子taste-skill 文件顶部有三个 1-10 的档位改数字就行不用懂代码DESIGN_VARIANCE默认 8管布局的实验程度。做给保守甲方看的项目降到 4-5得到规整的对称栅格保留 8 以上得到非对称留白、错落排版。MOTION_INTENSITY默认 6管动效深度。政务类、文档型站点降到 2-3只留悬停和按压反馈想要滚动联动、磁性按钮拉到 8 以上但页面必须真的动起来不许宣称了动效却是静态页。VISUAL_DENSITY默认 4管一屏塞多少信息。品牌站、作品集降到 2-3得到画廊式大留白数据密集型产品拉到 8 以上用细线分隔和等宽数字代替卡片。拿不准就用默认值技能会先读懂你的需求再自己微调这三个数字。效果实拍下面的页面就是 taste-skill 的产出案例可以对照前面三条规则看它如何执行注意开头不是居中三件套而是左右分开的非对称构图标题用了有辨识度的无衬线字体而非 Inter强调色只有一处没有紫蓝渐变。往下翻能看到同一套调色板贯穿始终客户评价被裁成短片段而非大段文字行动按钮和页脚保持克制。整页没有一处布局家族重复使用。好看背后的内置规则规则很多挑四组最影响观感的说每条后面是它防住的问题排版Inter 不再是默认首选改用 Geist、Satoshi 等。收益一眼摆脱 AI 生成页的共同脸。正文限宽约 65 字符。后果不加这个限制长句会拉成影响阅读的全屏宽度。色彩全页只允许一个强调色饱和度压在 80% 以下底色走中性灰。AI 紫/蓝发光被明确禁止。违反的代价你的页面会立刻混进那 90% 无法区分的 AI 站里。布局DESIGN_VARIANCE 大于 4 时居中 Hero 直接禁用必须走分屏或左右错位。同一种版式结构如三列图卡整页只能用一次防止每个区块都长一样。交互加载、空状态、错误三个状态必须实现不许只画成功那一帧。:active时按钮下沉 1px 或缩小 98%模拟物理按压点下去才有反馈感。进阶技巧与性能红线让界面更上头磁性悬停、滚动进度这类连续动画用 Motion 的useMotionValue而不是useState。因为后者每帧都触发重渲染手机上直接卡死。动效一律走弹簧物理stiffness 100、damping 20别用线性缓动否则动作没有收住的感觉。玻璃拟态不要只叠一个 backdrop-blur加 1px 内边框和一层内阴影才能模拟出真实的边缘折射。别踩的性能坑噪点、颗粒滤镜只贴在固定且pointer-events-none的伪元素上。挂在滚动容器上会持续触发 GPU 重绘移动端帧率立刻下降。动画只碰transform和opacity别动top、width这类会触发重排的属性。z-index 只留给导航栏、弹层这类系统层级满屏z-50迟早互相打架。你可能想问React、Vue、Svelte 都能用吗可以。规则针对的是设计意图而不是某个框架的 API写在哪种技术栈里都成立。SKILL.md 到底是什么一份 AI 代理能自动加载的自然语言指令文件本质是写给模型的岗位说明。不需要安装工具复制进仓库或粘贴进对话也能生效。图像生成技能要另外装吗不用它们和代码技能同放在skills/目录下同一条npx skills add就能全部发现。默认装的是 v1 还是 v2现在是 v2 实验版是一次大重写。如果你的工作流依赖 v1 的精确行为单独装design-taste-frontend-v1即可锁定旧版。这套规则会不会管太死规则大多是默认禁止 明确豁免路径比如品牌本身是紫色紫色就可以用。想深入了解规则怎么来的可以看仓库里的research/目录。写在最后Taste-Skill 做的事其实只有一件把AI 默认审美从你项目的选项里删掉。装一次之后每次让 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），仅供参考