如何让 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-skillAI 写的落地页越看越像居中大标题、紫色渐变、三张一样的功能卡片、Inter 字体。taste-skill 把反模板变成一组可安装的 AI 前端技能让编码代理在布局、字体、动效上避开这些默认审美交付更像人工设计过的页面。一句话定位taste-skill 给 AI 编码代理装上一套设计规则让 AI 写出来的 UI 不再千篇一律参数还能按项目微调。五分钟装好 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 的对话里效果一样。确认装好的方法很简单让 agent 跑个小页面看输出是不是按技能里的规则来比如主动给出非居中的 Hero 结构或者检查项目里是否出现了安装下来的 SKILL.md 文件。按场景选技能仓库里有十几个技能但绝大多数任务落到四五种里技能文件夹安装名什么时候用skills/taste-skill/design-taste-frontend从零做落地页、作品集默认选它skills/redesign-skill/redesign-existing-projects已有站点想修复布局和层级skills/imagegen-frontend-web/imagegen-frontend-web只要设计稿图片不要代码skills/output-skill/full-output-enforcement代理老是在一半处截断输出判断逻辑就三条新页面选默认的已有项目选 redesign交付物是设计稿图片时选 imagegen 系列。还有个容易踩的细节--skill后面要填的是 SKILL.md 文件头部的name:字段不是文件夹名表里已经替你列好了。三个参数改变风格装完之后你真正会碰到的只有顶部三个 1-10 的旋钮都写在 skills/taste-skill/SKILL.md 开头DESIGN_VARIANCE默认 8。调高布局更不对称、留白更大胆调低回到居中、对称的稳妥版式。MOTION_INTENSITY默认 6。调高出现滚动触发、磁性按钮这类动效调低只保留 hover 状态。VISUAL_DENSITY默认 4。调高每个视口塞更多数据接近仪表盘调低接近画廊式的大留白。一般不用去改文件。这个技能的流程是agent 先读你的需求推断设计方向再给出这三个值你直接在对话里说动效压到 3、密度拉满就行覆盖默认值。看一个真实产出再记三个坑上面那张图是技能生成的一个花艺工作室落地页Hero 左文右图不对称、真实摄影而非渐变色块、深色主题配单一强调色。这就是规则生效后的典型长相。交付前最容易栽进三个坑用useState做连续动画。磁性按钮、滚动进度这类每帧变化的值一旦进 React 状态就会疯狂重渲染手机上直接卡死。要换成 Motion 的useMotionValue和useTransform让数值在渲染周期之外流动。噪点滤镜加错地方。颗粒纹理只该放在固定定位、pointer-events-none的伪元素上挂在滚动容器上会触发持续的 GPU 重绘移动端帧率崩掉。字体用 Inter 兜底。Inter 是模板感的重灾区默认应换成 Geist、Outfit、Cabinet Grotesk 这类选择衬线字体更别随手拿来做高级感。另外动效只动画transform和opacity别去动top、width这类布局属性否则吃不到硬件加速。高频问题React 之外能用吗能。规则针对的是设计意图不是某个框架的 APIReact、Vue、Svelte 都适用具体写法由你的 agent 负责翻译。SKILL.md 到底是什么一份可移植的指令文件。装好之后 agent 会自动加载不装也可以复制进仓库或直接粘贴到对话里使用。参数必须手动改吗不用。agent 会先从需求推断设计方向再定旋钮你在对话里口头覆盖就行文件里的只是默认值。交付前过一遍清单装好、选对技能、调完旋钮剩下就是别让默认审美溜回来强调色是否全页一致、居中的 Hero 有没有改不对称、按钮文字能否一行放下、深浅色模式是否都看过。想要完整版直接翻 skills/taste-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），仅供参考 如何让 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-skillAI 写的落地页越看越像居中大标题、紫色渐变、三张一样的功能卡片、Inter 字体。taste-skill 把反模板变成一组可安装的 AI 前端技能让编码代理在布局、字体、动效上避开这些默认审美交付更像人工设计过的页面。一句话定位taste-skill 给 AI 编码代理装上一套设计规则让 AI 写出来的 UI 不再千篇一律参数还能按项目微调。五分钟装好 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 的对话里效果一样。确认装好的方法很简单让 agent 跑个小页面看输出是不是按技能里的规则来比如主动给出非居中的 Hero 结构或者检查项目里是否出现了安装下来的 SKILL.md 文件。按场景选技能仓库里有十几个技能但绝大多数任务落到四五种里技能文件夹安装名什么时候用skills/taste-skill/design-taste-frontend从零做落地页、作品集默认选它skills/redesign-skill/redesign-existing-projects已有站点想修复布局和层级skills/imagegen-frontend-web/imagegen-frontend-web只要设计稿图片不要代码skills/output-skill/full-output-enforcement代理老是在一半处截断输出判断逻辑就三条新页面选默认的已有项目选 redesign交付物是设计稿图片时选 imagegen 系列。还有个容易踩的细节--skill后面要填的是 SKILL.md 文件头部的name:字段不是文件夹名表里已经替你列好了。三个参数改变风格装完之后你真正会碰到的只有顶部三个 1-10 的旋钮都写在 skills/taste-skill/SKILL.md 开头DESIGN_VARIANCE默认 8。调高布局更不对称、留白更大胆调低回到居中、对称的稳妥版式。MOTION_INTENSITY默认 6。调高出现滚动触发、磁性按钮这类动效调低只保留 hover 状态。VISUAL_DENSITY默认 4。调高每个视口塞更多数据接近仪表盘调低接近画廊式的大留白。一般不用去改文件。这个技能的流程是agent 先读你的需求推断设计方向再给出这三个值你直接在对话里说动效压到 3、密度拉满就行覆盖默认值。看一个真实产出再记三个坑上面那张图是技能生成的一个花艺工作室落地页Hero 左文右图不对称、真实摄影而非渐变色块、深色主题配单一强调色。这就是规则生效后的典型长相。交付前最容易栽进三个坑用useState做连续动画。磁性按钮、滚动进度这类每帧变化的值一旦进 React 状态就会疯狂重渲染手机上直接卡死。要换成 Motion 的useMotionValue和useTransform让数值在渲染周期之外流动。噪点滤镜加错地方。颗粒纹理只该放在固定定位、pointer-events-none的伪元素上挂在滚动容器上会触发持续的 GPU 重绘移动端帧率崩掉。字体用 Inter 兜底。Inter 是模板感的重灾区默认应换成 Geist、Outfit、Cabinet Grotesk 这类选择衬线字体更别随手拿来做高级感。另外动效只动画transform和opacity别去动top、width这类布局属性否则吃不到硬件加速。高频问题React 之外能用吗能。规则针对的是设计意图不是某个框架的 APIReact、Vue、Svelte 都适用具体写法由你的 agent 负责翻译。SKILL.md 到底是什么一份可移植的指令文件。装好之后 agent 会自动加载不装也可以复制进仓库或直接粘贴到对话里使用。参数必须手动改吗不用。agent 会先从需求推断设计方向再定旋钮你在对话里口头覆盖就行文件里的只是默认值。交付前过一遍清单装好、选对技能、调完旋钮剩下就是别让默认审美溜回来强调色是否全页一致、居中的 Hero 有没有改不对称、按钮文字能否一行放下、深浅色模式是否都看过。想要完整版直接翻 skills/taste-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），仅供参考