三大框架 × 三步接入用 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-skillAI 生成的界面长得都太像了深色网格背景、居中大标题、三张等宽卡片、紫蓝渐变按钮——模板感强到分不清是哪个模型出的。Taste-Skill 是一套给 AI 界面注入设计品味的规则 模式库接入 React、Vue、Svelte 等前端框架后它会把布局、排版、配色、动画都约束到有品味的方向让 AI 不再交作业式的通用 UI。这篇文章按实战顺序走先三步统一流程跑通再看每个框架的适配要点最后给出参数速查表和三条硬规则。它不是一个 npm 包而是一份给 AI 读的规格文档SKILL.md。你的项目不需要改架构改的是AI 怎么理解你的项目。 三步快速上手三个框架的流程完全一致建项目 → 引入 Taste-Skill 规则 → 加载参数调风格。git clone https://gitcode.com/gh_mirrors/ta/taste-skill cp taste-skill/skills/taste-skill/SKILL.md your-project/建项目Vite、create-react-app、npm create vue、npm create svelte任何脚手架都行与 Taste-Skill 无耦合。引入规则把SKILL.md拷进项目再随每次 AI 对话附上或放进 Cursor / Codex 的规则目录AI 就会按规格生成代码。加载参数在SKILL.md顶部声明三个旋钮数值决定整体风格走向改数字即可切换气质不用重写规则。三种框架三种接法规则是通用的落地差异集中在状态、动画、样式隔离三件事上。下面每节先列适配要点再给同一段磁悬浮按钮逻辑的框架惯用写法。React 适配要点RSC 优先Server Components 渲染静态布局动效组件必须是独立的use client叶子节点连续动画禁用useState鼠标位置、指针物理这类每帧都变的数据必须走 Framer Motion 的useMotionValue/useTransform让值活在渲染循环之外用 state 存的话每帧整树重渲染移动端直接卡死动态列表包进AnimatePresence进出场动画才能跑满 60fps无限循环动画用React.memo记忆化并隔离在独立 Client Component避免它拖垮周边静态内容use client; import { memo } from react; import { motion, useMotionValue, useTransform } from framer-motion; const MagneticButton memo(({ children }) { const x useMotionValue(0); const y useMotionValue(0); const transform useTransform( [x, y], ([vx, vy]) translate(${vx}px, ${vy}px) ); const onMove (e) { const r e.currentTarget.getBoundingClientRect(); x.set(((e.clientX - r.left) / r.width - 0.5) * 10); y.set(((e.clientY - r.top) / r.height - 0.5) * 10); }; return ( motion.button style{{ transform }} classNamepx-6 py-3 bg-emerald-600 text-white rounded-lg onMouseMove{onMove} onMouseLeave{() { x.set(0); y.set(0); }} {children} /motion.button ); }); export default MagneticButton;Vue 适配要点组合式 API 对标 hooksref/reactive承接动画状态逻辑写在script setup里和 React hooks 一一对应响应式系统天然管理状态transform字符串随x/y自动更新模板不需要手动同步 DOM组件级记忆化SFC 本身就是编译后的独立组件配合shallowRef可避免高频数值触发深层响应式开销动画库不是必须项——低强度动效用 ref CSS transition 就够见下方 Vue 动画组件写法template button classpx-6 py-3 bg-emerald-600 text-white rounded-lg shadow-lg transition-transform duration-150 ease-out :style{ transform: translate(${x}px, ${y}px) } mousemoveonMove mouseleavereset slot / /button /template script setup import { ref } from vue const x ref(0) const y ref(0) const onMove (e) { const r e.currentTarget.getBoundingClientRect() x.value ((e.clientX - r.left) / r.width - 0.5) * 10 y.value ((e.clientY - r.top) / r.height - 0.5) * 10 } const reset () { x.value 0; y.value 0 } /scriptSvelte 适配要点编译时优化没有虚拟 DOM diff高频状态更新直接编译成精准 DOM 赋值磁悬浮这类每帧动效天生更轻响应式声明简化状态普通let变量就是响应式的不需要 ref / state 包装生命周期函数管理动画onMount里挂事件、onDestroy里清理避免泄漏CSS 作用域隔离样式style里的规则自动只作用于当前组件不需要 CSS Modules 或 BEM 约定这是 Svelte 样式隔离最省事的地方script let x 0; let y 0; const onMove (e) { const r e.currentTarget.getBoundingClientRect(); x ((e.clientX - r.left) / r.width - 0.5) * 10; y ((e.clientY - r.top) / r.height - 0.5) * 10; }; const reset () { x 0; y 0; }; /script button classpx-6 py-3 bg-emerald-600 text-white rounded-lg shadow-lg transition-transform duration-150 ease-out styletransform: translate({x}px, {y}px) on:mousemove{onMove} on:mouseleave{reset} slot / /button style /* 只作用于本组件天然隔离 */ button:active { transform: scale(0.98); } /style️ 参数速查表参数含义适用场景DESIGN_VARIANCE布局多样性1 完全对称 → 10 艺术化混沌数值 4 时禁用居中 Hero强制分屏 / 左文右图 / 不对称留白MOTION_INTENSITY动画强度1 静态 → 10 电影级物理1–3 只留 hover 态 5 才上磁悬浮、打字机等持续微交互VISUAL_DENSITY视觉密度1 画廊式留白 → 10 驾驶舱式数据密集产品落地页常取 3–5数据看板可拉到 8 以上禁用通用卡片容器调参建议从中间值起步然后让结果说话。官方规则里有条很狠的自检——Motion claimed, motion shown写了MOTION_INTENSITY: 7页面就必须真的在动做不出来就把旋钮调低交付干净的静态页永远不要交一个动了一半的动画。✅ 界面质量的三条硬规则排版✅ 大标题text-4xl md:text-6xl tracking-tighter leading-none收紧字距才有展示感✅ 正文text-base text-gray-600 leading-relaxed max-w-[65ch]行宽锁在 65 个字符✅ 字体选 Geist、Outfit、Cabinet Grotesk、Satoshi❌ 默认 Inter——它是 LLM 的安全选项只在用户明确要求时才用配色✅ 全站至多 1 个强调色饱和度压到 80% 以下选完就上锁用到最后一页❌ AI 紫蓝光晕美学、随机霓虹渐变这是识别 AI 页面的第一信号❌ 暖灰站点中途冒出一颗蓝色 CTA、页脚又混进青色徽章——冷暖基调全项目统一布局✅DESIGN_VARIANCE 4时上分屏50/50、左对齐内容 右侧资产、不对称留白✅ 复杂多栏优先 CSS Grid少写 flexbox 百分比算式❌ 居中 Hero / H1❌ 三张等宽 feature 卡片⚡ 性能与常见坑只对transform和opacity做动画这两项走 GPU 合成动top/width之类的布局属性必卡。grain / noise 滤镜别加在滚动容器上——持续重绘会毁掉移动端帧率只允许挂在fixed且pointer-events-none的伪元素上。z-index 只给系统层粘性导航、模态框、覆盖层。不要随手撒z-50把层级标尺写进项目常量文件。移动端强制回退高方差布局在 768px必须塌成严格单列w-full px-4 py-8每个多栏组件里显式声明不能赌Tailwind 会处理的。MOTION_INTENSITY 3必须响应prefers-reduced-motion官方规则里标着 non-negotiable。别用window.addEventListener(scroll)手写滚动监听逐帧触发且不可批处理用useScroll、GSAP ScrollTrigger 或 IntersectionObserver 替代。小结Taste-Skill 的本质是把设计品味从玄学变成一份可执行的规格参数管方向硬规则管底线框架适配管落地。React、Vue、Svelte 的差异只是状态与动画的实现习惯规则本身一份通用。行动建议把你正在做的项目里那个最模板脸的落地页先拉DESIGN_VARIANCE到 6、MOTION_INTENSITY到 4让 AI 重生成一遍对比再决定要不要调参。参考资料核心规则skills/taste-skill/SKILL.md高端视觉soft变体skills/soft-skill/SKILL.md极简 UI 变体skills/minimalist-skill/SKILL.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），仅供参考 三大框架 × 三步接入：用 Taste-Skill 给 AI 界面做品味升级的完整指南
三大框架 × 三步接入用 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-skillAI 生成的界面长得都太像了深色网格背景、居中大标题、三张等宽卡片、紫蓝渐变按钮——模板感强到分不清是哪个模型出的。Taste-Skill 是一套给 AI 界面注入设计品味的规则 模式库接入 React、Vue、Svelte 等前端框架后它会把布局、排版、配色、动画都约束到有品味的方向让 AI 不再交作业式的通用 UI。这篇文章按实战顺序走先三步统一流程跑通再看每个框架的适配要点最后给出参数速查表和三条硬规则。它不是一个 npm 包而是一份给 AI 读的规格文档SKILL.md。你的项目不需要改架构改的是AI 怎么理解你的项目。 三步快速上手三个框架的流程完全一致建项目 → 引入 Taste-Skill 规则 → 加载参数调风格。git clone https://gitcode.com/gh_mirrors/ta/taste-skill cp taste-skill/skills/taste-skill/SKILL.md your-project/建项目Vite、create-react-app、npm create vue、npm create svelte任何脚手架都行与 Taste-Skill 无耦合。引入规则把SKILL.md拷进项目再随每次 AI 对话附上或放进 Cursor / Codex 的规则目录AI 就会按规格生成代码。加载参数在SKILL.md顶部声明三个旋钮数值决定整体风格走向改数字即可切换气质不用重写规则。三种框架三种接法规则是通用的落地差异集中在状态、动画、样式隔离三件事上。下面每节先列适配要点再给同一段磁悬浮按钮逻辑的框架惯用写法。React 适配要点RSC 优先Server Components 渲染静态布局动效组件必须是独立的use client叶子节点连续动画禁用useState鼠标位置、指针物理这类每帧都变的数据必须走 Framer Motion 的useMotionValue/useTransform让值活在渲染循环之外用 state 存的话每帧整树重渲染移动端直接卡死动态列表包进AnimatePresence进出场动画才能跑满 60fps无限循环动画用React.memo记忆化并隔离在独立 Client Component避免它拖垮周边静态内容use client; import { memo } from react; import { motion, useMotionValue, useTransform } from framer-motion; const MagneticButton memo(({ children }) { const x useMotionValue(0); const y useMotionValue(0); const transform useTransform( [x, y], ([vx, vy]) translate(${vx}px, ${vy}px) ); const onMove (e) { const r e.currentTarget.getBoundingClientRect(); x.set(((e.clientX - r.left) / r.width - 0.5) * 10); y.set(((e.clientY - r.top) / r.height - 0.5) * 10); }; return ( motion.button style{{ transform }} classNamepx-6 py-3 bg-emerald-600 text-white rounded-lg onMouseMove{onMove} onMouseLeave{() { x.set(0); y.set(0); }} {children} /motion.button ); }); export default MagneticButton;Vue 适配要点组合式 API 对标 hooksref/reactive承接动画状态逻辑写在script setup里和 React hooks 一一对应响应式系统天然管理状态transform字符串随x/y自动更新模板不需要手动同步 DOM组件级记忆化SFC 本身就是编译后的独立组件配合shallowRef可避免高频数值触发深层响应式开销动画库不是必须项——低强度动效用 ref CSS transition 就够见下方 Vue 动画组件写法template button classpx-6 py-3 bg-emerald-600 text-white rounded-lg shadow-lg transition-transform duration-150 ease-out :style{ transform: translate(${x}px, ${y}px) } mousemoveonMove mouseleavereset slot / /button /template script setup import { ref } from vue const x ref(0) const y ref(0) const onMove (e) { const r e.currentTarget.getBoundingClientRect() x.value ((e.clientX - r.left) / r.width - 0.5) * 10 y.value ((e.clientY - r.top) / r.height - 0.5) * 10 } const reset () { x.value 0; y.value 0 } /scriptSvelte 适配要点编译时优化没有虚拟 DOM diff高频状态更新直接编译成精准 DOM 赋值磁悬浮这类每帧动效天生更轻响应式声明简化状态普通let变量就是响应式的不需要 ref / state 包装生命周期函数管理动画onMount里挂事件、onDestroy里清理避免泄漏CSS 作用域隔离样式style里的规则自动只作用于当前组件不需要 CSS Modules 或 BEM 约定这是 Svelte 样式隔离最省事的地方script let x 0; let y 0; const onMove (e) { const r e.currentTarget.getBoundingClientRect(); x ((e.clientX - r.left) / r.width - 0.5) * 10; y ((e.clientY - r.top) / r.height - 0.5) * 10; }; const reset () { x 0; y 0; }; /script button classpx-6 py-3 bg-emerald-600 text-white rounded-lg shadow-lg transition-transform duration-150 ease-out styletransform: translate({x}px, {y}px) on:mousemove{onMove} on:mouseleave{reset} slot / /button style /* 只作用于本组件天然隔离 */ button:active { transform: scale(0.98); } /style️ 参数速查表参数含义适用场景DESIGN_VARIANCE布局多样性1 完全对称 → 10 艺术化混沌数值 4 时禁用居中 Hero强制分屏 / 左文右图 / 不对称留白MOTION_INTENSITY动画强度1 静态 → 10 电影级物理1–3 只留 hover 态 5 才上磁悬浮、打字机等持续微交互VISUAL_DENSITY视觉密度1 画廊式留白 → 10 驾驶舱式数据密集产品落地页常取 3–5数据看板可拉到 8 以上禁用通用卡片容器调参建议从中间值起步然后让结果说话。官方规则里有条很狠的自检——Motion claimed, motion shown写了MOTION_INTENSITY: 7页面就必须真的在动做不出来就把旋钮调低交付干净的静态页永远不要交一个动了一半的动画。✅ 界面质量的三条硬规则排版✅ 大标题text-4xl md:text-6xl tracking-tighter leading-none收紧字距才有展示感✅ 正文text-base text-gray-600 leading-relaxed max-w-[65ch]行宽锁在 65 个字符✅ 字体选 Geist、Outfit、Cabinet Grotesk、Satoshi❌ 默认 Inter——它是 LLM 的安全选项只在用户明确要求时才用配色✅ 全站至多 1 个强调色饱和度压到 80% 以下选完就上锁用到最后一页❌ AI 紫蓝光晕美学、随机霓虹渐变这是识别 AI 页面的第一信号❌ 暖灰站点中途冒出一颗蓝色 CTA、页脚又混进青色徽章——冷暖基调全项目统一布局✅DESIGN_VARIANCE 4时上分屏50/50、左对齐内容 右侧资产、不对称留白✅ 复杂多栏优先 CSS Grid少写 flexbox 百分比算式❌ 居中 Hero / H1❌ 三张等宽 feature 卡片⚡ 性能与常见坑只对transform和opacity做动画这两项走 GPU 合成动top/width之类的布局属性必卡。grain / noise 滤镜别加在滚动容器上——持续重绘会毁掉移动端帧率只允许挂在fixed且pointer-events-none的伪元素上。z-index 只给系统层粘性导航、模态框、覆盖层。不要随手撒z-50把层级标尺写进项目常量文件。移动端强制回退高方差布局在 768px必须塌成严格单列w-full px-4 py-8每个多栏组件里显式声明不能赌Tailwind 会处理的。MOTION_INTENSITY 3必须响应prefers-reduced-motion官方规则里标着 non-negotiable。别用window.addEventListener(scroll)手写滚动监听逐帧触发且不可批处理用useScroll、GSAP ScrollTrigger 或 IntersectionObserver 替代。小结Taste-Skill 的本质是把设计品味从玄学变成一份可执行的规格参数管方向硬规则管底线框架适配管落地。React、Vue、Svelte 的差异只是状态与动画的实现习惯规则本身一份通用。行动建议把你正在做的项目里那个最模板脸的落地页先拉DESIGN_VARIANCE到 6、MOTION_INTENSITY到 4让 AI 重生成一遍对比再决定要不要调参。参考资料核心规则skills/taste-skill/SKILL.md高端视觉soft变体skills/soft-skill/SKILL.md极简 UI 变体skills/minimalist-skill/SKILL.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），仅供参考