尧图网站建设 
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 用的设计规则文件官方定位 High-Agency Frontend解决一个问题AI 生成的页面长得很像。Taste-Skill 集成在三个框架里流程一致React、Vue、Svelte 都适用三步走通。适合天天用 AI 写页面的前端。它解决什么问题不给规则时AI 产出的页面基本都是这个样子Hero 永远是「居中大标题 左右两个按钮」翻十个页面间距长得一样配色清一色紫蓝渐变动效清一色淡入弹跳单看能过放在一起分不清是哪个产品Taste-Skill 的做法是把一套硬性规则塞进上下文字体、配色数量、布局结构、动效强度全在前面定死。AI 交出来的就不再是页面是有风格的页面。快速上手三步集成全程三条命令框架无关只有依赖不同。第一步拿仓库git clone https://gitcode.com/gh_mirrors/ta/taste-skill第二步把核心技能文件拷进项目规则就落在src里cp -r taste-skill/skills/taste-skill/* src/第三步按你的框架装动画依赖命令见下节对照表。装完把规则喂给 AI 即可开工。核心规则在仓库的skills/taste-skill/SKILL.md动前先读一遍能省掉大量返工。三框架适配差异对照框架脚手架命令依赖安装适配要点Reactnpx create-react-app my-taste-skill-projectnpm install framer-motion默认用 RSC连续动画别用useState改useMotionValueuseTransformVuenpm create vuelatest my-taste-skill-vue-projectnpm install framer-motion-vue phosphor-icons/vue组合式 API 的响应式状态接管动画组件层手动做记忆化Sveltenpm create sveltelatest my-taste-skill-svelte-projectnpm install framer-motion svelte-framer-motion动画值直接写成响应式变量用生命周期函数管动画脚手架之后cd进目录、npm install装项目依赖再装表里的库。React 还有两条额外约定动态列表包进AnimatePresence列表进出动效按 60fps 调常驻或无限循环的动画React.memo记忆化后单独隔离到 Client Component具体组件不用跨框架搬代码。拿磁悬浮按钮举例三个框架逻辑完全一样mousemove算出光标偏移写进translatemouseleave归零。用本框架的习惯写法实现就行。三个设计参数怎么调输出风格由三个参数控制调档就行DESIGN_VARIANCE调高布局打破对称偏艺术化混沌调低严格对称稳MOTION_INTENSITY调高出现电影级连续动态调低接近静态基本不动VISUAL_DENSITY调高信息密集的驾驶舱模式调低艺术画廊式留白常规产品页用默认值。作品集或品牌站把 VARIANCE 拉高、DENSITY 压低。设计红线清单踩一条算一条验收时直接对着过标题统一text-4xl md:text-6xl tracking-tighter leading-none弃用 Inter换 Geist、Outfit、Cabinet Grotesk 或 Satoshi正文统一text-base text-gray-600 leading-relaxed max-w-[65ch]强调色最多 1 种饱和度压到 80% 以下紫蓝AI 味渐变禁用走中性底 单一高对比强调色整个项目色温保持一致别在暖灰和冷灰之间来回摆LAYOUT_VARIANCE 大于 4 时居中 Hero / H1 直接出局布局三选一分屏 50/50、左文右图、不对称留白优先 CSS Gridflexbox 百分比计算能不用就不用性能避坑只列不要做什么每条都是高频坑不要在滚动容器上加 grain / noise 滤镜不要动画transform、opacity之外的属性不要随手拔高 z-index留给粘性导航、模态框、覆盖层高方差布局在小屏必须退化成单列这几条进了上下文AI 写出来的页面就不会再有那种模板味。参考资料Taste-Skill 核心规则skills/taste-skill/SKILL.md软技能实现skills/soft-skill/SKILL.md极简主义技能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 写的前端不像模板，三步跑通 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 用的设计规则文件官方定位 High-Agency Frontend解决一个问题AI 生成的页面长得很像。Taste-Skill 集成在三个框架里流程一致React、Vue、Svelte 都适用三步走通。适合天天用 AI 写页面的前端。它解决什么问题不给规则时AI 产出的页面基本都是这个样子Hero 永远是「居中大标题 左右两个按钮」翻十个页面间距长得一样配色清一色紫蓝渐变动效清一色淡入弹跳单看能过放在一起分不清是哪个产品Taste-Skill 的做法是把一套硬性规则塞进上下文字体、配色数量、布局结构、动效强度全在前面定死。AI 交出来的就不再是页面是有风格的页面。快速上手三步集成全程三条命令框架无关只有依赖不同。第一步拿仓库git clone https://gitcode.com/gh_mirrors/ta/taste-skill第二步把核心技能文件拷进项目规则就落在src里cp -r taste-skill/skills/taste-skill/* src/第三步按你的框架装动画依赖命令见下节对照表。装完把规则喂给 AI 即可开工。核心规则在仓库的skills/taste-skill/SKILL.md动前先读一遍能省掉大量返工。三框架适配差异对照框架脚手架命令依赖安装适配要点Reactnpx create-react-app my-taste-skill-projectnpm install framer-motion默认用 RSC连续动画别用useState改useMotionValueuseTransformVuenpm create vuelatest my-taste-skill-vue-projectnpm install framer-motion-vue phosphor-icons/vue组合式 API 的响应式状态接管动画组件层手动做记忆化Sveltenpm create sveltelatest my-taste-skill-svelte-projectnpm install framer-motion svelte-framer-motion动画值直接写成响应式变量用生命周期函数管动画脚手架之后cd进目录、npm install装项目依赖再装表里的库。React 还有两条额外约定动态列表包进AnimatePresence列表进出动效按 60fps 调常驻或无限循环的动画React.memo记忆化后单独隔离到 Client Component具体组件不用跨框架搬代码。拿磁悬浮按钮举例三个框架逻辑完全一样mousemove算出光标偏移写进translatemouseleave归零。用本框架的习惯写法实现就行。三个设计参数怎么调输出风格由三个参数控制调档就行DESIGN_VARIANCE调高布局打破对称偏艺术化混沌调低严格对称稳MOTION_INTENSITY调高出现电影级连续动态调低接近静态基本不动VISUAL_DENSITY调高信息密集的驾驶舱模式调低艺术画廊式留白常规产品页用默认值。作品集或品牌站把 VARIANCE 拉高、DENSITY 压低。设计红线清单踩一条算一条验收时直接对着过标题统一text-4xl md:text-6xl tracking-tighter leading-none弃用 Inter换 Geist、Outfit、Cabinet Grotesk 或 Satoshi正文统一text-base text-gray-600 leading-relaxed max-w-[65ch]强调色最多 1 种饱和度压到 80% 以下紫蓝AI 味渐变禁用走中性底 单一高对比强调色整个项目色温保持一致别在暖灰和冷灰之间来回摆LAYOUT_VARIANCE 大于 4 时居中 Hero / H1 直接出局布局三选一分屏 50/50、左文右图、不对称留白优先 CSS Gridflexbox 百分比计算能不用就不用性能避坑只列不要做什么每条都是高频坑不要在滚动容器上加 grain / noise 滤镜不要动画transform、opacity之外的属性不要随手拔高 z-index留给粘性导航、模态框、覆盖层高方差布局在小屏必须退化成单列这几条进了上下文AI 写出来的页面就不会再有那种模板味。参考资料Taste-Skill 核心规则skills/taste-skill/SKILL.md软技能实现skills/soft-skill/SKILL.md极简主义技能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），仅供参考