3个滑块控制设计感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-skillTaste-Skill 是一套给 AI 编码代理用的 Agent Skills它自己不写代码而是把一套设计规则交给 AI让它生成出来的页面不再长着一张居中大标题 三张卡片 紫渐变的脸。如果你用过 ChatGPT、Codex 或 Cursor 写过落地页大概率遇到过这种情况十次里有十次是居中 hero、三张等宽功能卡、紫蓝渐变连字体都是 Inter。模型不是懒是偏爱安全默认值。Taste-Skill 解决的就是这件事——它要求 AI 在下第一行 CSS 之前先读懂现场再动手调参写代码。装 Taste-Skill一条命令的事整个项目的核心是一批 SKILL.md 文件。SKILL.md 是可移植的指令文件装好之后编码代理会自动加载# 一次性安装全部技能 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill # 只装一个安装名取自 SKILL 前置元信息里的 name 字段 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend不想装也可以把任意一份 SKILL.md 直接复制进 ChatGPT 或 Codex 的对话里同样有效。规则针对的是设计意图而不是某个框架 API所以 React、Vue、Svelte 都能用。写代码前AI 先输出一句理解这是它和直接生成最大的不同。Taste-Skill 拿到需求后会先读六类信号页面类型落地页 / 作品集 / 改版、你用的情绪词极简Linear 风实验性、贴出的参考截图或竞品名、目标受众、已有的品牌资产以及那些静默约束无障碍、受监管行业。然后它会在生成代码前给出一行Design Read比如读作面向技术买家的 B2B SaaS 落地页走 Linear 式极简语言倾向 Tailwind 克制的动效。说清楚这一句才允许动手。需求真模糊时它只问一个澄清问题绝不一次性丢五个问题过来。三个滑块你真正能上手的地方理解完成后有三个 1 到 10 的数字决定后面所有输出。这是开发者体感最直接的部分滑块管什么1–10 的范围DESIGN_VARIANCE布局创造性对称网格到编辑式非对称1 完美对称 → 10 艺术化混乱MOTION_INTENSITY动效深度仅悬停到滚动触发、物理效果1 静态 → 10 电影感VISUAL_DENSITY每屏信息量画廊留白到驾驶舱密度1 大量留白 → 10 密集仪表盘基线是 8 / 6 / 4略微不对称的布局 中等动效 标准密度适合大多数落地页。你不用去改技能文件在对话里说一句要更安静一点动效降到 3AI 会按你的话覆盖。DESIGN_VARIANCE: 8 MOTION_INTENSITY: 6 VISUAL_DENSITY: 4别全装按用途挑每个技能只管一件事官方的建议也是按需安装taste-skill默认落地页、作品集、通用场景最稳的默认选项redesign-skill面向已有项目先审计 UI再修布局、间距和层级gpt-tasteskill更强的布局变化度和 GSAP 动效要求偏 GPT/Codex 工作流image-to-code-skill先生成参考图 → 分析 → 再写代码适合图转码流程soft-skill / minimalist-skill / brutalist-skill视觉方向已定时使用分别对应高端柔和、Notion/Linear 式简洁、工业粗野imagegen-frontend-web / imagegen-frontend-mobile / brandkit只出设计稿网页、移动端、品牌套件不写代码交给编码 AI 去实现它的禁令比教学部分更值钱 很多人只注意到教但反平庸清单才是真正起效的地方不许 AI 紫渐变、不许三张等宽卡片、不许全页面玻璃拟态、不许默认 Inter slate-900需求如果是企业 SaaS、政务站点、Shopify 应用直接上官方组件包Fluent、Carbon、GOV.UK、Polaris 等不要手抄 CSS也不允许一个项目混用两套设计系统改版必须先审计再动手品牌资产是起点材料不是可选输入生成文案里的 em-dash——都被禁用了。这条有点好笑但能看出作者是被 AI 生成页面伤过的人反模板的效果到底长什么样这是仓库里的 Flora 示例深色底、右侧锚定的植物大图、左对齐标题、留白和宽高比都刻意不居中。整页没有居中 hero 三张卡片的影子——这正是 Taste-Skill 想要避开的默认脸。几个高频问题和其他设计类技能的区别多个特化变体、可调的三个滑块、基于专门研究的反重复规则且不绑定框架。图像类技能也用 npx skills add 安装吗是的和代码技能放在同一个 skills/ 目录同一条命令就能发现。AI 输出总被截断、留占位注释怎么办加一个output-skill它强制代理输出完整代码禁止 placeholder 注释。一句话收尾它不是约束你的框架而是递给 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辅助生成（AIGC），仅供参考 3个滑块控制设计感：Taste-Skill让AI生成前端不再像模板
3个滑块控制设计感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-skillTaste-Skill 是一套给 AI 编码代理用的 Agent Skills它自己不写代码而是把一套设计规则交给 AI让它生成出来的页面不再长着一张居中大标题 三张卡片 紫渐变的脸。如果你用过 ChatGPT、Codex 或 Cursor 写过落地页大概率遇到过这种情况十次里有十次是居中 hero、三张等宽功能卡、紫蓝渐变连字体都是 Inter。模型不是懒是偏爱安全默认值。Taste-Skill 解决的就是这件事——它要求 AI 在下第一行 CSS 之前先读懂现场再动手调参写代码。装 Taste-Skill一条命令的事整个项目的核心是一批 SKILL.md 文件。SKILL.md 是可移植的指令文件装好之后编码代理会自动加载# 一次性安装全部技能 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill # 只装一个安装名取自 SKILL 前置元信息里的 name 字段 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend不想装也可以把任意一份 SKILL.md 直接复制进 ChatGPT 或 Codex 的对话里同样有效。规则针对的是设计意图而不是某个框架 API所以 React、Vue、Svelte 都能用。写代码前AI 先输出一句理解这是它和直接生成最大的不同。Taste-Skill 拿到需求后会先读六类信号页面类型落地页 / 作品集 / 改版、你用的情绪词极简Linear 风实验性、贴出的参考截图或竞品名、目标受众、已有的品牌资产以及那些静默约束无障碍、受监管行业。然后它会在生成代码前给出一行Design Read比如读作面向技术买家的 B2B SaaS 落地页走 Linear 式极简语言倾向 Tailwind 克制的动效。说清楚这一句才允许动手。需求真模糊时它只问一个澄清问题绝不一次性丢五个问题过来。三个滑块你真正能上手的地方理解完成后有三个 1 到 10 的数字决定后面所有输出。这是开发者体感最直接的部分滑块管什么1–10 的范围DESIGN_VARIANCE布局创造性对称网格到编辑式非对称1 完美对称 → 10 艺术化混乱MOTION_INTENSITY动效深度仅悬停到滚动触发、物理效果1 静态 → 10 电影感VISUAL_DENSITY每屏信息量画廊留白到驾驶舱密度1 大量留白 → 10 密集仪表盘基线是 8 / 6 / 4略微不对称的布局 中等动效 标准密度适合大多数落地页。你不用去改技能文件在对话里说一句要更安静一点动效降到 3AI 会按你的话覆盖。DESIGN_VARIANCE: 8 MOTION_INTENSITY: 6 VISUAL_DENSITY: 4别全装按用途挑每个技能只管一件事官方的建议也是按需安装taste-skill默认落地页、作品集、通用场景最稳的默认选项redesign-skill面向已有项目先审计 UI再修布局、间距和层级gpt-tasteskill更强的布局变化度和 GSAP 动效要求偏 GPT/Codex 工作流image-to-code-skill先生成参考图 → 分析 → 再写代码适合图转码流程soft-skill / minimalist-skill / brutalist-skill视觉方向已定时使用分别对应高端柔和、Notion/Linear 式简洁、工业粗野imagegen-frontend-web / imagegen-frontend-mobile / brandkit只出设计稿网页、移动端、品牌套件不写代码交给编码 AI 去实现它的禁令比教学部分更值钱 很多人只注意到教但反平庸清单才是真正起效的地方不许 AI 紫渐变、不许三张等宽卡片、不许全页面玻璃拟态、不许默认 Inter slate-900需求如果是企业 SaaS、政务站点、Shopify 应用直接上官方组件包Fluent、Carbon、GOV.UK、Polaris 等不要手抄 CSS也不允许一个项目混用两套设计系统改版必须先审计再动手品牌资产是起点材料不是可选输入生成文案里的 em-dash——都被禁用了。这条有点好笑但能看出作者是被 AI 生成页面伤过的人反模板的效果到底长什么样这是仓库里的 Flora 示例深色底、右侧锚定的植物大图、左对齐标题、留白和宽高比都刻意不居中。整页没有居中 hero 三张卡片的影子——这正是 Taste-Skill 想要避开的默认脸。几个高频问题和其他设计类技能的区别多个特化变体、可调的三个滑块、基于专门研究的反重复规则且不绑定框架。图像类技能也用 npx skills add 安装吗是的和代码技能放在同一个 skills/ 目录同一条命令就能发现。AI 输出总被截断、留占位注释怎么办加一个output-skill它强制代理输出完整代码禁止 placeholder 注释。一句话收尾它不是约束你的框架而是递给 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辅助生成（AIGC），仅供参考