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 生成的页面一股 AI 味劝退过紫色渐变、三等分卡片、Inter 字体页页长得像。Taste-Skill 是一组参数化前端设计技能包把主观的品味拆成可调的数字让你的 AI 编码代理交出有设计手感的页面。安装就一行npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skillCodex、Cursor、Claude Code 都支持。也可以直接把某个SKILL.md贴进对话。它是怎么工作的这条参数化前端的生成流水线很直白你提需求代理先读需求再拧三个旋钮最后才动代码。第一步读需求。你输入做个极简 SaaS 落地页代理不能直接写代码。它要先给出一句设计解读比如我理解为面向技术买家的 B2B SaaS 落地页Linear 式极简语言。如果需求真的模糊它只允许问一个问题比如你更想要 Linear 的干净还是 Awwwards 的放飞不许连环追问。第二步拧三个旋钮。三个数字决定了后面所有布局、动效、留白的走向DESIGN_VARIANCE1-10越大布局越不正经1-3 是对称十二列网格8-10 是非对称错落加大幅留白MOTION_INTENSITY1-10动效从静态到电影感1-3 只有悬停反馈8-10 能做滚动劫持、物理视差VISUAL_DENSITY1-10单屏信息量1-3 是画廊式留白8-10 是驾驶舱密度数字一律等宽字体默认值是 8/6/4。你的原话会被翻译成区间极简会把变化度压到 5-6、动效降到 3-4Awwwards 创意会把三轴全部拉高动效直接顶到 8-10。这些值在对话里随时改不用翻文件。第三步旋钮变成规则。数字是后面每条规则的总开关。变化度大于 4居中 hero 被禁止密度大于 7通用卡片容器被禁止动效大于 4页面必须真的动起来不能挂羊头卖狗肉。每个动画还要一句话说清它传达了什么说不清就删掉。低旋钮和高旋钮的差别看代码就很直观/* 变化度 2经典对称网格 */ grid-template-columns: repeat(12, 1fr); gap: 1.5rem; /* 变化度 9非对称错落布局 */ grid-template-columns: 2fr 1fr 1fr 0.5fr; gap: 0 3rem; margin-left: -5vw;还有一份黑名单紫蓝渐变、Inter 配 slate-900、三等分卡片、标题里的大破折号默认全部禁止。规则写得很具体比如每三个 section 最多出现一个小字眉标这种细节都有。完整条文在核心规则文件里。适配哪些场景这套 AI 前端设计技能包不止一个文件仓库里捆了十来个 skill各管一摊按你要做的事挑你在做什么装哪个 skill你会拿到什么从零做一个 SaaS 落地页taste-skill 加 imagegen-frontend-web先出情绪板参考图再让代理照着写代码设计师个人作品集soft-skill 加 redesign-skill柔和对比、大留白有个性但不乱翻新一个老站点redesign-skill先审计现有页面只修坏的地方不动信息结构企业级数据后台不用它它只接营销页管理端明确说这不归我第一行是最常见的走法imagegen 系技能只出参考图不碰代码方向定下来再交给 image-to-code-skill一步到位从图到码。下面这张花艺品牌页就是按 taste-skill 生成的变化度拧得高、密度拧得低留白比内容还多。和现有设计系统怎么配合和现有设计系统打交道的规则是二选一。第一种需求读出来就是微软生态IBM 分析界面这类直接上官方包npm install fluentui/react-components、npm install material/web、npm install carbon/react carbon/styles。别手搓它们的 CSS也别引入 token 再改掉九成。一个项目只用一套系统不混装。第二种需求是玻璃拟态、粗野主义这类美学没有官方包。就用原生 CSS 写并在注释里诚实标注这是近似实现不是官方物料。粗野主义版本大概长这样.brutalist { font-family: monospace; border: 3px solid #000; box-shadow: 8px 8px 0 #000; }要点就两个字诚实。分不清自己是官方系统还是自绘仿制不许发出去。质量底线与落地检查上线前把下面这份质量底线快速过一遍就行不用搞大流程 ✅hero 装得进一屏强调色只用一个并全页锁死CTA 一行放得下、看得清文字对比度不低于 4.5:1键盘焦点态可见弱动效降级有兜底亮色暗色两种模式都看过Lighthouse 跑一次性能上盯两个数LCP 小于 2.5sCLS 小于 0.1同一次 Lighthouse 就能顺手看到。这些规则背后为什么这么定research 目录里有来龙去脉。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辅助生成（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 生成的页面一股 AI 味劝退过紫色渐变、三等分卡片、Inter 字体页页长得像。Taste-Skill 是一组参数化前端设计技能包把主观的品味拆成可调的数字让你的 AI 编码代理交出有设计手感的页面。安装就一行npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skillCodex、Cursor、Claude Code 都支持。也可以直接把某个SKILL.md贴进对话。它是怎么工作的这条参数化前端的生成流水线很直白你提需求代理先读需求再拧三个旋钮最后才动代码。第一步读需求。你输入做个极简 SaaS 落地页代理不能直接写代码。它要先给出一句设计解读比如我理解为面向技术买家的 B2B SaaS 落地页Linear 式极简语言。如果需求真的模糊它只允许问一个问题比如你更想要 Linear 的干净还是 Awwwards 的放飞不许连环追问。第二步拧三个旋钮。三个数字决定了后面所有布局、动效、留白的走向DESIGN_VARIANCE1-10越大布局越不正经1-3 是对称十二列网格8-10 是非对称错落加大幅留白MOTION_INTENSITY1-10动效从静态到电影感1-3 只有悬停反馈8-10 能做滚动劫持、物理视差VISUAL_DENSITY1-10单屏信息量1-3 是画廊式留白8-10 是驾驶舱密度数字一律等宽字体默认值是 8/6/4。你的原话会被翻译成区间极简会把变化度压到 5-6、动效降到 3-4Awwwards 创意会把三轴全部拉高动效直接顶到 8-10。这些值在对话里随时改不用翻文件。第三步旋钮变成规则。数字是后面每条规则的总开关。变化度大于 4居中 hero 被禁止密度大于 7通用卡片容器被禁止动效大于 4页面必须真的动起来不能挂羊头卖狗肉。每个动画还要一句话说清它传达了什么说不清就删掉。低旋钮和高旋钮的差别看代码就很直观/* 变化度 2经典对称网格 */ grid-template-columns: repeat(12, 1fr); gap: 1.5rem; /* 变化度 9非对称错落布局 */ grid-template-columns: 2fr 1fr 1fr 0.5fr; gap: 0 3rem; margin-left: -5vw;还有一份黑名单紫蓝渐变、Inter 配 slate-900、三等分卡片、标题里的大破折号默认全部禁止。规则写得很具体比如每三个 section 最多出现一个小字眉标这种细节都有。完整条文在核心规则文件里。适配哪些场景这套 AI 前端设计技能包不止一个文件仓库里捆了十来个 skill各管一摊按你要做的事挑你在做什么装哪个 skill你会拿到什么从零做一个 SaaS 落地页taste-skill 加 imagegen-frontend-web先出情绪板参考图再让代理照着写代码设计师个人作品集soft-skill 加 redesign-skill柔和对比、大留白有个性但不乱翻新一个老站点redesign-skill先审计现有页面只修坏的地方不动信息结构企业级数据后台不用它它只接营销页管理端明确说这不归我第一行是最常见的走法imagegen 系技能只出参考图不碰代码方向定下来再交给 image-to-code-skill一步到位从图到码。下面这张花艺品牌页就是按 taste-skill 生成的变化度拧得高、密度拧得低留白比内容还多。和现有设计系统怎么配合和现有设计系统打交道的规则是二选一。第一种需求读出来就是微软生态IBM 分析界面这类直接上官方包npm install fluentui/react-components、npm install material/web、npm install carbon/react carbon/styles。别手搓它们的 CSS也别引入 token 再改掉九成。一个项目只用一套系统不混装。第二种需求是玻璃拟态、粗野主义这类美学没有官方包。就用原生 CSS 写并在注释里诚实标注这是近似实现不是官方物料。粗野主义版本大概长这样.brutalist { font-family: monospace; border: 3px solid #000; box-shadow: 8px 8px 0 #000; }要点就两个字诚实。分不清自己是官方系统还是自绘仿制不许发出去。质量底线与落地检查上线前把下面这份质量底线快速过一遍就行不用搞大流程 ✅hero 装得进一屏强调色只用一个并全页锁死CTA 一行放得下、看得清文字对比度不低于 4.5:1键盘焦点态可见弱动效降级有兜底亮色暗色两种模式都看过Lighthouse 跑一次性能上盯两个数LCP 小于 2.5sCLS 小于 0.1同一次 Lighthouse 就能顺手看到。这些规则背后为什么这么定research 目录里有来龙去脉。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辅助生成（AIGC），仅供参考