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 生成一个落地页大概率会得到这些东西深色背景上飘着紫色渐变、标题居中、下面紧跟三张等大卡片、一张Trusted bylogo 墙按钮还是霓虹蓝光。代码能跑但一眼就能看出是机器做的——这就是AI 模板味。Taste-Skill就是一个反模板的 AI 前端设计框架它把一套 SKILL.md 指令装进 Codex、Cursor、Claude 这类 AI 编码代理里让 AI 在动手写代码前先读懂你的需求再按参数控制布局、动效和信息密度。项目里的research/目录还附了背景研究专门分析模型为什么会偷懒、为什么总往平庸的设计上靠。先装再用一句话验证效果整个上手成本很低不需要配置任何工程。装全量技能只需要一条命令npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill如果只想要默认的那个技能安装名design-taste-frontend在后面加--skill design-taste-frontend即可。也可以不装直接把任意一个SKILL.md复制进对话里粘贴给 AI 用。装完之后正常说一句帮我做一个花艺工作室的官网观察两件事它是不是先报了一句设计判断再开始写代码成品页面里有没有那种满屏居中和三卡片。有变化就说明它在工作了。写代码之前它先读一遍你的需求Taste-Skill 的核心思路是AI 设计产出平庸多半是因为模型没读懂需求就急着套默认审美。所以技能规定动任何一行代码之前先做一次设计读取只看六个信号页面类型SaaS 落地页、作品集、企业站、博客还是重做现有站点情感词你描述里出现的简约高端实验性Apple 风这类词直接决定设计语言参考信号你贴的 URL、截图、点名的竞品品牌会被提取成具体的风格线索目标受众给 B2B 采购看和给设计敏感的消费者看审美标准完全不同已有品牌资产logo、主色、字体是起点不是可选项隐性约束无障碍优先、政府项目、受监管行业——这类约束优先级高于一切审美偏好读完后它会先输出一句Design Read比如这是一个面向技术买家的 B2B SaaS 落地页走 Linear 式极简语言倾向 Tailwind 工具类 克制动效。需求有歧义时它只追问一个问题更像 Linear 的干净还是 Awwwards 的实验而不是甩一串多选题给你。这一步的价值在于判断是显式的。你觉得它读错了直接纠正这一句话就行不用返工整个页面。用 3 个旋钮控制 AI 的艺术感设计读取完成后它给整页设三个 1 到 10 的旋钮后续所有布局、动效、密度决策都受这三个值约束。想改风格对话里直接说就行不用去改文件。旋钮低档1-3中档4-7高档8-10DESIGN_VARIANCE布局变化对称、居中的干净网格非对称留白、错落排布艺术化构图、大留白、打破常规MOTION_INTENSITY动效强度静态只有悬停态0.3 秒级缓动、入场动画滚动编排、磁性悬停、物理感动效VISUAL_DENSITY信息密度画廊式大留白常规网页节奏驾驶舱式紧凑布局它内部还有一套从信号到旋钮值的映射举几个例子说minimalist / calm → 大约 5-6 / 3-4 / 2-3说premium / Apple-y → 大约 7-8 / 5-7 / 3-4说playful / Awwwards / experimental → 大约 9-10 / 8-10 / 3-4政府或受监管服务 → 大约 3-4 / 2-3 / 4-5信任优先克制为主还有一条动效诚信规则旋钮设到 7页面就必须真的在动做不到完整的动效就把旋钮降回 3交一个干净的静态页。宁可低配交付不接受半成品动画。不同需求它挑不同的组件库一个容易忽略的点Taste-Skill 不鼓励 AI 手搓一切。它内置了一张需求 → 设计系统映射表遇到有官方包的场景直接装官方组件库而不是假装复刻一套 CSS微软系 / 企业 SaaS 仪表板 →Fluent UIGoogle 系 / Material 风 →Material Web M3 tokensIBM 式 B2B 分析界面 →CarbonShopify 管理端 →Polaris现代 SaaS、组件代码归自己 →shadcn/ui快速 MVP →Bootstrap 5.3英国 / 美国公共服务 →GOV.UK Frontend / USWDS规则里有两条硬约束一个项目只允许一套系统不许 Fluent 和 Carbon 混用以及诚实原则——毛玻璃、Bento 网格、粗野主义这类审美没有官方包就用原生 CSS 实现并在注释里写清楚是借灵感而非官方组件。技能模块怎么选一张表说清仓库里的技能分成两类输出代码的实现类和只输出设计稿的图像生成类。每个技能只干一件事不需要一次全装。技能干什么什么时候用taste-skill默认全能款v2 实验版读需求 调三旋钮通用起步先装这个gpt-tasteskill给 GPT/Codex 的更严格变体布局变化和 GSAP 动效要求更高默认款在你工作流里太保守时image-to-code-skill先生成参考图 → 分析 → 再按图实现代码想走设计稿驱动的完整管线redesign-skill先审计现有 UI再修布局、间距、层级老项目翻新而不是从零新建soft-skill柔和对比、大留白、高级质感奢侈品、高端品牌向minimalist-skillNotion / Linear 式编辑风产品 UI生产力工具、克制审美brutalist-skill瑞士字体、锐利对比、实验性排版玩味、艺术向项目output-skill禁止占位注释和偷懒强制输出完整代码AI 老是交半成品时imagegen-frontend-web/imagegen-frontend-mobile只出图网站设计稿 / 移动端界面交付物是视觉稿交给编码代理再实现brandkit只出图logo 方向、色板、字体系统等品牌板品牌系统建立阶段一条实用的组合拳先用imagegen-frontend-web出几张网站参考图确认方向后把图丢给 Codex 或 Cursor 实现想一个工作流走完就换image-to-code-skill在提示词里写清楚先生成图再分析再写码。代码质量几条能落到验收标准上的规则除了好不好看这套技能把很多工程质量也写成了硬规则不用你额外提醒动画只动transform和opacity连续值鼠标位置、滚动进度一律走 Motion 的useMotionValue不许用useState每帧重渲染字体走next/font或自托管 font-display: swap禁止生产环境直接挂 Google Fonts 的link按钮、表单、焦点环的对比度必须过WCAG AA正文 4.5:1白底白字按钮直接判不合格移动端用min-h-[100dvh]替代h-screen避免 iOS 地址栏导致的布局跳动响应式按内容断点思考内容挤了才加列而不是机械地对着设备像素写实战看一个它生成的页面仓库里的示例项目 Floria 是一个植物花艺工作室官网整体是深色高级路线。看它的 hero 区就能感受到这套规则的效果注意几个细节标题在左侧而不是居中配一段两行的短说明和一个主按钮右侧让真实的花艺摄影占掉大半个画面而不是一个渐变色块下方的作品区用大小不一的图片卡片避开了三张等大卡片的老套路。这正是DESIGN_VARIANCE偏高、VISUAL_DENSITY偏低时该有的样子——留白大胆但每一块空间都有理由。适合谁什么时候该用直接给判断该用——你要做的是落地页、作品集、营销站或者你在重做已有站点或者你已经被AI 模板味折磨过想给编码代理立一套设计规矩。对设计师来说它更像一份可执行的验收清单。不适合——数据密集的仪表板、多步流程型产品 UI 这类界面本就不在它的设计目标内如果你的项目必须绑定某套企业级组件库直接用官方设计系统更快没必要为反模板而反模板。Taste-Skill 本质上把资深前端设计师脑子里那套先读需求、再定风格、然后克制的判断过程写成了 AI 能照做的规则。装一条命令剩下的交给它去执行你负责看那一句Design Read读得对不对。【免费下载链接】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：一条命令让 AI 生成落地页告别模板感
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 生成一个落地页大概率会得到这些东西深色背景上飘着紫色渐变、标题居中、下面紧跟三张等大卡片、一张Trusted bylogo 墙按钮还是霓虹蓝光。代码能跑但一眼就能看出是机器做的——这就是AI 模板味。Taste-Skill就是一个反模板的 AI 前端设计框架它把一套 SKILL.md 指令装进 Codex、Cursor、Claude 这类 AI 编码代理里让 AI 在动手写代码前先读懂你的需求再按参数控制布局、动效和信息密度。项目里的research/目录还附了背景研究专门分析模型为什么会偷懒、为什么总往平庸的设计上靠。先装再用一句话验证效果整个上手成本很低不需要配置任何工程。装全量技能只需要一条命令npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill如果只想要默认的那个技能安装名design-taste-frontend在后面加--skill design-taste-frontend即可。也可以不装直接把任意一个SKILL.md复制进对话里粘贴给 AI 用。装完之后正常说一句帮我做一个花艺工作室的官网观察两件事它是不是先报了一句设计判断再开始写代码成品页面里有没有那种满屏居中和三卡片。有变化就说明它在工作了。写代码之前它先读一遍你的需求Taste-Skill 的核心思路是AI 设计产出平庸多半是因为模型没读懂需求就急着套默认审美。所以技能规定动任何一行代码之前先做一次设计读取只看六个信号页面类型SaaS 落地页、作品集、企业站、博客还是重做现有站点情感词你描述里出现的简约高端实验性Apple 风这类词直接决定设计语言参考信号你贴的 URL、截图、点名的竞品品牌会被提取成具体的风格线索目标受众给 B2B 采购看和给设计敏感的消费者看审美标准完全不同已有品牌资产logo、主色、字体是起点不是可选项隐性约束无障碍优先、政府项目、受监管行业——这类约束优先级高于一切审美偏好读完后它会先输出一句Design Read比如这是一个面向技术买家的 B2B SaaS 落地页走 Linear 式极简语言倾向 Tailwind 工具类 克制动效。需求有歧义时它只追问一个问题更像 Linear 的干净还是 Awwwards 的实验而不是甩一串多选题给你。这一步的价值在于判断是显式的。你觉得它读错了直接纠正这一句话就行不用返工整个页面。用 3 个旋钮控制 AI 的艺术感设计读取完成后它给整页设三个 1 到 10 的旋钮后续所有布局、动效、密度决策都受这三个值约束。想改风格对话里直接说就行不用去改文件。旋钮低档1-3中档4-7高档8-10DESIGN_VARIANCE布局变化对称、居中的干净网格非对称留白、错落排布艺术化构图、大留白、打破常规MOTION_INTENSITY动效强度静态只有悬停态0.3 秒级缓动、入场动画滚动编排、磁性悬停、物理感动效VISUAL_DENSITY信息密度画廊式大留白常规网页节奏驾驶舱式紧凑布局它内部还有一套从信号到旋钮值的映射举几个例子说minimalist / calm → 大约 5-6 / 3-4 / 2-3说premium / Apple-y → 大约 7-8 / 5-7 / 3-4说playful / Awwwards / experimental → 大约 9-10 / 8-10 / 3-4政府或受监管服务 → 大约 3-4 / 2-3 / 4-5信任优先克制为主还有一条动效诚信规则旋钮设到 7页面就必须真的在动做不到完整的动效就把旋钮降回 3交一个干净的静态页。宁可低配交付不接受半成品动画。不同需求它挑不同的组件库一个容易忽略的点Taste-Skill 不鼓励 AI 手搓一切。它内置了一张需求 → 设计系统映射表遇到有官方包的场景直接装官方组件库而不是假装复刻一套 CSS微软系 / 企业 SaaS 仪表板 →Fluent UIGoogle 系 / Material 风 →Material Web M3 tokensIBM 式 B2B 分析界面 →CarbonShopify 管理端 →Polaris现代 SaaS、组件代码归自己 →shadcn/ui快速 MVP →Bootstrap 5.3英国 / 美国公共服务 →GOV.UK Frontend / USWDS规则里有两条硬约束一个项目只允许一套系统不许 Fluent 和 Carbon 混用以及诚实原则——毛玻璃、Bento 网格、粗野主义这类审美没有官方包就用原生 CSS 实现并在注释里写清楚是借灵感而非官方组件。技能模块怎么选一张表说清仓库里的技能分成两类输出代码的实现类和只输出设计稿的图像生成类。每个技能只干一件事不需要一次全装。技能干什么什么时候用taste-skill默认全能款v2 实验版读需求 调三旋钮通用起步先装这个gpt-tasteskill给 GPT/Codex 的更严格变体布局变化和 GSAP 动效要求更高默认款在你工作流里太保守时image-to-code-skill先生成参考图 → 分析 → 再按图实现代码想走设计稿驱动的完整管线redesign-skill先审计现有 UI再修布局、间距、层级老项目翻新而不是从零新建soft-skill柔和对比、大留白、高级质感奢侈品、高端品牌向minimalist-skillNotion / Linear 式编辑风产品 UI生产力工具、克制审美brutalist-skill瑞士字体、锐利对比、实验性排版玩味、艺术向项目output-skill禁止占位注释和偷懒强制输出完整代码AI 老是交半成品时imagegen-frontend-web/imagegen-frontend-mobile只出图网站设计稿 / 移动端界面交付物是视觉稿交给编码代理再实现brandkit只出图logo 方向、色板、字体系统等品牌板品牌系统建立阶段一条实用的组合拳先用imagegen-frontend-web出几张网站参考图确认方向后把图丢给 Codex 或 Cursor 实现想一个工作流走完就换image-to-code-skill在提示词里写清楚先生成图再分析再写码。代码质量几条能落到验收标准上的规则除了好不好看这套技能把很多工程质量也写成了硬规则不用你额外提醒动画只动transform和opacity连续值鼠标位置、滚动进度一律走 Motion 的useMotionValue不许用useState每帧重渲染字体走next/font或自托管 font-display: swap禁止生产环境直接挂 Google Fonts 的link按钮、表单、焦点环的对比度必须过WCAG AA正文 4.5:1白底白字按钮直接判不合格移动端用min-h-[100dvh]替代h-screen避免 iOS 地址栏导致的布局跳动响应式按内容断点思考内容挤了才加列而不是机械地对着设备像素写实战看一个它生成的页面仓库里的示例项目 Floria 是一个植物花艺工作室官网整体是深色高级路线。看它的 hero 区就能感受到这套规则的效果注意几个细节标题在左侧而不是居中配一段两行的短说明和一个主按钮右侧让真实的花艺摄影占掉大半个画面而不是一个渐变色块下方的作品区用大小不一的图片卡片避开了三张等大卡片的老套路。这正是DESIGN_VARIANCE偏高、VISUAL_DENSITY偏低时该有的样子——留白大胆但每一块空间都有理由。适合谁什么时候该用直接给判断该用——你要做的是落地页、作品集、营销站或者你在重做已有站点或者你已经被AI 模板味折磨过想给编码代理立一套设计规矩。对设计师来说它更像一份可执行的验收清单。不适合——数据密集的仪表板、多步流程型产品 UI 这类界面本就不在它的设计目标内如果你的项目必须绑定某套企业级组件库直接用官方设计系统更快没必要为反模板而反模板。Taste-Skill 本质上把资深前端设计师脑子里那套先读需求、再定风格、然后克制的判断过程写成了 AI 能照做的规则。装一条命令剩下的交给它去执行你负责看那一句Design Read读得对不对。【免费下载链接】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），仅供参考