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-skillTaste-Skill 是一套开源设计技能文件它把色彩系统、布局约束、发布前检查写进 SKILL.mdAI 编码代理加载后生成的 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单屏信息量画廊式留白驾驶舱式密集数据调参不用背表先看页面类型。几组常见组合页面类型VARIANCEMOTIONDENSITY通用 SaaS 落地页764创意机构 / 代理983极简编辑风5-63-42-3信任优先 / 政务类3-42-34-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-skilldesign-taste-frontend已有项目改版先审计后修改redesign-skillredesign-existing-projects极简编辑风minimalist-skillminimalist-ui高端、克制、低对比soft-skillhigh-end-visual-design工业粗野风brutalist-skillindustrial-brutalist-uiAI 输出总被截断、只交付半成品output-skillfull-output-enforcement先生成参考图再写代码image-to-code-skillimage-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），仅供参考 AI界面设计避坑实操：Taste-Skill 装好、调好 3 个参数、过一遍预检清单
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-skillTaste-Skill 是一套开源设计技能文件它把色彩系统、布局约束、发布前检查写进 SKILL.mdAI 编码代理加载后生成的 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单屏信息量画廊式留白驾驶舱式密集数据调参不用背表先看页面类型。几组常见组合页面类型VARIANCEMOTIONDENSITY通用 SaaS 落地页764创意机构 / 代理983极简编辑风5-63-42-3信任优先 / 政务类3-42-34-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-skilldesign-taste-frontend已有项目改版先审计后修改redesign-skillredesign-existing-projects极简编辑风minimalist-skillminimalist-ui高端、克制、低对比soft-skillhigh-end-visual-design工业粗野风brutalist-skillindustrial-brutalist-uiAI 输出总被截断、只交付半成品output-skillfull-output-enforcement先生成参考图再写代码image-to-code-skillimage-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），仅供参考