Taste-Skill3 个旋钮让 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 是另一条路——它把一套设计纪律装进 AI 编码代理用可携带的技能文件约束布局、排版、动效和间距让产出的前端页面不再一眼模板。一分钟看懂Taste-Skill 是什么它本质上是一组 Agent Skills技能文件安装之后编码代理会自动加载里面的设计规则不需要你逐条叮嘱。仓库里分两类技能——一类输出代码一类只出设计图后者通常配合 ChatGPT Images 等图像模型先画稿再交给 Codex、Cursor 或 Claude Code 实现。适合两类人想从零做落地页、作品集却总拿到模板脸的新手以及想给老项目做一次 UI 升级、但不想推倒重来的开发者。⚡ 三步装好 Taste-Skill第一条命令把仓库拉到本地第二条让npx skills add扫描仓库里的skills/目录把全部技能装进你的代理环境git clone https://gitcode.com/GitHub_Trending/ta/taste-skill npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill只想装某一个技能时用--skill指定它的安装名注意是 SKILL.md 里的 name 字段不是文件夹名比如只装移动端图像生成npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill imagegen-frontend-mobile不想走 CLI 也行把任意一个 SKILL.md 复制进项目或直接粘贴进 ChatGPT / Codex 的对话一样能用。另外从旧版升级很简单——重跑一遍安装命令安装名没变新的 SKILL.md 会就地替换旧文件。技能库速查按需取用不必全装每个技能只干一件事用到哪个装哪个。下面按产出代码和只出设计图分两组技能名对应仓库中的文件夹。产出代码的实现技能技能适用场景一句话说明taste-skill落地页、作品集、改版默认全能项v2 重写版先读懂需求再推断设计语言然后调好三个旋钮gpt-tasteskill主力用 GPT / Codex 的人更严格的变体布局变化更大、动效方向更明确、反模板更激进image-to-code-skill已有设计图要落成代码图像优先先出参考图再分析最后实现前端redesign-skill老项目 UI 翻新先做 UI 审计再动手修布局、间距、层次与样式soft-skill想要安静、贵气的高级感柔对比、大留白、精致字体、弹簧式动效minimalist-skillNotion / Linear 风产品界面克制的配色与利落结构去装饰化brutalist-skill工业感、实验性视觉瑞士排版、硬对比、不规则布局output-skill代理总爱交半成品强制完整输出禁止占位注释只出图的图像生成技能技能适用场景一句话说明imagegen-frontend-web网站设计图英雄区、落地页、多区块每个区块单独出一张横版图重排版与间距imagegen-frontend-mobileiOS / Android / 跨平台应用界面可读的文字、成套连贯的设计稿brandkit品牌视觉板logo 方向、色板、字体与身份应用的整套板 三个旋钮调出高级感taste-skill 的 SKILL.md 顶部有三个 1–10 的数字像调音台一样控制整页气质。文件里给了 8 / 6 / 4 的默认基线你也可以直接在对话里报数值覆盖不用改文件。DESIGN_VARIANCE布局实验度典型值 8。页面会主动偏离居中对称用不对称留白和错落结构调低则回到规整网格。MOTION_INTENSITY动效深度典型值 6。以约 0.3 秒的过渡和滚动触发的显示为主动的是位移与透明度调低则只保留悬停反馈。VISUAL_DENSITY视觉密度典型值 4。标准 Web 应用的呼吸感调高后变成小内边距、细线分隔、数字全走等宽字体的驾驶舱界面。还有个省事的设计需求本身会替你拧旋钮。brief 听起来像极简、安静三个值会整体压低像Awwwards 风、实验性则整体抬高不报数也能拿到合理方向。 实战组合两条推荐流水线流水线 A新站从设计图到代码用 imagegen-frontend-web 让图像模型按区块生成设计图一个区块一张横版图。把图交给编码代理装 image-to-code-skill让它先分析参考图再实现前端。用三个旋钮微调最终页面的气质。流水线 B老项目 UI 审计改造装 redesign-skill让代理先输出 UI 审计结论不急着改。按审计逐项修布局、间距、层次、样式。若代理中途交半成品补装 output-skill 强制完整输出。小提醒走图像流水线时可以在提示里明说先出图、再分析、再写代码代理会更稳地按顺序执行。快问快答支持 React、Vue、Svelte 吗支持。规则针对的是设计意图而不是绑定某个框架的 API换框架不需要换规则。SKILL.md 到底是什么一份可移植的指令文件代理安装后会自动加载也可以直接复制进仓库或粘贴进 ChatGPT / Codex 对话里用。图像生成技能要另外装吗不用。它们和代码技能同放在 skills/ 目录下同一条npx skills add命令就能全部发现。它和别的 AI 设计技能差在哪多个专业变体、关键技能里可调的旋钮以及有专门研究支撑的反重复规则——研究底稿就放在仓库的 research/ 目录里欢迎翻。说到底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辅助生成（AIGC），仅供参考 Taste-Skill：3 个旋钮，让 AI 写的前端告别模板脸
Taste-Skill3 个旋钮让 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 是另一条路——它把一套设计纪律装进 AI 编码代理用可携带的技能文件约束布局、排版、动效和间距让产出的前端页面不再一眼模板。一分钟看懂Taste-Skill 是什么它本质上是一组 Agent Skills技能文件安装之后编码代理会自动加载里面的设计规则不需要你逐条叮嘱。仓库里分两类技能——一类输出代码一类只出设计图后者通常配合 ChatGPT Images 等图像模型先画稿再交给 Codex、Cursor 或 Claude Code 实现。适合两类人想从零做落地页、作品集却总拿到模板脸的新手以及想给老项目做一次 UI 升级、但不想推倒重来的开发者。⚡ 三步装好 Taste-Skill第一条命令把仓库拉到本地第二条让npx skills add扫描仓库里的skills/目录把全部技能装进你的代理环境git clone https://gitcode.com/GitHub_Trending/ta/taste-skill npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill只想装某一个技能时用--skill指定它的安装名注意是 SKILL.md 里的 name 字段不是文件夹名比如只装移动端图像生成npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill imagegen-frontend-mobile不想走 CLI 也行把任意一个 SKILL.md 复制进项目或直接粘贴进 ChatGPT / Codex 的对话一样能用。另外从旧版升级很简单——重跑一遍安装命令安装名没变新的 SKILL.md 会就地替换旧文件。技能库速查按需取用不必全装每个技能只干一件事用到哪个装哪个。下面按产出代码和只出设计图分两组技能名对应仓库中的文件夹。产出代码的实现技能技能适用场景一句话说明taste-skill落地页、作品集、改版默认全能项v2 重写版先读懂需求再推断设计语言然后调好三个旋钮gpt-tasteskill主力用 GPT / Codex 的人更严格的变体布局变化更大、动效方向更明确、反模板更激进image-to-code-skill已有设计图要落成代码图像优先先出参考图再分析最后实现前端redesign-skill老项目 UI 翻新先做 UI 审计再动手修布局、间距、层次与样式soft-skill想要安静、贵气的高级感柔对比、大留白、精致字体、弹簧式动效minimalist-skillNotion / Linear 风产品界面克制的配色与利落结构去装饰化brutalist-skill工业感、实验性视觉瑞士排版、硬对比、不规则布局output-skill代理总爱交半成品强制完整输出禁止占位注释只出图的图像生成技能技能适用场景一句话说明imagegen-frontend-web网站设计图英雄区、落地页、多区块每个区块单独出一张横版图重排版与间距imagegen-frontend-mobileiOS / Android / 跨平台应用界面可读的文字、成套连贯的设计稿brandkit品牌视觉板logo 方向、色板、字体与身份应用的整套板 三个旋钮调出高级感taste-skill 的 SKILL.md 顶部有三个 1–10 的数字像调音台一样控制整页气质。文件里给了 8 / 6 / 4 的默认基线你也可以直接在对话里报数值覆盖不用改文件。DESIGN_VARIANCE布局实验度典型值 8。页面会主动偏离居中对称用不对称留白和错落结构调低则回到规整网格。MOTION_INTENSITY动效深度典型值 6。以约 0.3 秒的过渡和滚动触发的显示为主动的是位移与透明度调低则只保留悬停反馈。VISUAL_DENSITY视觉密度典型值 4。标准 Web 应用的呼吸感调高后变成小内边距、细线分隔、数字全走等宽字体的驾驶舱界面。还有个省事的设计需求本身会替你拧旋钮。brief 听起来像极简、安静三个值会整体压低像Awwwards 风、实验性则整体抬高不报数也能拿到合理方向。 实战组合两条推荐流水线流水线 A新站从设计图到代码用 imagegen-frontend-web 让图像模型按区块生成设计图一个区块一张横版图。把图交给编码代理装 image-to-code-skill让它先分析参考图再实现前端。用三个旋钮微调最终页面的气质。流水线 B老项目 UI 审计改造装 redesign-skill让代理先输出 UI 审计结论不急着改。按审计逐项修布局、间距、层次、样式。若代理中途交半成品补装 output-skill 强制完整输出。小提醒走图像流水线时可以在提示里明说先出图、再分析、再写代码代理会更稳地按顺序执行。快问快答支持 React、Vue、Svelte 吗支持。规则针对的是设计意图而不是绑定某个框架的 API换框架不需要换规则。SKILL.md 到底是什么一份可移植的指令文件代理安装后会自动加载也可以直接复制进仓库或粘贴进 ChatGPT / Codex 对话里用。图像生成技能要另外装吗不用。它们和代码技能同放在 skills/ 目录下同一条npx skills add命令就能全部发现。它和别的 AI 设计技能差在哪多个专业变体、关键技能里可调的旋钮以及有专门研究支撑的反重复规则——研究底稿就放在仓库的 research/ 目录里欢迎翻。说到底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辅助生成（AIGC），仅供参考