尧图网页设计 
Taste-Skill 实战指南让 AI 生成的 React、Vue、Svelte 前端摆脱模板脸【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skillTaste-Skill 是一套给 AI 编码代理用的反平庸前端规则集Agent Skill专门解决 AI 写页面总是一股AI 味的问题。读完这篇实战教程你会知道如何把它装进现有工程、三个关键参数怎么调、React/Vue/Svelte 各自的适配坑在哪以及上线前的自查清单。Taste-Skill 规则生成的花卉工作室落地页 Hero 区域左文右图的非对称布局、克制的强调色与真实图片正是它要阻止三张同款卡片紫色渐变这类默认输出的效果Taste-Skill 是什么一份规则文件不是一个 npm 包先纠正一个最常见的误解Taste-Skill 不是组件库也不是需要import的依赖。它的核心是一个SKILL.md指令文件内容是一套可执行的设计规则怎么解读需求、选什么设计系统、排版/配色/布局的硬性约束、动画规范以及一份上线前必须逐条勾选的 Pre-Flight Check。接入方式是把这份文件喂给你的 AI 代理Cursor、Claude Code、Codex 等。之后代理写代码时就会自动遵守这些规则。你的框架代码一行不用改改的是 AI 的行为。参数速查三个旋钮先看懂v2 默认技能只暴露三个 1-10 的旋钮文件里的基线是8 / 6 / 4。所有布局、动效、密度决策都由它们门控参数调低的效果调高的效果适用场景DESIGN_VARIANCE对称网格、居中、干净非对称网格、大留白、错落营销页调高政务/信任型站点调低MOTION_INTENSITY仅 hover/active 反馈滚动触发、磁吸、物理动效品牌站调高工具型产品调低VISUAL_DENSITY画廊式大间距驾驶舱式密集数据内容站调低数据展示区调高常用组合可以直接抄摘自技能内置预设表场景VARIANCEMOTIONDENSITYSaaS 落地页764创意/代理机构983极简/冷静/编辑风格5-63-42-3政府/受监管/可访问性优先3-42-34-5注意两点v2 会先从你的需求描述推断旋钮值你说Linear 风格它就自动往低调走覆盖方式是在对话里直接改比如这次把 MOTION 拉到 8不需要去编辑文件。另外DESIGN_VARIANCE 4时禁止居中 Hero页面必须走分屏或不对称结构。安装与激活把 SKILL.md 放进你的工程git clone https://gitcode.com/gh_mirrors/ta/taste-skill然后把skills/taste-skill/SKILL.md复制到你项目根目录或 AI 代理约定加载技能的位置在提示词里指向它即可直接粘贴进对话窗口也行。装哪一份技能技能文件夹安装名什么时候用它taste-skilldesign-taste-frontend默认选它。v2 实验版读需求、推断设计方向、硬规则上线检查表taste-skill-v1design-taste-frontend-v1依赖 v1 确切行为的存量项目锁定不升级gpt-tasteskillgpt-tasteGPT/Codex 专属更严格的布局与动效约束redesign-skillredesign-existing-projects改老项目先审计再动刀output-skillfull-output-enforcementAI 又给你半成品、留// TODO占位时React 接入的坑动效隔离和 useStateREADME 的 FAQ 明确回答Does it work with React, Vue, Svelte? Yes规则针对设计意图而非某个框架 API。但技能默认技术栈是 React/Next.js Tailwind v4 Motion所以 React 项目的约束最具体也最容易踩坑动效必须隔离在叶子级 Client Component。用了 Motion、滚动监听或指针物理的组件文件第一行必须是use clientServer Component 只负责渲染静态布局把动效逻辑塞进服务端组件会直接报错。连续变化的值鼠标位置、滚动进度禁止走useState每次变更都会重渲染整棵子树移动端直接卡死。技能指定用 Motion 的useMotionValue/useTransform在渲染循环外驱动。动效库新代码统一从motion/react导入旧的framer-motion包只是遗留别名还能跑但别在新项目里用它。永久循环的动画组件用React.memo记忆化并和页面其余部分完全隔离。磁吸按钮的最小写法use client; import { motion, useMotionValue, useTransform } from motion/react; // 指针位移走 motion value不触发 React 重渲染 // 组件必须独立成叶子 client 组件 const x useMotionValue(0); const y useMotionValue(0); const style useTransform([x, y], ([x, y]) translate(${x}px, ${y}px));完整的磁吸按钮含指针离开回弹、React.memo包裹实现完整代码见仓库 skills/taste-skill/SKILL.md 中 Motion 相关章节的规范。Vue 接入用 CSS 变量代替重渲染Vue 没有官方的 Motion 移植包别去装来路不明的framer-motion-vue替代品。Vue 的解法更简单响应式状态只写CSS 变量transform直接消费变量指针移动过程中模板零重渲染。script setup const t ref(translate(0px, 0px)); function move(e) { // 连续值不进响应式依赖链写 CSS 变量模板不重渲染 e.currentTarget.style.setProperty(--mag, translate(${(e.offsetX - e.currentTarget.offsetWidth / 2) * 0.15}px, ${(e.offsetY - e.currentTarget.offsetHeight / 2) * 0.15}px)); } function reset() { t.value translate(0px, 0px); } /script template button classmag mousemovemove mouseleavereset slot / /button /template style scoped .mag { transform: var(--mag, translate(0px, 0px)); will-change: transform; } /styleVue 侧另外两个注意点style scoped天然就是技能的样式隔离要求动效组件不会污染全局useEffect对应的清理逻辑放onBeforeUnmount事件监听器要成对移除。GSAP ScrollTrigger 的 pin/scrub 效果是纯 DOM 操作Vue 里照用和框架无关。Svelte 接入编译器已经把最难的部分做了Svelte 是编译型框架响应式声明在编译期就绑到具体 DOM 节点上没有 diff 层。对这套规则意味着动效隔离天然成立几乎不需要额外架构script function move(e) { // 响应式声明直接写 CSS 变量不经过 diff // 连续指针事件下开销接近原生 JS e.currentTarget.style.setProperty(--mag, translate(${(e.offsetX - e.currentTarget.offsetWidth / 2) * 0.15}px, ${(e.offsetY - e.currentTarget.offsetHeight / 2) * 0.15}px)); } /script button classmag onmousemove{move} onmouseleave{() e.currentTarget.style.removeProperty(--mag)} slot / /button style .mag { transform: var(--mag, translate(0px, 0px)); will-change: transform; } /styleSvelte 的两个小提醒transform和opacity是 GPU 加速属性动效只碰这两个样式作用域让每个组件的动效样式互不串扰正好满足技能里一套圆角系统、一个强调色这类页面级约束的落地方式。跨框架通用四条性能硬约束以下四条在三个框架里完全一样属于技能 §6 的硬性护栏约束具体要求为什么只动transform/opacity禁止动画top/left/width/height后者触发布局重排掉帧grain/noise 滤镜只能放在fixedpointer-events: none的伪元素上挂在滚动容器上会持续 GPU 重绘移动端 FPS 直接崩Reduced motionMOTION_INTENSITY 3的一切动效必须响应prefers-reduced-motion不可协商项Motion 用useReducedMotion()纯 CSS 用media门控滚动监听禁止window.addEventListener(scroll)和 rAF 循环写框架状态用 MotionuseScroll()/ ScrollTrigger /IntersectionObserver替代再加两条布局层面的满屏 Hero 用min-h-[100dvh]而不是h-screeniOS Safari 地址栏会导致跳动z-index 只留给系统层粘性导航、模态、覆盖层别随手z-50。同一示例站点的分区布局图片与标题占左侧流程信息右置成列表是非对称留白单一强调色的典型输出上线前的 Pre-Flight 自查清单技能的 §14 给了一份几十项的强制检查表以下是和框架无关、最常翻车的高频项交付前过一遍全页零 em-dash—这是生产测试中违反率最高的 Tell一律换成连字符或改写句子eyebrow小字大写标签数量 ≤ 章节数 / 3Hero 算一个强调色全站锁定一种圆角系统锁定一套不允许中途换每个 CTA 文字对比度过 WCAG AA桌面端不换行无三张同款等宽特性卡片、无 div 拼的假产品截图动效有动机每个动画能用一句话说清它在传达什么说不出就删暗色/亮色两种模式都实际看过一遍有任一条过不了就是没做完改完再交付。下一步建议与参考想要更高级的柔和质感叠加skills/soft-skill/SKILL.md高定感 UI、弹簧动效做产品型极简界面用skills/minimalist-skill/SKILL.mdLinear/Notion 风改存量项目先用skills/redesign-skill/SKILL.md走审计流程别直接重画AI 又给你截断输出装skills/output-skill/SKILL.md强制完整输出v1 和 v2 的具体差异见 CHANGELOG.md为什么模型会偷懒、怎么治的完整研究见 research/ 目录。规则文件的全文在 skills/taste-skill/SKILL.md建议通读一遍再让 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辅助生成（AIGC），仅供参考 Taste-Skill 实战指南：让 AI 生成的 React、Vue、Svelte 前端摆脱模板脸
Taste-Skill 实战指南让 AI 生成的 React、Vue、Svelte 前端摆脱模板脸【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skillTaste-Skill 是一套给 AI 编码代理用的反平庸前端规则集Agent Skill专门解决 AI 写页面总是一股AI 味的问题。读完这篇实战教程你会知道如何把它装进现有工程、三个关键参数怎么调、React/Vue/Svelte 各自的适配坑在哪以及上线前的自查清单。Taste-Skill 规则生成的花卉工作室落地页 Hero 区域左文右图的非对称布局、克制的强调色与真实图片正是它要阻止三张同款卡片紫色渐变这类默认输出的效果Taste-Skill 是什么一份规则文件不是一个 npm 包先纠正一个最常见的误解Taste-Skill 不是组件库也不是需要import的依赖。它的核心是一个SKILL.md指令文件内容是一套可执行的设计规则怎么解读需求、选什么设计系统、排版/配色/布局的硬性约束、动画规范以及一份上线前必须逐条勾选的 Pre-Flight Check。接入方式是把这份文件喂给你的 AI 代理Cursor、Claude Code、Codex 等。之后代理写代码时就会自动遵守这些规则。你的框架代码一行不用改改的是 AI 的行为。参数速查三个旋钮先看懂v2 默认技能只暴露三个 1-10 的旋钮文件里的基线是8 / 6 / 4。所有布局、动效、密度决策都由它们门控参数调低的效果调高的效果适用场景DESIGN_VARIANCE对称网格、居中、干净非对称网格、大留白、错落营销页调高政务/信任型站点调低MOTION_INTENSITY仅 hover/active 反馈滚动触发、磁吸、物理动效品牌站调高工具型产品调低VISUAL_DENSITY画廊式大间距驾驶舱式密集数据内容站调低数据展示区调高常用组合可以直接抄摘自技能内置预设表场景VARIANCEMOTIONDENSITYSaaS 落地页764创意/代理机构983极简/冷静/编辑风格5-63-42-3政府/受监管/可访问性优先3-42-34-5注意两点v2 会先从你的需求描述推断旋钮值你说Linear 风格它就自动往低调走覆盖方式是在对话里直接改比如这次把 MOTION 拉到 8不需要去编辑文件。另外DESIGN_VARIANCE 4时禁止居中 Hero页面必须走分屏或不对称结构。安装与激活把 SKILL.md 放进你的工程git clone https://gitcode.com/gh_mirrors/ta/taste-skill然后把skills/taste-skill/SKILL.md复制到你项目根目录或 AI 代理约定加载技能的位置在提示词里指向它即可直接粘贴进对话窗口也行。装哪一份技能技能文件夹安装名什么时候用它taste-skilldesign-taste-frontend默认选它。v2 实验版读需求、推断设计方向、硬规则上线检查表taste-skill-v1design-taste-frontend-v1依赖 v1 确切行为的存量项目锁定不升级gpt-tasteskillgpt-tasteGPT/Codex 专属更严格的布局与动效约束redesign-skillredesign-existing-projects改老项目先审计再动刀output-skillfull-output-enforcementAI 又给你半成品、留// TODO占位时React 接入的坑动效隔离和 useStateREADME 的 FAQ 明确回答Does it work with React, Vue, Svelte? Yes规则针对设计意图而非某个框架 API。但技能默认技术栈是 React/Next.js Tailwind v4 Motion所以 React 项目的约束最具体也最容易踩坑动效必须隔离在叶子级 Client Component。用了 Motion、滚动监听或指针物理的组件文件第一行必须是use clientServer Component 只负责渲染静态布局把动效逻辑塞进服务端组件会直接报错。连续变化的值鼠标位置、滚动进度禁止走useState每次变更都会重渲染整棵子树移动端直接卡死。技能指定用 Motion 的useMotionValue/useTransform在渲染循环外驱动。动效库新代码统一从motion/react导入旧的framer-motion包只是遗留别名还能跑但别在新项目里用它。永久循环的动画组件用React.memo记忆化并和页面其余部分完全隔离。磁吸按钮的最小写法use client; import { motion, useMotionValue, useTransform } from motion/react; // 指针位移走 motion value不触发 React 重渲染 // 组件必须独立成叶子 client 组件 const x useMotionValue(0); const y useMotionValue(0); const style useTransform([x, y], ([x, y]) translate(${x}px, ${y}px));完整的磁吸按钮含指针离开回弹、React.memo包裹实现完整代码见仓库 skills/taste-skill/SKILL.md 中 Motion 相关章节的规范。Vue 接入用 CSS 变量代替重渲染Vue 没有官方的 Motion 移植包别去装来路不明的framer-motion-vue替代品。Vue 的解法更简单响应式状态只写CSS 变量transform直接消费变量指针移动过程中模板零重渲染。script setup const t ref(translate(0px, 0px)); function move(e) { // 连续值不进响应式依赖链写 CSS 变量模板不重渲染 e.currentTarget.style.setProperty(--mag, translate(${(e.offsetX - e.currentTarget.offsetWidth / 2) * 0.15}px, ${(e.offsetY - e.currentTarget.offsetHeight / 2) * 0.15}px)); } function reset() { t.value translate(0px, 0px); } /script template button classmag mousemovemove mouseleavereset slot / /button /template style scoped .mag { transform: var(--mag, translate(0px, 0px)); will-change: transform; } /styleVue 侧另外两个注意点style scoped天然就是技能的样式隔离要求动效组件不会污染全局useEffect对应的清理逻辑放onBeforeUnmount事件监听器要成对移除。GSAP ScrollTrigger 的 pin/scrub 效果是纯 DOM 操作Vue 里照用和框架无关。Svelte 接入编译器已经把最难的部分做了Svelte 是编译型框架响应式声明在编译期就绑到具体 DOM 节点上没有 diff 层。对这套规则意味着动效隔离天然成立几乎不需要额外架构script function move(e) { // 响应式声明直接写 CSS 变量不经过 diff // 连续指针事件下开销接近原生 JS e.currentTarget.style.setProperty(--mag, translate(${(e.offsetX - e.currentTarget.offsetWidth / 2) * 0.15}px, ${(e.offsetY - e.currentTarget.offsetHeight / 2) * 0.15}px)); } /script button classmag onmousemove{move} onmouseleave{() e.currentTarget.style.removeProperty(--mag)} slot / /button style .mag { transform: var(--mag, translate(0px, 0px)); will-change: transform; } /styleSvelte 的两个小提醒transform和opacity是 GPU 加速属性动效只碰这两个样式作用域让每个组件的动效样式互不串扰正好满足技能里一套圆角系统、一个强调色这类页面级约束的落地方式。跨框架通用四条性能硬约束以下四条在三个框架里完全一样属于技能 §6 的硬性护栏约束具体要求为什么只动transform/opacity禁止动画top/left/width/height后者触发布局重排掉帧grain/noise 滤镜只能放在fixedpointer-events: none的伪元素上挂在滚动容器上会持续 GPU 重绘移动端 FPS 直接崩Reduced motionMOTION_INTENSITY 3的一切动效必须响应prefers-reduced-motion不可协商项Motion 用useReducedMotion()纯 CSS 用media门控滚动监听禁止window.addEventListener(scroll)和 rAF 循环写框架状态用 MotionuseScroll()/ ScrollTrigger /IntersectionObserver替代再加两条布局层面的满屏 Hero 用min-h-[100dvh]而不是h-screeniOS Safari 地址栏会导致跳动z-index 只留给系统层粘性导航、模态、覆盖层别随手z-50。同一示例站点的分区布局图片与标题占左侧流程信息右置成列表是非对称留白单一强调色的典型输出上线前的 Pre-Flight 自查清单技能的 §14 给了一份几十项的强制检查表以下是和框架无关、最常翻车的高频项交付前过一遍全页零 em-dash—这是生产测试中违反率最高的 Tell一律换成连字符或改写句子eyebrow小字大写标签数量 ≤ 章节数 / 3Hero 算一个强调色全站锁定一种圆角系统锁定一套不允许中途换每个 CTA 文字对比度过 WCAG AA桌面端不换行无三张同款等宽特性卡片、无 div 拼的假产品截图动效有动机每个动画能用一句话说清它在传达什么说不出就删暗色/亮色两种模式都实际看过一遍有任一条过不了就是没做完改完再交付。下一步建议与参考想要更高级的柔和质感叠加skills/soft-skill/SKILL.md高定感 UI、弹簧动效做产品型极简界面用skills/minimalist-skill/SKILL.mdLinear/Notion 风改存量项目先用skills/redesign-skill/SKILL.md走审计流程别直接重画AI 又给你截断输出装skills/output-skill/SKILL.md强制完整输出v1 和 v2 的具体差异见 CHANGELOG.md为什么模型会偷懒、怎么治的完整研究见 research/ 目录。规则文件的全文在 skills/taste-skill/SKILL.md建议通读一遍再让 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辅助生成（AIGC），仅供参考