Hoppscotch安装配置教程：3条命令跑通你的第一个API请求
2026/8/29 12:43:13
AI界面设计避坑实操：Taste-Skill 装好、调好 3 个参数、过一遍预检清单
【免费下载链接】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 是一套开源设计技能文件：它把色彩系统、布局约束、发布前检查写进 SKILL.md，AI 编码代理加载后，生成的 AI 界面设计不再千篇一律。这篇文章按「先上手、再讲规则」的顺序，覆盖安装、参数调节和主要设计规则。
AI 生成的页面为什么总是一个样
让 AI 画一个落地页，第一屏经常是紫蓝渐变背景，下面跟三张等宽功能卡片，中间一个大标题，Inter 字体，浅灰底色。换个项目再生成，还是这套组合。这不是偶然，模型在复现训练数据里的高频样式，而这类样式恰好集中在大量模板和教程里。
Taste-Skill 的做法不是给 AI 讲美学课，而是把这些"默认长相"逐条列成禁令，并给出替代方案。完整规则写在仓库的 skills/taste-skill/SKILL.md，代理加载后规则即生效，覆盖 React、Vue、Svelte 等框架，不绑定某个组件库。
安装步骤：一条命令加载设计技能
官方安装方式用npx skills add，它会扫描仓库skills/目录，代码技能和图像生成技能用同一套命令安装：
# 安装全部技能 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 复制进项目、或直接粘贴进 AI 对话也能用。默认技能现已升到 v2（实验版），v1 保留为design-taste-frontend-v1；旧版本重装一遍同名命令即可原地升级，两版差异记录在 CHANGELOG.md。
三个参数怎么调：布局、动效、密度
默认技能文件顶部有三个旋钮，取值 1 到 10，基线是 8 / 6 / 4，之后的布局、动效、密度决策都以它们为准：
DESIGN_VARIANCE: 8 # 布局实验性 MOTION_INTENSITY: 6 # 动画深度 VISUAL_DENSITY: 4 # 单屏信息量| 参数 | 控制什么 | 1 的含义 | 10 的含义 |
|---|---|---|---|
| DESIGN_VARIANCE | 布局实验性 | 完全对称 | 自由不对称 |
| MOTION_INTENSITY | 动画深度 | 静态，仅悬停反馈 | 滚动驱动、物理效果 |
| VISUAL_DENSITY | 单屏信息量 | 画廊式留白 | 驾驶舱式密集数据 |
调参不用背表，先看页面类型。几组常见组合：
| 页面类型 | VARIANCE | MOTION | DENSITY |
|---|---|---|---|
| 通用 SaaS 落地页 | 7 | 6 | 4 |
| 创意机构 / 代理 | 9 | 8 | 3 |
| 极简编辑风 | 5-6 | 3-4 | 2-3 |
| 信任优先 / 政务类 | 3-4 | 2-3 | 4-5 |
数值在对话里覆盖即可，不用改文件，直接说"动效参数降到 3"这类话就行。
色彩与布局：几条直接影响成品的硬规则
色彩：一个强调色，一套调色板
- 强调色最多 1 个，饱和度默认不超过 80%。Lila 规则把 AI 紫蓝渐变列为默认禁用项：底用 Zinc、Slate、Stone 这类中性色，配翠绿、电蓝、深玫瑰、焦橙其中一种高对比强调色。
- 色彩一致性锁：强调色一经选定，全页一致使用。暖灰页面第七屏突然冒出蓝色 CTA，玫瑰色页面页脚出现青色徽章，都不合格。
- 一个项目一套调色板，暖灰和冷灰不要混用。
- 禁用纯黑 #000000 和纯白 #ffffff，用近黑（zinc-950）和近白保住层次。
- 对比度是硬指标：正文 4.5:1，大字号文本（18px 及以上）3:1，按 WCAG AA 执行；白底白字按钮、白底上漂白的表单都属于不通过。
布局：一组"不要"清单
- 三张等宽卡片是默认禁用布局，三项内容改用非对称网格。
- Inter 不做默认字体；衬线体也不做默认，Fraunces 和 Instrument Serif 是重灾区，直接禁。
- Hero 必须落在首屏内：标题最多 2 行，副文案不超过 20 词，CTA 不滚动可见就算不合格。
- 桌面端导航单行，高度不超过 80px。
- 区块上方的小号大写字母标签（eyebrow）每 3 个区块最多 1 个，每节都挂是典型模板味。
- em dash（破折号）全面禁用，用逗号、句号或连字符替代。
每条规则都留了例外通道。比如品牌本身是紫色，Lila 规则就让位，但要求整页调色板保持一致，而不是随手甩一个渐变。
技能文件怎么选：对照场景来
每个技能只负责一件事，不必全装：
| 场景 | 技能（安装名） |
|---|---|
| 新建落地页、作品集，默认首选 | taste-skill（design-taste-frontend） |
| 已有项目改版，先审计后修改 | redesign-skill（redesign-existing-projects） |
| 极简编辑风 | minimalist-skill（minimalist-ui） |
| 高端、克制、低对比 | soft-skill（high-end-visual-design） |
| 工业粗野风 | brutalist-skill（industrial-brutalist-ui） |
| AI 输出总被截断、只交付半成品 | output-skill（full-output-enforcement） |
| 先生成参考图再写代码 | image-to-code-skill（image-to-code） |
| 交付物是图（网页参考稿、移动端流程、品牌套件） | imagegen-frontend-web、imagegen-frontend-mobile、brandkit |
图像类技能只出图不出码，配合 ChatGPT Images 之类的生成工具使用，再把成图交给编码代理实现。想追溯这些规则为什么这么定，仓库里的 research/ 目录存着针对 LLM 设计惰性的研究笔记。
发布前检查清单：交付前逐项过
AI 交活前，用下面这份清单复核，任何一项不过就回炉：
- 开头用一句话声明了设计判断：什么类型的页面、给谁看、什么风格
- 三个参数值明确给出，而不是悄悄用了默认值
- 整页只有一种主题（浅色或深色），没有区块中途翻面
- 强调色、圆角体系各锁定一套，全页一致
- 每个 CTA 文字对背景可读，不存在白底白字，桌面端标签不换行
- Hero 标题不超过 2 行，副文案不超过 20 词，CTA 首屏可见
- 没有三张等宽卡片，没有连续三节图文左右交替
- 没有紫蓝渐变，没有用 div 拼的假截图，没有 John Doe、Acme 式占位内容
- 有动效就处理了 prefers-reduced-motion，动画属性只动 transform 和 opacity
- 浅色和深色两种模式都实际打开看过
这份清单同样写在 SKILL.md 里，代理加载技能后会在输出前逐项执行，任何一项不能勾上就视为未完成。
Taste-Skill 做的事情其实很具体：把"别做得像模板"翻译成一组可检查的规则，让生成方和验收方共用同一把尺子。先装上跑一页，再根据成品回调那三个参数，就能进入正常的迭代节奏。
【免费下载链接】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），仅供参考