企业官网建设流程全解析

如何用 Taste-Skill 快速打造高端 UI：摆脱 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 生成的界面为什么总是一股塑料味？紫蓝渐变、居中大标题、三张一模一样的卡片，你大概率已经看腻了。Taste-Skill 就是冲着这个问题来的：一组开源的 Agent Skills，把你的 AI 代理拉回高端 UI 的正确轨道，从布局、排版、动效到间距逐项约束，专治模板化的 slop 输出。

它不是组件库，也不是主题包。核心是一套可移植的 SKILL.md 指令文件，装进项目后，Codex、Cursor、Claude Code 这些主流编码代理都会自动按规则干活。

5分钟装好，跑通第一个界面

整个过程就一条命令，没有配置文件，不绑定框架。CLI 会自动扫描仓库里的skills/目录：

npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill

只想装某一个的话，用--skill指定安装名（注意是 frontmatter 里的name:字段，不是文件夹名）：

npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill "imagegen-frontend-mobile"

更懒的办法也留着：把任意一个 SKILL.md 拷进项目目录，或直接贴进 ChatGPT / Codex 的对话里都能生效。装完给代理一句"按 skill 生成一个 SaaS 落地页"，你会发现布局和排版明显开始讲分寸了。第一次用，装默认的taste-skill即可，它是最稳的通用起点。

技能矩阵：按场景选你的设计基因

仓库里一共有 12 个技能，但你永远不需要一次全装。正确的问法不是"它有什么"，而是"我现在在干什么"。分两大类：实现类技能出代码，图像类技能只出参考图。

一个常见组合拳：先用imagegen-frontend-web出一版 hero 概念图，挑中意的，再交给编码代理 1:1 落地。技能是往你现有工作流里插的，不强制任何流程。

三个旋钮，调出你要的风格

打开 skills/taste-skill/SKILL.md，文件最顶部有三个 1–10 的旋钮，相当于一个调音台：

• DESIGN_VARIANCE（默认 8）：布局敢多野。低值是居中整洁，高值是不对称、现代感
• MOTION_INTENSITY（默认 6）：动画上多深。低值只有悬停，高值是滚动叙事和磁性物理
• VISUAL_DENSITY（默认 4）：一屏塞多少信息。低值像画廊，高值像飞行员座舱

改参数直接跟模型对话覆盖就行，不用动文件；文件里那组是基线。几组可以直接抄的组合：

• SaaS 落地页 7/6/4：默认基线附近，安全牌，大部分项目不用动
• 政务 / 信任优先网站 3/2/5：布局压到接近对称，动效几乎关掉，信息量略密
• 创意机构 / 品牌站 9/8/3：布局放到最实验，滚动效果拉满，留白多给
• 数据仪表板 4/2/8：对称网格、几乎无动画、密度拉满，衬线字体在这个场景还属于严格禁入

四条设计红线，越线就翻车

技能里全是硬规则，最容易翻车的有四条：

1. 排版红线。别用"Inter + 居中大标题"这种 AI 默认脸，换 Geist、Outfit、Cabinet Grotesk 或 Satoshi；大标题用text-4xl md:text-6xl tracking-tighter leading-none，正文控制在 65ch 宽。仪表板这类技术 UI 严格禁用衬线体。
2. 色彩红线。别让"AI 紫蓝发光"当默认，最多 1 个强调色且饱和度压在 80% 以下，底色走 Zinc / Slate 这类绝对中性。调色板全程锁定——强调色选了玫瑰色，页脚就别冒出一个青色徽章。
3. 布局红线。别默认居中 hero。DESIGN_VARIANCE 超过 4 之后，居中 hero/H1 直接被禁，走 50/50 分屏、左文右图或不对称留白；"左大标题 + 右侧悬浮一段小字"的分栏头也默认禁。
4. 交互状态红线。别交一张"静态图"。加载态用匹配布局尺寸的骨架屏（不是通用圆圈转圈）、空状态要设计过、表单错误要内联提示，按钮:active给-translate-y-[1px]或scale-[0.98]的物理按压感。

动效与性能：好看，更要丝滑

液态玻璃：想要玻璃态，只写backdrop-blur是不够的，要再叠一层 1px 的border-white/10内边框和微弱内阴影，模拟物理边缘的折射——这一步才是"玻璃"和"糊了"的区别。

磁性按钮：MOTION_INTENSITY 超过 5 时可以用。关键在于绝对不要用 React 的useState追踪磁吸悬停这类连续量，别问为什么：鼠标每动一像素就整树重渲染，移动端直接卡死。正确写法是 Framer Motion 的useMotionValue+useTransform，让计算发生在渲染周期之外。

持续微交互：同一阈值下，在头像、状态点、背景里埋入循环微动画（脉冲、浮动、轮播），所有交互元素统一走弹性物理（stiffness: 100, damping: 20），拒绝线性缓动。

性能上还有三条硬约束，都是拿 GPU 换来的：颗粒噪点滤镜只能放在fixed+pointer-events-none的伪元素上，挂到滚动容器等于持续重绘、移动帧率归零；动画只允许碰transform和opacity，top/left/width/height一个都别动；z-50别乱撒，z-index 只留给吸顶导航、模态框、遮罩这类系统层。

真实效果速览

这是仓库 examples 目录里的真实产出——"floria" 一个植物建筑主题工作室站的 hero 区：

值得放大看的有两处：标题的非对称落位，彻底避开了居中的平庸感；字体组合和留白的克制，"高级感"是从排版里长出来的，不是靠颜色堆出来的。

你大概率会问的3件事

React、Vue、Svelte 都能用吗？能。规则全部针对设计意图，不针对某个框架的 API，三套框架原样生效。

SKILL.md 到底是什么？代理能自动加载的可移植指令文件。npx skills add安装、拷进仓库、或者贴进对话，三种姿势等价。

图像生成技能也走同一个安装命令吗？是的。它们和代码技能一起躺在skills/目录下，同一个 CLI 就能发现，不用单独装。

接下来你可以

• 先拿你手上的真实需求，把三个旋钮按场景各拨一次——今天调的那组 SaaS 落地页参数，明天八成还会复用
• 试试brutalist-skill，看看瑞士字体加硬机械的对比度长什么样，和默认 taste-skill 的落差会非常直观
• 或者反着来：先用imagegen-frontend-web出一组概念图，挑中意的再让编码代理落地，"先图后码"是目前最省返工的路径

规则本体在skills/taste-skill/SKILL.md，背后为什么这么定的研究笔记在research/目录里，翻一遍，下次 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