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-skill让 AI 写一个落地页产出经常是同一套东西居中大标题、三张等宽卡片、紫蓝渐变。Taste-Skill 是冲着这个问题做的一组 Agent Skills本质是一份份 SKILL.md 指令文件可被 Codex、Cursor、Claude 等编码代理自动加载在 AI 写代码之前先约束布局、排版、动效和配色让界面不再像模板。如果你经常用 AI 做前端页面这套技能可以直接装上用。 克隆装好一条命令启用git clone https://gitcode.com/gh_mirrors/ta/taste-skill npx skills add https://gitcode.com/gh_mirrors/ta/taste-skill npx skills add https://gitcode.com/gh_mirrors/ta/taste-skill --skill imagegen-frontend-mobilenpx skills add会扫描仓库里的 skills/ 目录代码技能和图像生成技能走同一条命令。第二条装全部第三条只装单个技能用--skill加安装名注意是 SKILL.md 头部的 name 字段不是文件夹名。默认技能 taste-skill 的安装名是design-taste-frontend。不想装 CLI 的话直接把某个 SKILL.md 复制进项目或粘贴到 ChatGPT / Codex 对话里效果一样。三个真正拉开差距的能力1. 先读需求再动手写码v2 默认技能要求代理写码前先做一步设计解读从页面类型、目标受众、你用的形容词minimalist、Linear-style、Awwwards里推断设计语言输出一行结论比如按 B2B SaaS 落地页、Linear 式极简语言来做。这一步解决的是模型不读需求就套默认美学的老毛病。模糊时它只允许追问一个问题不允许一次抛一串疑问。2. 写死在文件里的反模板规则规则全是带数字的硬约束不是建议强调色最多 1 个默认饱和度低于 80%且一旦选定就锁死全页AI 紫蓝渐变文件里叫 LILA RULE明确禁用动效默认走 0.3s 过渡、cubic-bezier(0.16, 1, 0.3, 1)缓动只动 transform 和 opacity禁止window.addEventListener(scroll)滚动动效必须走 CSSanimation-timeline或 GSAP。3. 改版走审计流程不推倒重来redesign 类技能对现有项目的做法是先审计当前 UI 的布局、间距、层次和色彩列出问题再逐项修复而不是直接重写整页。已有品牌的颜色、字体、logo 是起点不是可选项。️ 三个旋钮的取值对照表taste-skill 用三个 1-10 的旋钮控制产出默认 8 / 6 / 4改值直接在对话里说即可不用手改文件参数1-34-78-10DESIGN_VARIANCE12 列对称网格、等内边距、居中对齐负 margin 制造重叠、4:3 与 16:9 图宽高比混排、左对齐标题压居中的数据瀑布流、2fr 1fr 1fr分栏、大留白区域MOTION_INTENSITY无自动动画只有 hover / active0.3s 过渡、级联 animation-delay滚动触发显现、视差、GSAP ScrollTriggerVISUAL_DENSITY画廊式大留白区块间距 py-32 到 py-48常规 Web 应用间距无卡片框、1px 线分隔数据、数字强制等宽字体补充一条VARIANCE 在 4-10 档时768px 以下视口的不对称布局必须折叠成单列不会把移动端搞乱。技能内部还附带了按需求推旋钮的映射表比如trust-first 公共服务对应 3 / 2 / 5代理自己会查。 真实项目里怎么搭新落地页 / 作品集装默认 taste-skill先用一句话定调再让它生成。追求更严的版式纪律和 GSAP 动效方向换装gpt-taste。先出图再写码用 imagegen-frontend-web 或 imagegen-frontend-mobile 生成参考图交给编码代理实现image-to-code 则把生图 → 分析 → 写码串成一个完整流程。旧项目改版用redesign-existing-projects审计后修复视觉方向已定时再叠 soft / minimalist / brutalist 三选一。❓ 快问快答只支持某个框架吗不支持也不限。规则针对设计意图而非框架 APIReact、Vue、Svelte 都能用。SKILL.md 到底是什么一份可移植的指令文件。代理能自动加载装法有两种npx skills add或手动复制进仓库、贴进对话。v2 和 v1 差在哪v2 是重写版增加需求解读、设计系统映射表比如识别出GitHub 风格就用官方 Primer、改版审计协议和交付前自查清单。依赖 v1 精确行为的装design-taste-frontend-v1即可安装名没变重跑命令就是原地升级。图像技能也是 npx 安装吗是。它们和代码技能同在 skills/ 目录下同一个 CLI 全部能发现。适合谁不适合谁如果你的交付物是营销页、作品集、品牌站和现有页面改版这套技能值得装它明确不覆盖数据密集型仪表盘、复杂多步产品 UI 和后台管理界面——做这类界面时直接用成熟的设计系统组件库比调品味更靠谱。【免费下载链接】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-skill让 AI 写一个落地页产出经常是同一套东西居中大标题、三张等宽卡片、紫蓝渐变。Taste-Skill 是冲着这个问题做的一组 Agent Skills本质是一份份 SKILL.md 指令文件可被 Codex、Cursor、Claude 等编码代理自动加载在 AI 写代码之前先约束布局、排版、动效和配色让界面不再像模板。如果你经常用 AI 做前端页面这套技能可以直接装上用。 克隆装好一条命令启用git clone https://gitcode.com/gh_mirrors/ta/taste-skill npx skills add https://gitcode.com/gh_mirrors/ta/taste-skill npx skills add https://gitcode.com/gh_mirrors/ta/taste-skill --skill imagegen-frontend-mobilenpx skills add会扫描仓库里的 skills/ 目录代码技能和图像生成技能走同一条命令。第二条装全部第三条只装单个技能用--skill加安装名注意是 SKILL.md 头部的 name 字段不是文件夹名。默认技能 taste-skill 的安装名是design-taste-frontend。不想装 CLI 的话直接把某个 SKILL.md 复制进项目或粘贴到 ChatGPT / Codex 对话里效果一样。三个真正拉开差距的能力1. 先读需求再动手写码v2 默认技能要求代理写码前先做一步设计解读从页面类型、目标受众、你用的形容词minimalist、Linear-style、Awwwards里推断设计语言输出一行结论比如按 B2B SaaS 落地页、Linear 式极简语言来做。这一步解决的是模型不读需求就套默认美学的老毛病。模糊时它只允许追问一个问题不允许一次抛一串疑问。2. 写死在文件里的反模板规则规则全是带数字的硬约束不是建议强调色最多 1 个默认饱和度低于 80%且一旦选定就锁死全页AI 紫蓝渐变文件里叫 LILA RULE明确禁用动效默认走 0.3s 过渡、cubic-bezier(0.16, 1, 0.3, 1)缓动只动 transform 和 opacity禁止window.addEventListener(scroll)滚动动效必须走 CSSanimation-timeline或 GSAP。3. 改版走审计流程不推倒重来redesign 类技能对现有项目的做法是先审计当前 UI 的布局、间距、层次和色彩列出问题再逐项修复而不是直接重写整页。已有品牌的颜色、字体、logo 是起点不是可选项。️ 三个旋钮的取值对照表taste-skill 用三个 1-10 的旋钮控制产出默认 8 / 6 / 4改值直接在对话里说即可不用手改文件参数1-34-78-10DESIGN_VARIANCE12 列对称网格、等内边距、居中对齐负 margin 制造重叠、4:3 与 16:9 图宽高比混排、左对齐标题压居中的数据瀑布流、2fr 1fr 1fr分栏、大留白区域MOTION_INTENSITY无自动动画只有 hover / active0.3s 过渡、级联 animation-delay滚动触发显现、视差、GSAP ScrollTriggerVISUAL_DENSITY画廊式大留白区块间距 py-32 到 py-48常规 Web 应用间距无卡片框、1px 线分隔数据、数字强制等宽字体补充一条VARIANCE 在 4-10 档时768px 以下视口的不对称布局必须折叠成单列不会把移动端搞乱。技能内部还附带了按需求推旋钮的映射表比如trust-first 公共服务对应 3 / 2 / 5代理自己会查。 真实项目里怎么搭新落地页 / 作品集装默认 taste-skill先用一句话定调再让它生成。追求更严的版式纪律和 GSAP 动效方向换装gpt-taste。先出图再写码用 imagegen-frontend-web 或 imagegen-frontend-mobile 生成参考图交给编码代理实现image-to-code 则把生图 → 分析 → 写码串成一个完整流程。旧项目改版用redesign-existing-projects审计后修复视觉方向已定时再叠 soft / minimalist / brutalist 三选一。❓ 快问快答只支持某个框架吗不支持也不限。规则针对设计意图而非框架 APIReact、Vue、Svelte 都能用。SKILL.md 到底是什么一份可移植的指令文件。代理能自动加载装法有两种npx skills add或手动复制进仓库、贴进对话。v2 和 v1 差在哪v2 是重写版增加需求解读、设计系统映射表比如识别出GitHub 风格就用官方 Primer、改版审计协议和交付前自查清单。依赖 v1 精确行为的装design-taste-frontend-v1即可安装名没变重跑命令就是原地升级。图像技能也是 npx 安装吗是。它们和代码技能同在 skills/ 目录下同一个 CLI 全部能发现。适合谁不适合谁如果你的交付物是营销页、作品集、品牌站和现有页面改版这套技能值得装它明确不覆盖数据密集型仪表盘、复杂多步产品 UI 和后台管理界面——做这类界面时直接用成熟的设计系统组件库比调品味更靠谱。【免费下载链接】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），仅供参考