尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

Taste-Skill 完整指南:给 AI 三个设计旋钮,前端页面不再一眼 AI 味

Taste-Skill 完整指南:给 AI 三个设计旋钮,前端页面不再一眼 AI 味 Taste-Skill 完整指南给 AI 三个设计旋钮前端页面不再一眼 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 是一套给 AI 注入好品味的可移植智能体技能包。让 AI 写落地页或作品集时不再吐出一套紫色渐变、三张等宽卡片、底部配滚动提示的熟面孔界面。项目速写你让大模型帮我写个落地页输出几乎总是那几张脸紫蓝渐变、Inter 字体、居中 Hero、三张对称功能卡再来一个滚动探索小箭头。Taste-Skill 就是冲着这个来的。它的形态是一组 SKILL.md 指令文件不装组件库、不绑框架agent 加载之后改变的是它做设计决策的方式。和主题包、组件库这类工具的区别在于它约束的是设计意图而不是代码模板所以 React、Vue、Svelte 通吃。仓库里十多个技能各管一件事实现类技能出代码图像类技能只出设计参考图web、mobile、品牌板后者配 ChatGPT Images 之类的生成器出图再把画面丢回 Codex、Cursor 或 Claude Code 去落地。一句话定位它是递给 AI 的一本风格说明书 硬规则手册。核心机制拆解三个设计旋钮如何调出你要的界面先读气氛再开口brief 推断与一行 design read解决的问题是模型不看需求就动手。skill 要求 agent 在碰任何代码前先读六类信号页面类型、你用的 vibe 词minimalist、brutalist、premium consumer、你贴的参考、目标受众、已有的品牌资产、以及无声约束公共部门、受监管行业这类约束优先于审美偏好。读完必须先输出一句话结论例如读作面向技术买家的 B2B SaaS 落地页Linear 式极简语言倾向 Tailwind 克制动效。需求真的分叉时才允许问一个问题禁止连环追问也禁止靠猜。三个 1-10 的旋钮布局、动效、密度用自然语言说想要高级感一点是调不动模型的Taste-Skill 把这件事压缩成三个 1-10 的变量基线是 8 / 6 / 4后续直接在对话里覆盖不需要改文件。旋钮管什么取值倾向DESIGN_VARIANCE布局的实验程度低值 对称、居中、干净高值 非对称、瀑布流、大面积留白MOTION_INTENSITY动画深度低值 仅 hover高值 滚动触发、磁性物理VISUAL_DENSITY每屏信息量低值 画廊式空旷高值 仪表盘式密集旋钮不只是摆设后面所有布局、动效、密度规则都被它 gating。比如 variance 高于 4 时居中 Hero 被禁、高非对称布局强制在 768px 以下折叠成单列motion 高于 4 时页面必须真的动起来做不出来就把旋钮降到 3 出一版干净的静态页不许半成品动效。硬禁止清单与预检表AI 痕迹规则书skill 内置了一份从真实生产测试里抓出来的AI 签名清单em-dash长破折号被完全封杀这是生产测试里出现率第一的痕迹三等宽功能卡、用 div 拼的假产品截图、Hero 上的版本号标签、装饰性小圆点、滚动探索提示全部在禁列。动效方面要求每条动画都能一句话说出理由说不出就删。输出代码前还要跑一张六十多项的 pre-flight checklist强调色全页锁一种、圆角体系全页锁一套、深浅主题全页锁一个任何一项过不了就算没做完。实战走读从一句 brief 到完整落地页拿一个独立设计工作室作品集的需求走一遍装技能clone 仓库后用 npx skills add 按 install name 安装默认技能design-taste-frontend也可以直接把 SKILL.md 拷进项目或粘进对话给出 brief页面类型、受众、vibe 词、参考链接已有 logo 或品牌色一并附上agent 先回一行 design read并据此设置三个旋钮值对照设计系统表选底座有官方包就装官方包不手写 CSS 去致敬某个系统纯美学方向玻璃拟态、bento、编辑感则如实标注是借鉴而非官方实现后跑 pre-flight 自检哪项不过就改哪项改完再交付git clone https://gitcode.com/GitHub_Trending/ta/taste-skill仓库里的 Floria 就是用 Taste-Skill 生成的示例首屏能明显看到非居中 Hero 单一强调色 真实图片这套规则的落点。设计背后的考量仓库里有个 research/ 目录专门分析 LLM 为什么输出不完整RLHF 的成本优化带来系统性简洁偏好、训练数据里占位符模式的传播、长任务中的走捷径行为、上下文窗口的输入输出不对称。output-skillfull-output-enforcement就是基于这套研究写的专治TODO 后面自己实现的偷懒输出。技能文件里那些最狠的禁令em-dash 清零、serif 默认禁用、beigebrass 配色封杀都标注了生产轮测中出现率最高的 AI 痕迹说明它们是实测抓出来的不是凭审美拍的。规则措辞也刻意做成二元的因为经验是少用这种说法对模型不生效干脆定为零。上手清单什么场景该用、什么时候别硬用适合落地页、作品集、存量站点改版仪表盘、数据表格、多步表单、管理后台不在适用范围内那些直接上对应的官方设计系统只装用得上的技能别全装。默认 taste-skill 是 v2 实验版依赖旧行为的装 design-taste-frontend-v1 锁定调风格不用改文件对话里直接说布局更野一点、动效收敛agent 会覆盖旋钮值如果 agent 反复截断输出、只给骨架加一个 output-skill 再重跑改版项目用 redesign-skill 先审计现有品牌 token 和信息架构再动手SEO 迁移是改版的第一风险❌ 常见误区❌ 同一项目混两个设计系统Fluent 配 Carbon、shadcn 配 Material一个项目只锁一个❌ 全屏区块用 h-screen应使用 min-h-[100dvh]否则 iOS Safari 地址栏会导致布局跳动❌ 手绘 SVG 图标用 Phosphor、Tabler 这类图标库且全项目只选一家❌ Hero 底部放滚动提示、Hero 里塞版本号标签这些在 pre-flight 里直接判失败设计系统选型小对照你要做的推荐底座微软系企业 SaaS、仪表盘Fluent UIGoogle 风格产品Material 3IBM 风格数据分析CarbonShopify 管理界面Polaris现代 SaaS、组件代码要自己持有Tailwind shadcn/ui必须定制禁止默认状态Taste-Skill 的价值不在提供某套好看的组件而在把什么叫设计感拆成了可检查、可覆盖的显式规则让 AI 的每个设计决策都能被追责。当你在对话里说布局再野一点的时候往往就说明上一版输出得太保守了而这套技能正是把这种保守逐条拆掉的工具。仓库的 block library 正在持续沉淀可落地的模式实现之后大概率会有更多拿来即用的区块可以直接引用。【免费下载链接】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),仅供参考
返回列表