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 生成的落地页都长得像深色底加紫蓝渐变、居中 hero 标题、下面三张等宽卡片、角落里一个 Acme 占位 logo。taste-skill 正是冲着这个问题做的开源 AI 技能集合装进 Codex、Cursor 或 Claude Code 之后agent 在动手写代码之前会先读题产出的落地页和作品集明显更有视觉品味。技能本体是一个 SKILL.md 指令文件仓库与框架无关不管最后用 React、Vue 还是 Svelte 实现都能用。AI 味是有指纹的AI 味不是模糊印象它有一串可枚举的指纹Inter 配板岩灰、紫色发光按钮、默认用衬线字当创意选择Fraunces 和 Instrument Serif 几乎每个项目都出现、premium 消费品牌一律米色背景加黄铜色点缀、hero 下挂三张等宽卡片、用 div 矩形拼出来的产品预览。taste-skill 的规则库来自对 LLM 真实产出做落地页测试的结果每条规则都对应模型实际踩过的默认倾向有些规则甚至写死了模型爱凑出来的具体色值标注为禁止作为默认再遇必须换色族。同一份 brief 在加载技能前后的差距就在这强调色全页锁定一个、hero 只留标题和 CTA、Trusted by logo 墙用真 SVG 并放到 hero 下方、需要配图时生成或用真照片而不是 div 假截图。先用一句话写下设计判断v2 里最反直觉的是读题环节写任何代码前agent 必须完成一次brief inference简报推理并用一行字写出设计判断。它读取六类信号页面类型落地页 / 作品集 / 重设计 / 编辑类、用户用过的风格词、贴出的参考链接和截图、目标受众B2B 采购与设计敏感型消费者需要完全不同的语言、已有品牌资产以及无障碍、受监管行业这类隐性约束。输出长这样Reading this as: B2B SaaS landing for technical buyers, Linear-style minimalist, leaning Tailwind utilities Geist restrained motion.。如果 brief 真的模糊只允许追问一个澄清问题能从上下文推断就径直声明判断并开工。这一步的用途是逼模型先把理解说出口而不是滑回默认美学。三个旋钮决定布局、动效与密度判断之后agent 设置三个旋钮各 1-10作为整个技能的全局变量旋钮控制什么低值高值DESIGN_VARIANCE布局实验程度对称网格、居中不对称网格、大面积留白MOTION_INTENSITY动效深度仅 hover 状态滚动驱动、磁吸物理VISUAL_DENSITY每屏信息量画廊式空旷驾驶舱式密集、等宽数字关键不在旋钮本身而在它们可以从 brief 里推断。技能内置映射表minimalist / calm / Linear-style 落到 5-6 / 3-4 / 2-3trust-first / 公共部门 / 受监管落到 3-4 / 2-3 / 4-5Awwwards / experimental落到 9-10 / 8-10 / 3-4默认基线是 8 / 6 / 4。旋钮直接门控后续规则DESIGN_VARIANCE 高于 4 时居中 hero 被禁用VISUAL_DENSITY 高于 7 时卡片容器被禁用MOTION_INTENSITY 高于 5 才启用磁吸微交互且必须用 Motion 的 useMotionValue 实现、不走 React 状态。还有一条声称有动效就必须有动效动效旋钮设得高而页面没动起来算交付失败宁可把旋钮调低交静态页。一组机械化的检查旋钮定方向硬规则定下限。技能文件把AI 指纹AI tells整理成一份近乎零容忍的清单em dash 全页禁止生产测试里违规率最高的一条页面里只允许普通连字符每 3 个 section 最多一个 eyebrow 小标签且数量要机械计数同意图的 CTA 不许出现两种文案bento 网格 N 个内容必须恰好 N 个格子、不许留空格子全页不许中途切换明暗主题。交付前 agent 要过一遍pre-flight check约六十项覆盖按钮对比度WCAG AA、hero 不超出首屏、斜体 descender 裁切、明暗双模式、prefers-reduced-motion 降级等任何一项勾不诚实就算没做完。还有一层选工具的决策brief 读起来像企业 SaaS、Google 系、IBM 系时agent 被要求直接装 Fluent UI、Material、Carbon 等官方包一个项目一个体系不许手写模仿 CSSbrief 只是 glassmorphism、bento 这类风格词时没有官方包就用原生 CSS 实现并在注释里如实标注这是近似不是官方实现。Apple 的 Liquid Glass 在 Web 端根本没有官方包规则明确要求标注为近似实现。一条命令装齐单装也是命令所有技能共用同一条安装路径CLI 会扫描仓库的skills/目录npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill只想要默认设计技能时指定安装名是 frontmatter 里的 name不是文件夹名npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend离线或想手动控制时直接把任意 SKILL.md 复制进项目或贴进对话即可。走读一份花艺 brief 变成落地页拿仓库 examples 里的 Floria 走一遍。输入只有大意一句话花艺品牌 Floria面向城市消费者要 premium 的感觉。agent 先输出 design readpremium consumer 落地页克制的高级感不靠花哨装饰堆氛围。旋钮按映射表的 premium consumer 行定在 7 / 6 / 3。此时模型的默认倾向是伸手去拿那套暖纸感加黄铜色的配色而这组色值已被明确拉黑于是换成另一族并避免与上一个项目重复。hero 只保留标题、一行副文和一个主 CTA信任 logo 墙如有放在下一个 section产品图按 section 生成或用真实照片。交付前跑 pre-flight强调色全页一个、em dash 计数为零、hero 标题不超两行、明暗双模式都验过。上图中 Floria 落地页的 hero 区域即技能产出效果examples/目录还有整页截图可对照。边界与版本取舍当前默认的 taste-skill 是 v2 实验版规则仍在迭代API 会在 v2.0.0 stable 冻结依赖原版行为的用--skill design-taste-frontend-v1安装保留版。技能明确声明自己不做什么仪表盘、数据表格、多步表单、原生移动端不在范围内遇到会直接指向 Fluent、Carbon、TanStack 这类更合适的工具。相邻技能分工也清楚imagegen-web / imagegen-mobile / brandkit 只产出设计参考图image-to-code 是先生图、再分析、最后写码的完整流水线redesign-existing-projects 面向存量项目、先审计 UI 问题再动手output-skill 专治模型输出截断。taste-skill 的本质是一组用自然语言写成的约束先读题、选对工具、交付前自查让 AI 前端设计从凭手感出活变成有明确输入输出的流程。全部 13 个技能清单见 skills/ 目录关于 LLM 设计懒惰的实证背景研究在 research/。【免费下载链接】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 生成的落地页都长得像深色底加紫蓝渐变、居中 hero 标题、下面三张等宽卡片、角落里一个 Acme 占位 logo。taste-skill 正是冲着这个问题做的开源 AI 技能集合装进 Codex、Cursor 或 Claude Code 之后agent 在动手写代码之前会先读题产出的落地页和作品集明显更有视觉品味。技能本体是一个 SKILL.md 指令文件仓库与框架无关不管最后用 React、Vue 还是 Svelte 实现都能用。AI 味是有指纹的AI 味不是模糊印象它有一串可枚举的指纹Inter 配板岩灰、紫色发光按钮、默认用衬线字当创意选择Fraunces 和 Instrument Serif 几乎每个项目都出现、premium 消费品牌一律米色背景加黄铜色点缀、hero 下挂三张等宽卡片、用 div 矩形拼出来的产品预览。taste-skill 的规则库来自对 LLM 真实产出做落地页测试的结果每条规则都对应模型实际踩过的默认倾向有些规则甚至写死了模型爱凑出来的具体色值标注为禁止作为默认再遇必须换色族。同一份 brief 在加载技能前后的差距就在这强调色全页锁定一个、hero 只留标题和 CTA、Trusted by logo 墙用真 SVG 并放到 hero 下方、需要配图时生成或用真照片而不是 div 假截图。先用一句话写下设计判断v2 里最反直觉的是读题环节写任何代码前agent 必须完成一次brief inference简报推理并用一行字写出设计判断。它读取六类信号页面类型落地页 / 作品集 / 重设计 / 编辑类、用户用过的风格词、贴出的参考链接和截图、目标受众B2B 采购与设计敏感型消费者需要完全不同的语言、已有品牌资产以及无障碍、受监管行业这类隐性约束。输出长这样Reading this as: B2B SaaS landing for technical buyers, Linear-style minimalist, leaning Tailwind utilities Geist restrained motion.。如果 brief 真的模糊只允许追问一个澄清问题能从上下文推断就径直声明判断并开工。这一步的用途是逼模型先把理解说出口而不是滑回默认美学。三个旋钮决定布局、动效与密度判断之后agent 设置三个旋钮各 1-10作为整个技能的全局变量旋钮控制什么低值高值DESIGN_VARIANCE布局实验程度对称网格、居中不对称网格、大面积留白MOTION_INTENSITY动效深度仅 hover 状态滚动驱动、磁吸物理VISUAL_DENSITY每屏信息量画廊式空旷驾驶舱式密集、等宽数字关键不在旋钮本身而在它们可以从 brief 里推断。技能内置映射表minimalist / calm / Linear-style 落到 5-6 / 3-4 / 2-3trust-first / 公共部门 / 受监管落到 3-4 / 2-3 / 4-5Awwwards / experimental落到 9-10 / 8-10 / 3-4默认基线是 8 / 6 / 4。旋钮直接门控后续规则DESIGN_VARIANCE 高于 4 时居中 hero 被禁用VISUAL_DENSITY 高于 7 时卡片容器被禁用MOTION_INTENSITY 高于 5 才启用磁吸微交互且必须用 Motion 的 useMotionValue 实现、不走 React 状态。还有一条声称有动效就必须有动效动效旋钮设得高而页面没动起来算交付失败宁可把旋钮调低交静态页。一组机械化的检查旋钮定方向硬规则定下限。技能文件把AI 指纹AI tells整理成一份近乎零容忍的清单em dash 全页禁止生产测试里违规率最高的一条页面里只允许普通连字符每 3 个 section 最多一个 eyebrow 小标签且数量要机械计数同意图的 CTA 不许出现两种文案bento 网格 N 个内容必须恰好 N 个格子、不许留空格子全页不许中途切换明暗主题。交付前 agent 要过一遍pre-flight check约六十项覆盖按钮对比度WCAG AA、hero 不超出首屏、斜体 descender 裁切、明暗双模式、prefers-reduced-motion 降级等任何一项勾不诚实就算没做完。还有一层选工具的决策brief 读起来像企业 SaaS、Google 系、IBM 系时agent 被要求直接装 Fluent UI、Material、Carbon 等官方包一个项目一个体系不许手写模仿 CSSbrief 只是 glassmorphism、bento 这类风格词时没有官方包就用原生 CSS 实现并在注释里如实标注这是近似不是官方实现。Apple 的 Liquid Glass 在 Web 端根本没有官方包规则明确要求标注为近似实现。一条命令装齐单装也是命令所有技能共用同一条安装路径CLI 会扫描仓库的skills/目录npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill只想要默认设计技能时指定安装名是 frontmatter 里的 name不是文件夹名npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend离线或想手动控制时直接把任意 SKILL.md 复制进项目或贴进对话即可。走读一份花艺 brief 变成落地页拿仓库 examples 里的 Floria 走一遍。输入只有大意一句话花艺品牌 Floria面向城市消费者要 premium 的感觉。agent 先输出 design readpremium consumer 落地页克制的高级感不靠花哨装饰堆氛围。旋钮按映射表的 premium consumer 行定在 7 / 6 / 3。此时模型的默认倾向是伸手去拿那套暖纸感加黄铜色的配色而这组色值已被明确拉黑于是换成另一族并避免与上一个项目重复。hero 只保留标题、一行副文和一个主 CTA信任 logo 墙如有放在下一个 section产品图按 section 生成或用真实照片。交付前跑 pre-flight强调色全页一个、em dash 计数为零、hero 标题不超两行、明暗双模式都验过。上图中 Floria 落地页的 hero 区域即技能产出效果examples/目录还有整页截图可对照。边界与版本取舍当前默认的 taste-skill 是 v2 实验版规则仍在迭代API 会在 v2.0.0 stable 冻结依赖原版行为的用--skill design-taste-frontend-v1安装保留版。技能明确声明自己不做什么仪表盘、数据表格、多步表单、原生移动端不在范围内遇到会直接指向 Fluent、Carbon、TanStack 这类更合适的工具。相邻技能分工也清楚imagegen-web / imagegen-mobile / brandkit 只产出设计参考图image-to-code 是先生图、再分析、最后写码的完整流水线redesign-existing-projects 面向存量项目、先审计 UI 问题再动手output-skill 专治模型输出截断。taste-skill 的本质是一组用自然语言写成的约束先读题、选对工具、交付前自查让 AI 前端设计从凭手感出活变成有明确输入输出的流程。全部 13 个技能清单见 skills/ 目录关于 LLM 设计懒惰的实证背景研究在 research/。【免费下载链接】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），仅供参考