Taste-Skill 完整指南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-skill让 AI 写一个落地页十个里有八个长一个样紫蓝渐变、居中大标题、三张并排的特性卡片。Taste-Skill 是一套开源、可移植的 Agent Skills专门给 AI 注入品味让生成的前端界面在布局、字体、动效和间距上跳出模板默认值。看懂 Taste-Skill 是什么一箱可插拔的品味说明书项目本体是一组SKILL.md文件也就是智能体可以自动加载的指令文件。每个技能只管一件事按用途分两类实现类技能直接产出代码。如 taste-skill通用前端、redesign-skill先审计再改造现有项目、soft-skill精致克制的高端感视觉、minimalist-skillNotion/Linear 式的编辑感产品界面、brutalist-skill瑞士排版加高对比度的工业风等。图像生成类技能只出设计参考图不出代码。如 imagegen-frontend-web网页视觉稿、imagegen-frontend-mobile移动端界面流、brandkit品牌视觉板配合图像生成工具先出图再交给 Codex、Cursor 或 Claude Code 实现。所有技能都框架无关规则约束的是设计意图不是某个框架的 APIReact、Vue、Svelte 都能用。项目采用 MIT 许可全部技能都放在 skills/ 目录下可按需取用。️ 调节三个旋钮让设计决策可解释先读懂需求再输出一句设计解读v2 默认技能会要求智能体在动手前先判断这是什么类型的页面、面向什么人群、你用了哪些风格词Linear 风极简Awwwards 感。然后必须用一行话给出解读例如解读为面向技术买家的 B2B SaaS 落地页Linear 式极简语言倾向 Tailwind Geist 字体。需求含糊时只允许追问一个问题不许瞎猜。设置三个 1-10 的强度档旋钮低值高值DESIGN_VARIANCE 布局实验度对称、居中、工整不对称、大留白、瀑布流MOTION_INTENSITY 动效强度仅悬停反馈滚动叙事、磁吸物理效果VISUAL_DENSITY 信息密度画廊式空旷仪表盘式密集数据默认档位是 8/6/4技能里还内置了关键词 → 档位映射表你说minimalist、calm它会落到 5-6/3-4/2-3你说experimental、agency则推到 9-10/8-10/3-4。你不需要改文件直接在对话里说动效调到 3即可。按场景匹配正确的设计系统技能明确要求官方设计系统就用官方包别手抄 CSS。微软系企业 SaaS 用 Fluent UIGoogle 风格产品用 Material 3IBM 风格 B2B 用 CarbonShopify 应用用 Polaris英美公共服务用 govuk-frontend 或 USWDS组件自主维护的现代 SaaS 用 shadcn/ui但必须定制禁止直接发默认样式。硬性规则一个项目只用一个设计系统。 按场景挑技能13 个 SKILL.md 对照表技能安装名什么时候用taste-skilldesign-taste-frontend着陆页、作品集、通用场景首选v2 实验版taste-skill-v1design-taste-frontend-v1依赖旧版精确行为的工作流gpt-tasteskillgpt-taste面向 GPT/Codex布局与动效约束更严image-to-code-skillimage-to-code先出图、再分析、最后写代码的完整管线redesign-skillredesign-existing-projects现有代码库审计后修布局、间距、层级soft-skillhigh-end-visual-design精致、平静、偏昂贵感的界面minimalist-skillminimalist-ui编辑类产品的克制极简风brutalist-skillindustrial-brutalist-ui瑞士排版、锐利对比、实验性布局output-skillfull-output-enforcement模型老写一半就停、留占位注释时stitch-skillstitch-design-taste兼容 Google Stitch 规则可导出 DESIGN.mdimagegen-frontend-web / -mobile / brandkit同名交付物是图片网页视觉稿、移动界面流、品牌板技能文件自己也写明每个技能各管一摊不用一次全装。落地页装 taste-skill 就够风格已定再加 soft 或 minimalist输出总被截断就补 output-skill。三步跑通交付安装、说需求、过检查单安装。克隆仓库或用 Agent Skills 的 CLI 一键装单个技能也可以直接把某个SKILL.md拷进项目、粘进对话里用。git clone https://gitcode.com/GitHub_Trending/ta/taste-skill npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend说清需求。页面类型 受众 风格关键词三样说全技能会自行推断并给出档位想精确控制就直接指定旋钮值。过一遍预发布检查单。taste-skill 末尾内置了 60 多项逐项勾选的 pre-flight check包括全页零长破折号整页只用一个强调色首屏内容不溢出动效必须响应系统的减弱动效设置。任何一项不过就不算交付完成。认清被禁止的 AI 痕迹以及背后原理技能文件里有一整章AI 痕迹禁令每条都来自真实生成测试例如长破折号em-dash出现频率最高的 AI 签名全页零容忍标题、正文、按钮、alt 文本都不行三张并排的同款特性卡片、AI 紫渐变光晕、米色黄铜色的手工感默认配色用 div 矩形拼的假截图、Scroll 下滑提示、装饰性版本号、001 / INDEX式章节编号假精确数字99.99%、模板品牌名Acme、Cloudly这类占位式内容为什么管这么细仓库里的 research/ 目录有一组名为 laziness 的实证研究把模型输出偷懒、截断的根因拆成四块RLHF 与算力成本让模型系统性地偏好简洁训练数据里的占位符模式被放大长任务中走认知捷径以及上下文与输出限制导致的截断。上面的禁令和 output-skill 就是针对这些根因的对策。v1 到 v2 的完整改动见 CHANGELOG.md。把这套品味真正用起来先说需求再开工页面类型、受众、风格关键词三句话说清比帮我做的好看点有效得多一个主技能加一个辅助就够了装多了规则会互相打架动效做不稳就把 MOTION_INTENSITY 调低干净的静态页好过半成品的滚动动画交付前人工抽查几项机械检查强调色数量、长破折号、首屏长度这些一眼就能看出问题Taste-Skill 的价值不在提供模板而在把别做什么和为什么变成智能体能执行的规则让 AI 的设计决策从最可能的默认值变成可解释的选择。装上它你下次让 AI 写页面时缺的那部分品味就由这套技能文件来补。项目示例可参考 examples/ 目录中的 Floria 落地页。【免费下载链接】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-Skill 完整指南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-skill让 AI 写一个落地页十个里有八个长一个样紫蓝渐变、居中大标题、三张并排的特性卡片。Taste-Skill 是一套开源、可移植的 Agent Skills专门给 AI 注入品味让生成的前端界面在布局、字体、动效和间距上跳出模板默认值。看懂 Taste-Skill 是什么一箱可插拔的品味说明书项目本体是一组SKILL.md文件也就是智能体可以自动加载的指令文件。每个技能只管一件事按用途分两类实现类技能直接产出代码。如 taste-skill通用前端、redesign-skill先审计再改造现有项目、soft-skill精致克制的高端感视觉、minimalist-skillNotion/Linear 式的编辑感产品界面、brutalist-skill瑞士排版加高对比度的工业风等。图像生成类技能只出设计参考图不出代码。如 imagegen-frontend-web网页视觉稿、imagegen-frontend-mobile移动端界面流、brandkit品牌视觉板配合图像生成工具先出图再交给 Codex、Cursor 或 Claude Code 实现。所有技能都框架无关规则约束的是设计意图不是某个框架的 APIReact、Vue、Svelte 都能用。项目采用 MIT 许可全部技能都放在 skills/ 目录下可按需取用。️ 调节三个旋钮让设计决策可解释先读懂需求再输出一句设计解读v2 默认技能会要求智能体在动手前先判断这是什么类型的页面、面向什么人群、你用了哪些风格词Linear 风极简Awwwards 感。然后必须用一行话给出解读例如解读为面向技术买家的 B2B SaaS 落地页Linear 式极简语言倾向 Tailwind Geist 字体。需求含糊时只允许追问一个问题不许瞎猜。设置三个 1-10 的强度档旋钮低值高值DESIGN_VARIANCE 布局实验度对称、居中、工整不对称、大留白、瀑布流MOTION_INTENSITY 动效强度仅悬停反馈滚动叙事、磁吸物理效果VISUAL_DENSITY 信息密度画廊式空旷仪表盘式密集数据默认档位是 8/6/4技能里还内置了关键词 → 档位映射表你说minimalist、calm它会落到 5-6/3-4/2-3你说experimental、agency则推到 9-10/8-10/3-4。你不需要改文件直接在对话里说动效调到 3即可。按场景匹配正确的设计系统技能明确要求官方设计系统就用官方包别手抄 CSS。微软系企业 SaaS 用 Fluent UIGoogle 风格产品用 Material 3IBM 风格 B2B 用 CarbonShopify 应用用 Polaris英美公共服务用 govuk-frontend 或 USWDS组件自主维护的现代 SaaS 用 shadcn/ui但必须定制禁止直接发默认样式。硬性规则一个项目只用一个设计系统。 按场景挑技能13 个 SKILL.md 对照表技能安装名什么时候用taste-skilldesign-taste-frontend着陆页、作品集、通用场景首选v2 实验版taste-skill-v1design-taste-frontend-v1依赖旧版精确行为的工作流gpt-tasteskillgpt-taste面向 GPT/Codex布局与动效约束更严image-to-code-skillimage-to-code先出图、再分析、最后写代码的完整管线redesign-skillredesign-existing-projects现有代码库审计后修布局、间距、层级soft-skillhigh-end-visual-design精致、平静、偏昂贵感的界面minimalist-skillminimalist-ui编辑类产品的克制极简风brutalist-skillindustrial-brutalist-ui瑞士排版、锐利对比、实验性布局output-skillfull-output-enforcement模型老写一半就停、留占位注释时stitch-skillstitch-design-taste兼容 Google Stitch 规则可导出 DESIGN.mdimagegen-frontend-web / -mobile / brandkit同名交付物是图片网页视觉稿、移动界面流、品牌板技能文件自己也写明每个技能各管一摊不用一次全装。落地页装 taste-skill 就够风格已定再加 soft 或 minimalist输出总被截断就补 output-skill。三步跑通交付安装、说需求、过检查单安装。克隆仓库或用 Agent Skills 的 CLI 一键装单个技能也可以直接把某个SKILL.md拷进项目、粘进对话里用。git clone https://gitcode.com/GitHub_Trending/ta/taste-skill npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend说清需求。页面类型 受众 风格关键词三样说全技能会自行推断并给出档位想精确控制就直接指定旋钮值。过一遍预发布检查单。taste-skill 末尾内置了 60 多项逐项勾选的 pre-flight check包括全页零长破折号整页只用一个强调色首屏内容不溢出动效必须响应系统的减弱动效设置。任何一项不过就不算交付完成。认清被禁止的 AI 痕迹以及背后原理技能文件里有一整章AI 痕迹禁令每条都来自真实生成测试例如长破折号em-dash出现频率最高的 AI 签名全页零容忍标题、正文、按钮、alt 文本都不行三张并排的同款特性卡片、AI 紫渐变光晕、米色黄铜色的手工感默认配色用 div 矩形拼的假截图、Scroll 下滑提示、装饰性版本号、001 / INDEX式章节编号假精确数字99.99%、模板品牌名Acme、Cloudly这类占位式内容为什么管这么细仓库里的 research/ 目录有一组名为 laziness 的实证研究把模型输出偷懒、截断的根因拆成四块RLHF 与算力成本让模型系统性地偏好简洁训练数据里的占位符模式被放大长任务中走认知捷径以及上下文与输出限制导致的截断。上面的禁令和 output-skill 就是针对这些根因的对策。v1 到 v2 的完整改动见 CHANGELOG.md。把这套品味真正用起来先说需求再开工页面类型、受众、风格关键词三句话说清比帮我做的好看点有效得多一个主技能加一个辅助就够了装多了规则会互相打架动效做不稳就把 MOTION_INTENSITY 调低干净的静态页好过半成品的滚动动画交付前人工抽查几项机械检查强调色数量、长破折号、首屏长度这些一眼就能看出问题Taste-Skill 的价值不在提供模板而在把别做什么和为什么变成智能体能执行的规则让 AI 的设计决策从最可能的默认值变成可解释的选择。装上它你下次让 AI 写页面时缺的那部分品味就由这套技能文件来补。项目示例可参考 examples/ 目录中的 Floria 落地页。【免费下载链接】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），仅供参考