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 生成的落地页总是同一个味道AI 紫色渐变、居中 Hero、三张均分的功能卡片、Inter 字体配深灰背景。问题不在模型能力而在没人给它一份具体的设计标准好看一点这种话模型只能靠训练数据里的平均审美来猜猜出来的自然是模板。taste-skill 就是干这个的一组可加载的 Agent Skills用来提升 AI 生成界面的质量把有品味从形容词变成可以执行的规则。它到底给 AI 装了什么仓库里每个技能就是一个文件夹核心是一份SKILL.md里面写满了可执行的约束旋钮参数、字体禁令、配色规则、布局上限外加一份几十个勾选项的预检清单。这些文件可以自动加载也可以直接粘进 ChatGPT、Codex、Cursor、Claude Code 的对话里。它和写一段更好的提示词的区别在于提示词是软的模型随时可以忘这份清单是硬的每一项都有明确的判定标准做不到就不算完成。三个 1-10 的旋钮分别控制什么主技能design-taste-frontend文件夹名taste-skill最核心的配置是三个数字旋钮取值 1 到 10默认基线是 8/6/4DESIGN_VARIANCE布局实验度。1 是完全对称10 是故意打破对称的排版。大于 4 时规则强制禁止再用居中 Hero。MOTION_INTENSITY动效深度。1-3 只有 hover4-7 是 CSS 过渡加滚动入场8-10 才上 GSAP 滚动叙事。VISUAL_DENSITY单屏信息量。1-3 是画廊式的留白8-10 是仪表盘式的紧凑数据。旋钮改变的不是某一行代码而是后续所有决策的上限。比如MOTION_INTENSITY超过 4页面就必须真的动起来动效还要能一句话说清存在理由VISUAL_DENSITY超过 7通用卡片容器直接禁用数据用 1px 线分隔。技能文件里还内置了一张速查表根据设计解读直接给数值需求关键词VARIANCEMOTIONDENSITYminimalist / Linear 风5-63-42-3落地页 / 作品集默认7-96-83-5信任优先 / 公共部门3-42-34-5改版-保留品牌对齐现状现状1对齐现状从需求到交付流程卡在哪几步design-taste-frontend的执行顺序是固定的解读 Brief → 输出 Design Read → 设定三个旋钮 → 映射设计系统 → 实现 → 预发布检查第一步是 Brief Inference。动笔前模型必须从页面类型、用户提到的词、参考链接、目标受众里推断需求并用一句话输出 Design Read例如B2B SaaS 落地页面向技术采购Linear 式极简语言倾向 Tailwind Geist 克制动效。需求模糊时只允许问一个问题不能连环追问。第二步是设计系统映射。需求读起来像某个成熟系统就用官方包别手写 CSS 模仿企业级走 Fluent UIGoogle 风格走 Material 3Shopify 应用走 Polaris现代 SaaS 默认 Tailwind v4 加 shadcn/ui。一个项目只许一个设计系统。最后一步是预检任何一项不过就不算完成。它拦的是模型最典型的AI 痕迹挑几个最扎眼的说AI 紫色发光渐变三张均分特性卡片加 Inter 加 slate-900用 div 拼出来的假产品截图Hero 区里的 V0.6、BETA 版本标签以及全页零长破折号em-dash的硬性禁令出现一个就算失败。技能清单按需求选装别全装仓库里一共 13 个技能实现类出代码图像类只出参考图每个技能只解决一件事技能什么时候用taste-skilldesign-taste-frontend默认新站、落地页、作品集gpt-taste给 GPT/Codex 更严格的版式与动效约束image-to-code/imagegen-frontend-web/imagegen-frontend-mobile先出参考图再写代码或只要设计稿不要代码redesignredesign-existing-projects老项目先审计现有 UI再修布局、间距、层级soft/minimalist/brutalist风格已定高端柔和、编辑风极简、工业粗野outputfull-output-enforcement模型爱偷懒截断强制完整输出禁止占位注释图像类技能可以配合 ChatGPT Images 这类生成器先出画面再把渲染图丢给编码工具实现image-to-code则把出图、分析、写代码串成一个流程。安装与上手路径装完仓库后一条命令npx skills add ./taste-skillnpx skills add会扫描仓库的skills/目录所以代码技能和图像技能装法是同一条命令。只装单个技能可以加--skill参数并传安装名注意安装名取自SKILL.md的 frontmatter不一定等于文件夹名例如--skill design-taste-frontend。懒得装的话把某个SKILL.md复制进项目或粘贴进对话也能用。当前默认技能是 v2 实验版是对 v1 的一次大幅重写如果你的工作流依赖 v1 的精确行为装design-taste-frontend-v1固定即可。什么项目适合用它什么项目别用规则面向的是设计意图不是某个框架 APIReact、Vue、Svelte 通吃。适合的是落地页、作品集、品牌站以及旧站翻新。注意design-taste-frontend自己划了边界数据密集的仪表盘、多步表单、代码编辑器这类界面它明确建议改用 Fluent、Carbon、Atlassian 这类官方组件库而不是用营销页的规则去套产品界面。给个建议别一上来就追求整套流程。先拿imagegen-frontend-web出一张参考图再用image-to-code落成页面一轮下来你对这套约束系统能拦下什么体感会比读文档清楚得多。【免费下载链接】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），仅供参考