让 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-skill让模型写一个落地页你大概率会得到居中主标题、三张一模一样的卡片、紫蓝渐变按钮加上生硬到卡顿的悬停动画。改三遍提示词长相都一样。Taste-Skill 是一组针对 AI 前端界面设计的 Agent Skills它不写一行代码而是把“什么叫好看”的标准落成规则喂给模型。装上之后布局、动效、配色、排版和性能表现会整体脱离模板感。 两条命令装好先看效果不用先看懂全部规则再动手直接装git clone https://gitcode.com/gh_mirrors/ta/taste-skill npx skills add https://gitcode.com/gh_mirrors/ta/taste-skill第二条命令一次装齐全部技能如果只要移动端出图技能加上--skill imagegen-frontend-mobile。还有条更轻的路径把任意一个 SKILL.md 复制进项目或原样粘进 ChatGPT / Codex 的对话里效果相同一行命令都不用敲。它管住了哪五个维度生成前后的观感差异技能生效与否可以逐条对照来看。布局以前几乎必然是居中加左右对称装完之后会出现分屏、左文右图、不对称留白页面第一次有了“方向感”。动效以前所有交互都是同一种淡入现在动效带物理感且只走硬件加速的属性滚动时不再掉帧。色彩以前紫蓝渐变铺天盖地现在整页至多一种强调色饱和度压在 80% 以下颜色不再抢内容。排版以前标题和正文用同一款通用字体现在两者有明确的字体规范正文扫一眼就能分出层级。性能以前会混入拖慢页面的动画现在规则里带着 DOM 与性能的硬约束复杂界面也保得住流畅。四类任务四个技能选法skills/ 目录下技能不少但你不需要全装按手头任务挑从零建页面用 taste-skill。它是通用默认项输出不绑定单一视觉风格。如果你在 GPT/Codex 上跑、结果还是模板味换严格变体 gpt-taste——布局变化更大、反模板化更激进。手里已有参考图用 image-to-code-skill。流程是先出图、再分析、最后写代码适合“心里已经有样子”的情况。想救活旧项目用 redesign-skill。它先审计现有 UI再修布局、间距和层次不用推倒重来。只要设计稿不要代码用 imagegen-frontend-web站点方向英雄区、着陆页、多区块和 imagegen-frontend-mobileiOS/Android 屏幕流类型可读、整套设计连贯。产物是图满意后再交给编码代理去实现。️ 三个参数调出版面松紧与信息密度taste-skill 文件顶部有三个 1-10 的旋钮各分三档互不干扰DESIGN_VARIANCE布局变化度。拨到 2得到的是规整对称网格、居中主标题、均等内边距适合管理后台这类要求稳定的界面拨到 9会出现瀑布流和大面积留白左对齐标题配居中数据接近设计师作品集的排法。MOTION_INTENSITY动效强度。2 档时页面基本静止只有悬停和激活反馈9 档时滚动触发的入场和视差开始出现动效从“装饰”变成叙事的一部分。VISUAL_DENSITY视觉密度。2 档是画廊式区块间距巨大一页上元素很少走高端留白感9 档是驾驶舱式小内边距、没有卡片框、只用 1px 线条分隔数据数字全部等宽字体。三个旋钮可以独立组合比如布局放松、数据却排得很密取决于你的场景。快速答疑Vue、Svelte 能用吗可以。规则描述的是设计意图而不是某个框架的 API产出的代码放进任何主流框架都能用。SKILL.md 到底是什么一个可移植的指令文件代理可以自动加载。用 npx 装、拷进仓库、或贴进对话三者的地位相同。图像技能怎么安装同一条npx skills add命令。它们和代码技能一起放在 skills/ 目录下同一个 CLI 就能发现。从这一步开始下次让 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），仅供参考 让 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-skill让模型写一个落地页你大概率会得到居中主标题、三张一模一样的卡片、紫蓝渐变按钮加上生硬到卡顿的悬停动画。改三遍提示词长相都一样。Taste-Skill 是一组针对 AI 前端界面设计的 Agent Skills它不写一行代码而是把“什么叫好看”的标准落成规则喂给模型。装上之后布局、动效、配色、排版和性能表现会整体脱离模板感。 两条命令装好先看效果不用先看懂全部规则再动手直接装git clone https://gitcode.com/gh_mirrors/ta/taste-skill npx skills add https://gitcode.com/gh_mirrors/ta/taste-skill第二条命令一次装齐全部技能如果只要移动端出图技能加上--skill imagegen-frontend-mobile。还有条更轻的路径把任意一个 SKILL.md 复制进项目或原样粘进 ChatGPT / Codex 的对话里效果相同一行命令都不用敲。它管住了哪五个维度生成前后的观感差异技能生效与否可以逐条对照来看。布局以前几乎必然是居中加左右对称装完之后会出现分屏、左文右图、不对称留白页面第一次有了“方向感”。动效以前所有交互都是同一种淡入现在动效带物理感且只走硬件加速的属性滚动时不再掉帧。色彩以前紫蓝渐变铺天盖地现在整页至多一种强调色饱和度压在 80% 以下颜色不再抢内容。排版以前标题和正文用同一款通用字体现在两者有明确的字体规范正文扫一眼就能分出层级。性能以前会混入拖慢页面的动画现在规则里带着 DOM 与性能的硬约束复杂界面也保得住流畅。四类任务四个技能选法skills/ 目录下技能不少但你不需要全装按手头任务挑从零建页面用 taste-skill。它是通用默认项输出不绑定单一视觉风格。如果你在 GPT/Codex 上跑、结果还是模板味换严格变体 gpt-taste——布局变化更大、反模板化更激进。手里已有参考图用 image-to-code-skill。流程是先出图、再分析、最后写代码适合“心里已经有样子”的情况。想救活旧项目用 redesign-skill。它先审计现有 UI再修布局、间距和层次不用推倒重来。只要设计稿不要代码用 imagegen-frontend-web站点方向英雄区、着陆页、多区块和 imagegen-frontend-mobileiOS/Android 屏幕流类型可读、整套设计连贯。产物是图满意后再交给编码代理去实现。️ 三个参数调出版面松紧与信息密度taste-skill 文件顶部有三个 1-10 的旋钮各分三档互不干扰DESIGN_VARIANCE布局变化度。拨到 2得到的是规整对称网格、居中主标题、均等内边距适合管理后台这类要求稳定的界面拨到 9会出现瀑布流和大面积留白左对齐标题配居中数据接近设计师作品集的排法。MOTION_INTENSITY动效强度。2 档时页面基本静止只有悬停和激活反馈9 档时滚动触发的入场和视差开始出现动效从“装饰”变成叙事的一部分。VISUAL_DENSITY视觉密度。2 档是画廊式区块间距巨大一页上元素很少走高端留白感9 档是驾驶舱式小内边距、没有卡片框、只用 1px 线条分隔数据数字全部等宽字体。三个旋钮可以独立组合比如布局放松、数据却排得很密取决于你的场景。快速答疑Vue、Svelte 能用吗可以。规则描述的是设计意图而不是某个框架的 API产出的代码放进任何主流框架都能用。SKILL.md 到底是什么一个可移植的指令文件代理可以自动加载。用 npx 装、拷进仓库、或贴进对话三者的地位相同。图像技能怎么安装同一条npx skills add命令。它们和代码技能一起放在 skills/ 目录下同一个 CLI 就能发现。从这一步开始下次让 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），仅供参考