Taste-Skill 完整指南3 条安装命令与 3 个调节旋钮改善 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 编码代理如 Cursor、Claude Code、Codex 等能替你写代码的 AI 工具的 Agent Skills核心作用是把一套经过打磨的布局、排版、动效与间距规则交给模型让生成出来的页面摆脱千篇一律的模板感。它由十多个独立技能组成有的直接输出前端代码有的只产出设计参考图前者适合落地写码后者适合先出图再实现的流程。所有技能都以一份叫 SKILL.md 的纯文本文件为载体装进项目或贴进对话即可生效。SKILL.md 是什么一份可移植的设计规则文件它如何让代理长记性SKILL.md 是一个带元信息的 markdown 指令文件。代理在启动时会扫描并自动加载所在目录下的技能文件之后写代码时就按文件里的条款执行。你可以把它理解成一份写给模型的设计规范书不需要运行任何服务不需要改工程配置文件放哪、规则就跟着哪。除了走官方安装命令还有两条更轻的用法把任意一个 SKILL.md 复制到你项目的仓库里或整段粘贴进 ChatGPT / Codex 的对话窗口。对于只是临时想试某个风格的人来说后者成本最低。它实际约束了哪些东西从默认技能文件夹 skills/taste-skill/ 下的 SKILL.md的条款看约束集中在四处布局不再默认把一切居中堆叠支持分屏、内容左对齐配资产右置、不对称留白避免居中大标题 三张等宽卡片的公式化结构。色彩整页最多一种强调色饱和度压在 80% 以下紫渐变、通用玻璃拟态等高频套路被明确点名禁止。排版标题与正文有各自的字体与层级要求点名了过度通用的字体组合如 Inter 配深灰底要求有层次而非通篇一个字号感。动效动画必须走硬件加速只动 transform 和 opacity不触发重排避免生硬的 JS 位移和掉帧。安装三种方式把规则交给代理用 npx skills add 一键安装官方 CLI 会扫描仓库的 skills/ 目录代码技能和图像技能用同一条命令装git clone https://gitcode.com/GitHub_Trending/ta/taste-skill npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill imagegen-frontend-mobile第一行克隆仓库也方便你直接翻 SKILL.md 原文第二行安装全部技能第三行按技能名只装某一个。注意--skill后跟的是技能在文件头声明的 install name不一定等于文件夹名。复制粘贴最轻量的接入如果不想引入 CLI直接把目标技能的 SKILL.md 拷进仓库或粘到对话里。规则即刻生效适合快速验证风格是否合意。版本说明v2 默认v1 可固定默认技能已重写到 v2实验性新增需求解读、设计系统映射、重写前的审计流程和交付前自检。如果你依赖 v1 的旧行为可安装 install name 为design-taste-frontend-v1的 taste-skill-v1 固定版本v2 用户重跑一遍安装命令即可完成就地升级无需改脚本。十几个技能按场景选一个就够实现类技能输出代码技能适用场景taste-skill默认最稳的通用选择不绑定单一视觉风格gpt-tasteskillinstall name: gpt-taste给 GPT/Codex 用的更严格变体更高布局自由度、更强的 GSAP 动效导向image-to-code-skill图像优先流水线先生成网站参考图再分析再按图实现代码redesign-skill现有项目改造先审计现有 UI再修布局、间距、层级与样式soft-skill / minimalist-skill / brutalist-skill视觉方向已定时用高端柔和风、Notion/Linear 式克制风、工业粗野风output-skill专治代理输出偷懒截断、占位注释、半成品图像生成类技能只出图不写码imagegen-frontend-web网站设计图——英雄区、着陆页、多区块版式重点在排版与间距的艺术指导。imagegen-frontend-mobileiOS / Android / 跨平台的移动端屏幕与连续流程保证一整套界面的字体可读性和风格一致性。brandkit品牌套件板——logo 方向、色板、字体与品牌延展应用。这三者与代码技能同在 skills/ 目录下走同一条npx skills add命令即可被发现和安装。四个常见组合路径企业官网imagegen-frontend-web 出图 → image-to-code-skill 读图实现拿到既有设计感又能落地的站点。移动 Appimagegen-frontend-mobile 生成连贯的界面流交给编码代理逐屏实现。老项目救场redesign-skill 先做审计再动手不必推倒重来。品牌先行brandkit 定下 logo、色彩与字体再交给 taste-skill 统一落地保证产品视觉一致。三个调节旋钮参数怎么调默认技能文件顶部有三个 1–10 的数字旋钮所有布局、动效、密度决策都受它们约束。不改文件也能在对话里口头覆盖作者不希望你手动编辑文件。DESIGN_VARIANCE布局实验程度1–3对称可预测——Flexbox 居中、严格的 12 列对称网格、均等内边距。4–7开始偏移——元素用负边距如 -2rem叠压、图像宽高比刻意不统一、标题左对齐而数据居中。8–10不对称——瀑布流、CSS Grid 分数单位、大面积留白。MOTION_INTENSITY动效深度1–3静态——没有自动播放的动画只有 hover 和 active 状态。4–7流畅 CSS——约 0.3 秒的过渡、级联延迟入场只动 transform 与 opacity。8–10高级编排——滚动触发显现、视差、磁性跟随配合 Framer Motion 一类的钩子库。VISUAL_DENSITY单位视口的信息量1–3画廊模式——大块留白、超大区块间距高端克制。4–7常规 Web 应用的标准间距。8–10驾驶舱模式——小内边距、去卡片框、数据之间只用 1px 线条分隔、数字全部等宽字体。怎么选作者提供了场景对照表要极简 / Linear 风就把三项都往低拧约 5/3/2高端消费品取 7–8 / 5–7 / 3–4实验性作品集直接拉满 9–10 / 8–10 / 3–4政府或合规类站点则压低到 3 / 2 / 5 一带。经验上默认基线是 8 / 6 / 4多数营销型页面从这组值开始再微调即可。适用范围与常见疑问框架无关代理无关规则约束的是设计意图而不是某个框架的 API所以 React、Vue、Svelte 都能用技能本身也不绑定特定代理框架。它和常见AI 设计提示词的区别在于多个按场景拆分的专职变体、关键技能内置可调旋钮以及基于专门研究仓库 research/ 目录记录了模型偷懒、输出截断等问题的成因与对策沉淀出的反套路规则。两个实际会碰到的点模型老是输出半成品加装 output-skill强制完整输出、禁占位注释。图像技能算不算同一套安装体系算。代码技能与图像技能都在 skills/ 下同一个 CLI 全部可发现。项目采用 MIT 许可技能文件均可自行裁剪各技能的完整对照表见仓库内 skills/llms.txt。【免费下载链接】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 条安装命令与 3 个调节旋钮，改善 AI 生成的前端界面
Taste-Skill 完整指南3 条安装命令与 3 个调节旋钮改善 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 编码代理如 Cursor、Claude Code、Codex 等能替你写代码的 AI 工具的 Agent Skills核心作用是把一套经过打磨的布局、排版、动效与间距规则交给模型让生成出来的页面摆脱千篇一律的模板感。它由十多个独立技能组成有的直接输出前端代码有的只产出设计参考图前者适合落地写码后者适合先出图再实现的流程。所有技能都以一份叫 SKILL.md 的纯文本文件为载体装进项目或贴进对话即可生效。SKILL.md 是什么一份可移植的设计规则文件它如何让代理长记性SKILL.md 是一个带元信息的 markdown 指令文件。代理在启动时会扫描并自动加载所在目录下的技能文件之后写代码时就按文件里的条款执行。你可以把它理解成一份写给模型的设计规范书不需要运行任何服务不需要改工程配置文件放哪、规则就跟着哪。除了走官方安装命令还有两条更轻的用法把任意一个 SKILL.md 复制到你项目的仓库里或整段粘贴进 ChatGPT / Codex 的对话窗口。对于只是临时想试某个风格的人来说后者成本最低。它实际约束了哪些东西从默认技能文件夹 skills/taste-skill/ 下的 SKILL.md的条款看约束集中在四处布局不再默认把一切居中堆叠支持分屏、内容左对齐配资产右置、不对称留白避免居中大标题 三张等宽卡片的公式化结构。色彩整页最多一种强调色饱和度压在 80% 以下紫渐变、通用玻璃拟态等高频套路被明确点名禁止。排版标题与正文有各自的字体与层级要求点名了过度通用的字体组合如 Inter 配深灰底要求有层次而非通篇一个字号感。动效动画必须走硬件加速只动 transform 和 opacity不触发重排避免生硬的 JS 位移和掉帧。安装三种方式把规则交给代理用 npx skills add 一键安装官方 CLI 会扫描仓库的 skills/ 目录代码技能和图像技能用同一条命令装git clone https://gitcode.com/GitHub_Trending/ta/taste-skill npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill imagegen-frontend-mobile第一行克隆仓库也方便你直接翻 SKILL.md 原文第二行安装全部技能第三行按技能名只装某一个。注意--skill后跟的是技能在文件头声明的 install name不一定等于文件夹名。复制粘贴最轻量的接入如果不想引入 CLI直接把目标技能的 SKILL.md 拷进仓库或粘到对话里。规则即刻生效适合快速验证风格是否合意。版本说明v2 默认v1 可固定默认技能已重写到 v2实验性新增需求解读、设计系统映射、重写前的审计流程和交付前自检。如果你依赖 v1 的旧行为可安装 install name 为design-taste-frontend-v1的 taste-skill-v1 固定版本v2 用户重跑一遍安装命令即可完成就地升级无需改脚本。十几个技能按场景选一个就够实现类技能输出代码技能适用场景taste-skill默认最稳的通用选择不绑定单一视觉风格gpt-tasteskillinstall name: gpt-taste给 GPT/Codex 用的更严格变体更高布局自由度、更强的 GSAP 动效导向image-to-code-skill图像优先流水线先生成网站参考图再分析再按图实现代码redesign-skill现有项目改造先审计现有 UI再修布局、间距、层级与样式soft-skill / minimalist-skill / brutalist-skill视觉方向已定时用高端柔和风、Notion/Linear 式克制风、工业粗野风output-skill专治代理输出偷懒截断、占位注释、半成品图像生成类技能只出图不写码imagegen-frontend-web网站设计图——英雄区、着陆页、多区块版式重点在排版与间距的艺术指导。imagegen-frontend-mobileiOS / Android / 跨平台的移动端屏幕与连续流程保证一整套界面的字体可读性和风格一致性。brandkit品牌套件板——logo 方向、色板、字体与品牌延展应用。这三者与代码技能同在 skills/ 目录下走同一条npx skills add命令即可被发现和安装。四个常见组合路径企业官网imagegen-frontend-web 出图 → image-to-code-skill 读图实现拿到既有设计感又能落地的站点。移动 Appimagegen-frontend-mobile 生成连贯的界面流交给编码代理逐屏实现。老项目救场redesign-skill 先做审计再动手不必推倒重来。品牌先行brandkit 定下 logo、色彩与字体再交给 taste-skill 统一落地保证产品视觉一致。三个调节旋钮参数怎么调默认技能文件顶部有三个 1–10 的数字旋钮所有布局、动效、密度决策都受它们约束。不改文件也能在对话里口头覆盖作者不希望你手动编辑文件。DESIGN_VARIANCE布局实验程度1–3对称可预测——Flexbox 居中、严格的 12 列对称网格、均等内边距。4–7开始偏移——元素用负边距如 -2rem叠压、图像宽高比刻意不统一、标题左对齐而数据居中。8–10不对称——瀑布流、CSS Grid 分数单位、大面积留白。MOTION_INTENSITY动效深度1–3静态——没有自动播放的动画只有 hover 和 active 状态。4–7流畅 CSS——约 0.3 秒的过渡、级联延迟入场只动 transform 与 opacity。8–10高级编排——滚动触发显现、视差、磁性跟随配合 Framer Motion 一类的钩子库。VISUAL_DENSITY单位视口的信息量1–3画廊模式——大块留白、超大区块间距高端克制。4–7常规 Web 应用的标准间距。8–10驾驶舱模式——小内边距、去卡片框、数据之间只用 1px 线条分隔、数字全部等宽字体。怎么选作者提供了场景对照表要极简 / Linear 风就把三项都往低拧约 5/3/2高端消费品取 7–8 / 5–7 / 3–4实验性作品集直接拉满 9–10 / 8–10 / 3–4政府或合规类站点则压低到 3 / 2 / 5 一带。经验上默认基线是 8 / 6 / 4多数营销型页面从这组值开始再微调即可。适用范围与常见疑问框架无关代理无关规则约束的是设计意图而不是某个框架的 API所以 React、Vue、Svelte 都能用技能本身也不绑定特定代理框架。它和常见AI 设计提示词的区别在于多个按场景拆分的专职变体、关键技能内置可调旋钮以及基于专门研究仓库 research/ 目录记录了模型偷懒、输出截断等问题的成因与对策沉淀出的反套路规则。两个实际会碰到的点模型老是输出半成品加装 output-skill强制完整输出、禁占位注释。图像技能算不算同一套安装体系算。代码技能与图像技能都在 skills/ 下同一个 CLI 全部可发现。项目采用 MIT 许可技能文件均可自行裁剪各技能的完整对照表见仓库内 skills/llms.txt。【免费下载链接】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），仅供参考