ARTICLE DETAIL

资讯详情

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

Taste-Skill:3 个参数调出高级感,免费给 AI 装上设计品味

Taste-Skill:3 个参数调出高级感,免费给 AI 装上设计品味 Taste-Skill3 个参数调出高级感免费给 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 帮你写个官网结果大概率是这套组合拳紫蓝渐变的标题、中间一排三张等大卡片、深色背景加毛玻璃、Inter 字体配深灰。这些LLM 默认审美已经被大模型用滥了。Taste-Skill 是一个免费开源的 Agent Skills 工具包专门治这个病——它不改你的框架代码而是在提示词层面给 AI 立规矩把布局、字体、配色、动效拉回专业水准阻止AI 生成 UI 一眼假的模板感。先对号入座AI 生成 UI 的 5 个经典翻车姿势如果你最近用过 AI 做前端下面这几条估计条条命中首屏永远居中左右两个按钮雷打不动三张等宽 feature 卡片横排谁都不敢多写一张AI 紫渐变标题 深色 mesh 背景玻璃拟态糊在每一个组件上包括本来不需要它的地方字号没阶梯H2 和正文差点一个粗这不是模型不够聪明而是它偷懒走默认值。Taste-Skill 的思路很直接把反套路的规则写成技能文件让 AI 在动手前先读懂需求再决定用什么设计语言。它的默认技能甚至内置了一份禁止清单默认紫渐变、默认三卡片、默认 Interslate-900一个都不许用。装好只要一步一条命令把 13 个技能模块搬进项目本地没有克隆过的话先拉一份仓库git clone https://gitcode.com/gh_mirrors/ta/taste-skill然后安装全部技能代码类 图像类都走同一条路npx skills add https://github.com/Leonxlnx/taste-skill不想全装加一个--skill参数按名字挑。比如只要默认的主力技能--skill design-taste-frontend。这些技能的本质是 SKILL.md——一个可移植的指令文件Codex、Cursor、Claude Code 这类 Agent 能自动加载嫌麻烦也可以直接复制进项目或者整段贴进 ChatGPT 的对话框里用不挑工具。参数怎么调出高级感VARIANCE / MOTION / DENSITY 三旋钮主力技能把风格压缩成 3 个 1-10 的旋钮改数字就能换气质旋钮管什么拉低的效果拉高的效果DESIGN_VARIANCE布局实验度居中、对称、规整打破对称、分数网格、非对称留白MOTION_INTENSITY动效深度只有 hover 反馈页面基本静止滚动驱动、GSAP 编排、视差VISUAL_DENSITY一屏塞多少信息画廊式大留白高级且克制驾驶舱式高密度1px 线条分隔数据默认值是8 / 6 / 4官方已经调校过的均衡点。按场景换预设更省事做 Linear 式极简产品页三值往 5/3/2 附近压做创意机构官网动效和变化度直接拉到 8-10改版老项目则跟随现有风格动效 1不强行翻新。这些数值不用改文件对话里说一声就行。挑哪个技能13 个模块按场景对号入座技能分两类代码类吐前端代码图像类只吐设计参考图不用全装按活儿挑人。代码类出代码场景选它通用默认最稳taste-skill现为 v2 实验版主要用 GPT / Codex要更狠的反套路gpt-taste手里有设计图要照着实现image-to-code老项目救场先审计 UI 再修redesign-existing-projectsAI 老是写一半、留 TODO 占位符full-output-enforcement视觉方向已定高奢 / 极简 / 粗野风high-end-visual-design / minimalist-ui / industrial-brutalist-ui图像类只出图imagegen-frontend-web 出网站整页参考图首屏、着陆页、多区块imagegen-frontend-mobile 出 iOS / Android 界面流brandkit 出品牌板Logo 方向、色板、字体、应用示例。推荐链路是先图后码图像技能先出参考稿 → 喂给编码 Agent 分析 → 用 image-to-code 落地成代码。提示词里把管线说死一句即可例如follow the skill: generate images, then analyze, then code。成品长什么样一张 Floria 官网说明问题上面首屏截图来自 Taste-Skill 生成的示例站 Floria——左文右图、不等宽的网格、克制的配色、有阶梯的字号。它没有堆渐变和卡片墙但一眼就能看出经过设计。想自己跑一遍装好 taste-skill给 Agent 一句给 XX 产品做一个落地页看它先输出一行设计解读再动手——这就是技能生效的标志。新手最关心的 3 个问题SKILL.md 到底是什么一份给 Agent 读的结构化指令规定它该怎么设计。安装到仓库、复制进项目、贴进对话三种用法等价。换框架就没用了吗不会。规则约束的是设计意图留白、层级、动效节奏不是某个框架的 APIReact、Vue、Svelte 通吃也通吃 Codex、Cursor、Claude Code 这些 Agent。图像技能也要单独装吗不用它们和代码技能同在 skills/ 目录下同一条安装命令就能发现。还在为 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-skill创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表