企业官网建设流程全解析

Taste-Skill 完整指南：3 条安装命令与 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

Taste-Skill 是一套面向 AI 编码代理（如 Cursor、Claude Code、Codex 等能替你写代码的 AI 工具）的 Agent Skills，核心作用是把一套经过打磨的布局、排版、动效与间距规则交给模型，让生成出来的页面摆脱千篇一律的模板感。它由十多个独立技能组成：有的直接输出前端代码，有的只产出设计参考图，前者适合落地写码，后者适合先出图再实现的流程。所有技能都以一份叫 SKILL.md 的纯文本文件为载体，装进项目或贴进对话即可生效。

SKILL.md 是什么：一份可移植的设计规则文件

它如何让代理"长记性"

SKILL.md 是一个带元信息的 markdown 指令文件。代理在启动时会扫描并自动加载所在目录下的技能文件，之后写代码时就按文件里的条款执行。你可以把它理解成一份写给模型的"设计规范书"：不需要运行任何服务，不需要改工程配置，文件放哪、规则就跟着哪。

除了走官方安装命令，还有两条更轻的用法：把任意一个 SKILL.md 复制到你项目的仓库里，或整段粘贴进 ChatGPT / Codex 的对话窗口。对于只是临时想试某个风格的人来说，后者成本最低。

它实际约束了哪些东西

从默认技能（文件夹 skills/taste-skill/ 下的 SKILL.md）的条款看，约束集中在四处：

• 布局：不再默认把一切居中堆叠，支持分屏、内容左对齐配资产右置、不对称留白，避免"居中大标题 + 三张等宽卡片"的公式化结构。
• 色彩：整页最多一种强调色，饱和度压在 80% 以下，紫渐变、通用玻璃拟态等高频套路被明确点名禁止。
• 排版：标题与正文有各自的字体与层级要求，点名了过度通用的字体组合（如 Inter 配深灰底），要求有层次而非通篇一个字号感。
• 动效：动画必须走硬件加速（只动 transform 和 opacity，不触发重排），避免生硬的 JS 位移和掉帧。

安装：三种方式把规则交给代理

用 npx skills add 一键安装

官方 CLI 会扫描仓库的 skills/ 目录，代码技能和图像技能用同一条命令装：

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

第一行克隆仓库（也方便你直接翻 SKILL.md 原文），第二行安装全部技能，第三行按技能名只装某一个。注意--skill后跟的是技能在文件头声明的 install name，不一定等于文件夹名。

复制粘贴：最轻量的接入

如果不想引入 CLI，直接把目标技能的 SKILL.md 拷进仓库，或粘到对话里。规则即刻生效，适合快速验证风格是否合意。

版本说明：v2 默认，v1 可固定

默认技能已重写到 v2（实验性）：新增需求解读、设计系统映射、重写前的审计流程和交付前自检。如果你依赖 v1 的旧行为，可安装 install name 为design-taste-frontend-v1的 taste-skill-v1 固定版本；v2 用户重跑一遍安装命令即可完成就地升级，无需改脚本。

十几个技能，按场景选一个就够

实现类技能：输出代码

图像生成类技能：只出图不写码

• imagegen-frontend-web：网站设计图——英雄区、着陆页、多区块版式，重点在排版与间距的艺术指导。
• imagegen-frontend-mobile：iOS / Android / 跨平台的移动端屏幕与连续流程，保证一整套界面的字体可读性和风格一致性。
• brandkit：品牌套件板——logo 方向、色板、字体与品牌延展应用。

这三者与代码技能同在 skills/ 目录下，走同一条npx skills add命令即可被发现和安装。

四个常见组合路径

1. 企业官网：imagegen-frontend-web 出图 → image-to-code-skill 读图实现，拿到既有设计感又能落地的站点。
2. 移动 App：imagegen-frontend-mobile 生成连贯的界面流，交给编码代理逐屏实现。
3. 老项目救场：redesign-skill 先做审计再动手，不必推倒重来。
4. 品牌先行：brandkit 定下 logo、色彩与字体，再交给 taste-skill 统一落地，保证产品视觉一致。

三个调节旋钮：参数怎么调

默认技能文件顶部有三个 1–10 的数字旋钮，所有布局、动效、密度决策都受它们约束。不改文件也能在对话里口头覆盖，作者不希望你手动编辑文件。

DESIGN_VARIANCE：布局实验程度

• 1–3：对称可预测——Flexbox 居中、严格的 12 列对称网格、均等内边距。
• 4–7：开始偏移——元素用负边距（如 -2rem）叠压、图像宽高比刻意不统一、标题左对齐而数据居中。
• 8–10：不对称——瀑布流、CSS Grid 分数单位、大面积留白。

MOTION_INTENSITY：动效深度

• 1–3：静态——没有自动播放的动画，只有 hover 和 active 状态。
• 4–7：流畅 CSS——约 0.3 秒的过渡、级联延迟入场，只动 transform 与 opacity。
• 8–10：高级编排——滚动触发显现、视差、磁性跟随，配合 Framer Motion 一类的钩子库。

VISUAL_DENSITY：单位视口的信息量

• 1–3：画廊模式——大块留白、超大区块间距，高端克制。
• 4–7：常规 Web 应用的标准间距。
• 8–10：驾驶舱模式——小内边距、去卡片框、数据之间只用 1px 线条分隔、数字全部等宽字体。

怎么选

作者提供了场景对照表：要"极简 / Linear 风"就把三项都往低拧（约 5/3/2）；"高端消费品"取 7–8 / 5–7 / 3–4；"实验性作品集"直接拉满 9–10 / 8–10 / 3–4；政府或合规类站点则压低到 3 / 2 / 5 一带。经验上，默认基线是 8 / 6 / 4，多数营销型页面从这组值开始再微调即可。

适用范围与常见疑问

框架无关，代理无关

规则约束的是设计意图，而不是某个框架的 API，所以 React、Vue、Svelte 都能用；技能本身也不绑定特定代理框架。它和常见"AI 设计提示词"的区别在于：多个按场景拆分的专职变体、关键技能内置可调旋钮，以及基于专门研究（仓库 research/ 目录记录了模型偷懒、输出截断等问题的成因与对策）沉淀出的反套路规则。

两个实际会碰到的点

• 模型老是输出半成品？加装 output-skill，强制完整输出、禁占位注释。
• 图像技能算不算同一套安装体系？算。代码技能与图像技能都在 skills/ 下，同一个 CLI 全部可发现。

项目采用 MIT 许可，技能文件均可自行裁剪；各技能的完整对照表见仓库内 skills/llms.txt。

【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill