ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Taste-Skill上手指南:AI前端反模板

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-skillTaste-Skill是一套给Cursor、Codex、Claude Code等编码代理用的Agent Skills代理可自动加载的指令文件。它自己不写代码而是教会模型做出有设计感的前端页面替换掉AI紫蓝渐变、居中三卡片那套模板感。项目开篇横幅定位是反模板前端框架规则先行而不是再给一套组件库。3条命令装好Taste-Skill先克隆仓库浏览再用CLI扫描skills/目录一次装全git clone https://gitcode.com/GitHub_Trending/ta/taste-skill npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill只装单个技能用--skill传安装名取SKILL.md frontmatter里的name:字段不是目录名npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend不用CLI也行把任意一个SKILL.md拷进项目或直接整篇粘贴进ChatGPT/Codex对话效果一样。它到底在做什么一份设计总监红线类比一下实习生画页面你不给模板给他设计总监的红线规则。他想怎么画都行但每一条线必须过检。Taste-Skill就是这份红线分三块。SKILL.md模型动手前读的规则每个技能就是一个SKILL.md。默认技能v2安装名design-taste-frontend先读需求判断页面类型、氛围词、受众、已有品牌资产先输出一句话设计判断再动旋钮和选组件。需求模糊时只允许问一个问题不许一口气甩五个。平庸 tells一张硬禁清单v2最狠的部分是把AI默认审美列成黑名单全页禁用破折号em-dash、AI紫蓝渐变、居中hero加三等分卡片、到处玻璃拟态、Scroll to explore滚动提示、用div拼的假产品截图一律禁掉。这些就是让人三秒划走的AI痕迹出货前要过一遍pre-flight交付前的硬清单检查。有官方设计系统时直接用官方包规则里有一张映射表需求像微软风就装Fluent UI官方包Google风用Material政务站用GOV.UK或USWDS。一个项目最多混一个系统不许Fluent和Carbon混着来。只是某种风格bento网格、粗野主义才写原生CSS并在注释里诚实标注借鉴来源。按场景挑技能从零做页面默认技能打底落地页、作品集、改版选默认taste-skill最稳内置预设SaaS落地页7/6/4、创意机构9/8/3。要更严就上gpt-taste它是专门给GPT/Codex调的变体布局变化更大、GSAP滚动动画库方向更明确。图已想好图像优先流水线嘴上手头有参考图、模型却画不出来先用imagegen-frontend-web或imagegen-frontend-mobile出网站/移动端设计图再把图喂给Codex、Cursor实现。或者一步到位用image-to-code生成图、分析图、写代码提示词里把这三步顺序写明。旧项目改版先审计再动手在现有代码库上用redesign-existing-projects先审计布局、间距、层级再逐项修。URL结构、导航标签、表单字段名、品牌文案这些它不静默改动。模型爱交付半成品、留占位注释的加一个output-skill强制完整输出。只要图设计板与品牌套件提案、品牌板这类纯图像交付物用brandkit出logo方向、色板、字体和身份应用。图像类技能只出图一行代码不写。默认技能生成的Floria站点顶部左对齐大标题、主图推到右缘、胶囊标签居左上看不到居中对齐的模板脸。调三个旋钮变化、动效、密度默认技能顶部是1到10的数字旋钮基线8/6/4直接在对话里覆盖不用改文件DESIGN_VARIANCE: 7 # 布局变化度 MOTION_INTENSITY: 6 # 动效深度 VISUAL_DENSITY: 3 # 信息密度三档含义旋钮低档1-3高档8-10DESIGN_VARIANCE居中、严格对称网格不对称、大面积留白MOTION_INTENSITY只有hover状态滚动触发、视差VISUAL_DENSITY画廊式块间距巨大驾驶舱式1px线分隔文件里有旋钮推断表需求偏极简/安静对应5-6 / 3-4 / 2-3偏Awwwards实验风对应9-10 / 8-10 / 3-4政务信任优先则压到3-4 / 2-3 / 4-5。注意默认是v2实验版v2.0.0稳定前规则还可能迭代。关于Taste-Skill你可能想问React、Vue、Svelte都支持吗都支持。规则针对设计意图不是某个框架的API。输出是布局、间距、字体和组件选型建议框架无关。和其他AI设计技能差在哪多场景变体、关键技能可调旋钮加上基于专门研究research/目录的反重复规则。所有技能与主流编码代理框架无关。装v1还是v2默认装的已是v2实验版安装名没变重跑安装命令即原地升级。要钉死v1行为单独装design-taste-frontend-v1。它管不了什么仪表盘、数据表格、多步表单、代码编辑器、原生移动端都不在范围内。这个技能管的是落地页、作品集和改版。图像技能也走 npx skills add是。它们和代码技能同放skills/目录同一个CLI就能发现。它不提升模型能力只抬高输出下限模板痕迹被pre-flight清单拦下而不是发出去。挑一个你生成过的页面装上默认技能用同一需求重跑一遍差距一眼可见。【免费下载链接】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),仅供参考
返回列表