Taste Skill1 个技能文件怎么让 AI 写的前端不再一股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 给你写个落地页回来永远是同一套紫蓝渐变、居中主标题、三张等宽卡片、暖米色品牌色。问题不在代码差在 AI 根本没读懂需求。Taste Skill 是往编码智能体里塞设计判断的技能文件合集目标是让 AI 前端下生产线。速览AI 前端去模板化到底能帮你做什么能力解决的痛点反模板生成规则不再每次都是 AI 紫渐变加三张等宽卡片多种风格变体极简 / 粗野 / 高端柔和按项目挑技能而不是一套模板打天下图像到代码工作流先生成参考图、定好视觉再写代码顺序反过来了老站点重做模式先审计现有界面再动手不顺手毁掉品牌和 SEO整个仓库就是一堆可移植的指令文件每个文件只干一件事默认技能管通用的落地页和作品集极简、粗野、高端柔和各有独立变体还有专门做图像生成和图生代码的两组。它不绑定框架React、Vue 或纯 HTML 都能用。上手三步跑通一个能交互的页面第 1 步安装。选默认技能现在是 v2 重写版一条命令CLI 会把指令文件装进你的智能体npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend第 2 步最小配置。不用写任何配置文件技能自带三个旋钮布局实验度、动效量、信息密度默认值都合理第一版别动。想改的话直接在对话里说一句话比如再不对称一点、动效少一点智能体会照做并贯穿整页。第 3 步看到页面。把一段一句话简报粘给 Cursor、Codex 或 Claude Code写得越具体越好用 taste-skill 做一个精品咖啡订阅品牌的落地页 风格极简目标用户是 25-35 岁城市上班族主 CTA 是立即订阅。智能体会先吐出一行设计判断这是什么页面、给谁看、倾向什么风格然后才开始写代码。本地跑起来第一个可交互页面就有了想对比新旧版本行为差异看 CHANGELOG.md。它凭什么有效不是有品味是有规则技能文件上千行真正起作用的杠杆就两个地方。机制一先读懂场子再写代码做了什么生成任何代码之前智能体必须先输出一行设计判断页面类型SaaS 落地页、作品集还是老站重做、受众B2B 采购还是设计敏感型消费者、风格倾向、用什么地基。简报含糊时它只允许问一个澄清问题不许一次抛一堆。为什么大部分 AI 味不是写出来的是跳出来的。模型的肌肉记忆是落地页 紫渐变 三卡片没人拦它它就直奔默认美学。实际效果输出的风格方向变得可解释、可复现不再是每次掷骰子。你不同意指着那一行说改成 Linear 那种冷静感就行不用整页重讲。机制二一份把 AI 味特征点名的黑名单做了什么技能里写了一长串AI 痕迹AI 紫渐变、高端消费品牌默认的暖米色 黄铜色、默认 Inter 字体、三张等宽卡片、John Doe式占位人名连大模型爱用的大破折号—都在列。每一条都带禁令或正当使用路径比如品牌本来就是紫色就照用但整套色板必须统一。为什么对大模型说请有品位拦不住它的默认习惯只有明确的禁止清单加自检才管用。实际效果交付前有一轮预检按这张清单逐项过任何一条不过页面就不算完成打回重写。这是用它生成的一个花艺品牌站非对称构图、深色底加真实摄影没有紫渐变没有三张等宽卡片。前面那些规则不是摆设是在输出里一条条兑现的。怎么配不同人配法不一样独立开发者装默认技能全部用默认值把时间花在写清简报上而不是抠旋钮。遇到智能体输出截断、满屏注释敷衍的情况加一个 output-skill强制它交完整代码。企业团队项目落在微软、谷歌、IBM 生态里就让技能去装官方的 Fluent、Material、Carbon 组件包别手写近似 CSS。老站翻新走红做技能先审计再动手URL 结构和表单字段名不动免得 SEO 和埋点一起遭殃。设计转前端把流程反过来。先用图像生成技能产出一组网页参考图视觉在图上定稿再交给图生代码技能落地。审图和写码变成两步不再靠嘴上争论。全部技能清单和各变体规则都在 skills/ 目录里拿不准就从默认的装。发布前自己过一遍这 5 条技能内置了预检清单完整版本在技能文件里下面五条值得你亲手核对响应式多栏布局在 768px 以下都显式折回单列首屏用min-h-[100dvh]而不是h-screen避免手机浏览器地址条引起页面跳动。可访问性按钮和表单文字对比度过 WCAG AA4.5:1只要有滚动驱动动画就必须支持prefers-reduced-motion降级成静态。性能动画只动transform和opacity不碰top、width这类布局属性跑一次 LighthouseLCP 低于 2.5 秒、CLS 低于 0.1。主题一致整页只有一个主题浅色或深色不许中段突然反转强调色全页锁定一个。AI 味扫描没有 AI 紫、没有米色加黄铜、没有三张等宽卡片、没有装饰性大破折号看到一条打回重做。一句话总结Taste Skill 本质是一份品味检查单它不替你写代码它逼着 AI 在写代码之前先读简报、避坑、自检。如果你也受够了 AI 前端的 AI 味去仓库读一读 README.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：1 个技能文件，怎么让 AI 写的前端不再一股“AI 味“
Taste Skill1 个技能文件怎么让 AI 写的前端不再一股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 给你写个落地页回来永远是同一套紫蓝渐变、居中主标题、三张等宽卡片、暖米色品牌色。问题不在代码差在 AI 根本没读懂需求。Taste Skill 是往编码智能体里塞设计判断的技能文件合集目标是让 AI 前端下生产线。速览AI 前端去模板化到底能帮你做什么能力解决的痛点反模板生成规则不再每次都是 AI 紫渐变加三张等宽卡片多种风格变体极简 / 粗野 / 高端柔和按项目挑技能而不是一套模板打天下图像到代码工作流先生成参考图、定好视觉再写代码顺序反过来了老站点重做模式先审计现有界面再动手不顺手毁掉品牌和 SEO整个仓库就是一堆可移植的指令文件每个文件只干一件事默认技能管通用的落地页和作品集极简、粗野、高端柔和各有独立变体还有专门做图像生成和图生代码的两组。它不绑定框架React、Vue 或纯 HTML 都能用。上手三步跑通一个能交互的页面第 1 步安装。选默认技能现在是 v2 重写版一条命令CLI 会把指令文件装进你的智能体npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend第 2 步最小配置。不用写任何配置文件技能自带三个旋钮布局实验度、动效量、信息密度默认值都合理第一版别动。想改的话直接在对话里说一句话比如再不对称一点、动效少一点智能体会照做并贯穿整页。第 3 步看到页面。把一段一句话简报粘给 Cursor、Codex 或 Claude Code写得越具体越好用 taste-skill 做一个精品咖啡订阅品牌的落地页 风格极简目标用户是 25-35 岁城市上班族主 CTA 是立即订阅。智能体会先吐出一行设计判断这是什么页面、给谁看、倾向什么风格然后才开始写代码。本地跑起来第一个可交互页面就有了想对比新旧版本行为差异看 CHANGELOG.md。它凭什么有效不是有品味是有规则技能文件上千行真正起作用的杠杆就两个地方。机制一先读懂场子再写代码做了什么生成任何代码之前智能体必须先输出一行设计判断页面类型SaaS 落地页、作品集还是老站重做、受众B2B 采购还是设计敏感型消费者、风格倾向、用什么地基。简报含糊时它只允许问一个澄清问题不许一次抛一堆。为什么大部分 AI 味不是写出来的是跳出来的。模型的肌肉记忆是落地页 紫渐变 三卡片没人拦它它就直奔默认美学。实际效果输出的风格方向变得可解释、可复现不再是每次掷骰子。你不同意指着那一行说改成 Linear 那种冷静感就行不用整页重讲。机制二一份把 AI 味特征点名的黑名单做了什么技能里写了一长串AI 痕迹AI 紫渐变、高端消费品牌默认的暖米色 黄铜色、默认 Inter 字体、三张等宽卡片、John Doe式占位人名连大模型爱用的大破折号—都在列。每一条都带禁令或正当使用路径比如品牌本来就是紫色就照用但整套色板必须统一。为什么对大模型说请有品位拦不住它的默认习惯只有明确的禁止清单加自检才管用。实际效果交付前有一轮预检按这张清单逐项过任何一条不过页面就不算完成打回重写。这是用它生成的一个花艺品牌站非对称构图、深色底加真实摄影没有紫渐变没有三张等宽卡片。前面那些规则不是摆设是在输出里一条条兑现的。怎么配不同人配法不一样独立开发者装默认技能全部用默认值把时间花在写清简报上而不是抠旋钮。遇到智能体输出截断、满屏注释敷衍的情况加一个 output-skill强制它交完整代码。企业团队项目落在微软、谷歌、IBM 生态里就让技能去装官方的 Fluent、Material、Carbon 组件包别手写近似 CSS。老站翻新走红做技能先审计再动手URL 结构和表单字段名不动免得 SEO 和埋点一起遭殃。设计转前端把流程反过来。先用图像生成技能产出一组网页参考图视觉在图上定稿再交给图生代码技能落地。审图和写码变成两步不再靠嘴上争论。全部技能清单和各变体规则都在 skills/ 目录里拿不准就从默认的装。发布前自己过一遍这 5 条技能内置了预检清单完整版本在技能文件里下面五条值得你亲手核对响应式多栏布局在 768px 以下都显式折回单列首屏用min-h-[100dvh]而不是h-screen避免手机浏览器地址条引起页面跳动。可访问性按钮和表单文字对比度过 WCAG AA4.5:1只要有滚动驱动动画就必须支持prefers-reduced-motion降级成静态。性能动画只动transform和opacity不碰top、width这类布局属性跑一次 LighthouseLCP 低于 2.5 秒、CLS 低于 0.1。主题一致整页只有一个主题浅色或深色不许中段突然反转强调色全页锁定一个。AI 味扫描没有 AI 紫、没有米色加黄铜、没有三张等宽卡片、没有装饰性大破折号看到一条打回重做。一句话总结Taste Skill 本质是一份品味检查单它不替你写代码它逼着 AI 在写代码之前先读简报、避坑、自检。如果你也受够了 AI 前端的 AI 味去仓库读一读 README.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），仅供参考