Taste-Skill: 3个参数调出AI前端设计品味新手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你让AI写个落地页它交回来紫色渐变背景加三张居中卡片。AI界面生成快是快就是张张脸熟。Taste-Skill 专治这个一组给 AI 编程助手装的前端设计技能让页面有布局、有排版、有节奏AI前端设计不再靠运气。3分钟跑通第一次装好默认技能丢一段话给它仓库里不是组件库是一堆 SKILL.md 指令文件。助手读到它就会按设计规则干活。实现类技能和图像生成技能用同一条命令安装Codex、Cursor、Claude Code 这些主流编码代理都兼容。# 全量安装所有实现类 图像生成技能 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill # 只装默认技能安装名来自 SKILL.md 的 name 字段不是文件夹名 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend用法更简单。装好后在对话里说清楚做什么、参数给多少就行按设计技能做一个 SaaS 落地页 DESIGN_VARIANCE 8MOTION_INTENSITY 6VISUAL_DENSITY 4。 主色深绿读者是技术负责人。两个提醒。默认技能现在是 v2 实验版要旧版行为就用安装名design-taste-frontend-v1。另外 SKILL.md 是纯文本不想装也可以直接贴进对话。更多说明见 README.md。三个关键参数怎么拨骨架、动静、信息量技能文件顶部有三个旋钮取值都是 1 到 10。出厂默认是 8 / 6 / 4。助手也会根据你的需求从预设矩阵里推推荐值不用背档位记住方向就行。DESIGN_VARIANCE布局变化度管页面敢不敢离开中线。类比拍照构图。拧低是证件照人人对称居中拧高是街拍斜切构图、大块留白、错落排布。默认 8 意味着首屏基本不会居中。MOTION_INTENSITY动效强度像调视频的动感程度。低档是静帧最多 hover 变色中档是滚动进场、0.3 到 0.6 秒的过渡高档是滚动联动和物理感动画。技能里有条铁律声称有动效就必须真有动画做不到就降档不许虚报。VISUAL_DENSITY视觉密度一屏摆多少道菜。低档是画廊一道菜占一屏留白管够高档是驾驶舱能塞都塞适合数据密集的仪表盘。普通落地页放在 3 到 5呼吸感刚好。三个值直接在对话里报数即可不用改文件。为你的项目挑对技能模块按场景选装仓库里有 10 个实现类技能和 3 个图像生成技能。不需要全装按场景各取所需。从零建站。SaaS 落地页、作品集用默认 taste-skill。它先读你的需求、定风格再调参数。走 GPT/Codex 工作流可选 gpt-tasteskill布局变化和动效的规矩更严。老站翻新。用 redesign-skill。先审计现有 UI再修布局、间距和层级。URL 结构、表单字段名这类东西不会悄悄改。高端品牌。用 soft-skill。对比更柔、留白更多、字体更讲究、弹簧式动效。想要反方向的实验风选 brutalist-skill瑞士字体加锐利对比。极简工具。Notion/Linear 那种调子用 minimalist-skill。编辑感排版配色克制。设计稿转代码。先用 imagegen-frontend-web 出设计稿再交给 image-to-code-skill走出图→分析→写代码三步。注意图像类技能含移动端、brandkit只出图不写代码。你的处境装哪个它替你做了什么从零做一个落地页taste-skill读需求、定风格、调参数一条龙老站翻新redesign-skill先审计后动刀URL 和字段名不动高端品牌感soft-skill柔对比、大留白、弹簧式动效Notion 式极简minimalist-skill编辑感排版、克制配色设计稿转代码image-to-code出图、分析、写代码三步走它怎么避开AI味5条可以逐条检查的硬规则技能不是一堆软建议而是带量化标准的硬规则。页面出来后你可以逐条对照色彩强调色最多 1 种饱和度低于 80%。AI 招牌的紫蓝发光被点名禁止。强调色一旦选定全页锁定不许第 7 个区块换颜色。布局变化度大于 4 时首屏不许居中强制左右分屏或不对称留白。同一种布局家族全页最多出现一次。卡片只有表达层级时才配用卡片否则用顶部分隔线或留白代替。密度超过 7 时通用卡片容器直接禁用。排版Inter 不当默认字体。有创意就上衬线体的条件反射同样被禁。强调词语用同字体族的粗体或斜体。细节eyebrow标题上方那行小号大写字母标签每 3 个区块最多 1 个。按钮文字和背景对比度必须达到 4.5:1。首屏标题不超 2 行副文案不超 20 词。这些规则背后有一整套研究支撑。仓库的 research/ 目录记录了完整笔记比如大模型为什么偏爱产出模板页。前后对比重构前后的数据某企业 SaaS 平台用这套技能重构界面核心数据如下指标重构前重构后页面加载3.2 秒1.8 秒首次内容绘制2.1 秒1.2 秒设计一致性65%94%页面加载 3.2 秒降到 1.8 秒。电商侧的样本购物车页改成左右分栏加购按钮配上微动画再修掉对比度问题。购物车转化率从 3.2% 升到 4.7%。常见翻车点结果还是模板脸怎么办**先查参数是否说清楚了。**默认 8 / 6 / 4 不算差但想要更强的节奏感直接报变化度 9、密度 3一句话比写一段形容词有效。**先调 DESIGN_VARIANCE。**布局是骨架骨架站住了密度和动效才有意义。骨架还是居中的时候先加动效再怎么动也像模板。助手老交半成品代码装 output-skill。它强制完整输出禁止用占位注释糊弄。**v2 是实验版。**工作流里哪个环节不对劲就钉住 v1--skill design-taste-frontend-v1。安装名不变重装即升级。**别跳过需求描述。**技能要求助手先用一句话报我怎么读这个需求需求真模糊时它只问一个问题。所以别只丢一句做得好看点。Taste-Skill 的实质是把好品味拆成可执行的参数和能逐条打勾的硬规则让 AI 界面生成可以调控而不是碰运气。今天就动手装一次design-taste-frontend给你手上的页面重新生成一版对照上面 5 条硬规则看看 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），仅供参考 Taste-Skill: 3个参数调出AI前端设计品味，新手3分钟上手指南
Taste-Skill: 3个参数调出AI前端设计品味新手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你让AI写个落地页它交回来紫色渐变背景加三张居中卡片。AI界面生成快是快就是张张脸熟。Taste-Skill 专治这个一组给 AI 编程助手装的前端设计技能让页面有布局、有排版、有节奏AI前端设计不再靠运气。3分钟跑通第一次装好默认技能丢一段话给它仓库里不是组件库是一堆 SKILL.md 指令文件。助手读到它就会按设计规则干活。实现类技能和图像生成技能用同一条命令安装Codex、Cursor、Claude Code 这些主流编码代理都兼容。# 全量安装所有实现类 图像生成技能 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill # 只装默认技能安装名来自 SKILL.md 的 name 字段不是文件夹名 npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend用法更简单。装好后在对话里说清楚做什么、参数给多少就行按设计技能做一个 SaaS 落地页 DESIGN_VARIANCE 8MOTION_INTENSITY 6VISUAL_DENSITY 4。 主色深绿读者是技术负责人。两个提醒。默认技能现在是 v2 实验版要旧版行为就用安装名design-taste-frontend-v1。另外 SKILL.md 是纯文本不想装也可以直接贴进对话。更多说明见 README.md。三个关键参数怎么拨骨架、动静、信息量技能文件顶部有三个旋钮取值都是 1 到 10。出厂默认是 8 / 6 / 4。助手也会根据你的需求从预设矩阵里推推荐值不用背档位记住方向就行。DESIGN_VARIANCE布局变化度管页面敢不敢离开中线。类比拍照构图。拧低是证件照人人对称居中拧高是街拍斜切构图、大块留白、错落排布。默认 8 意味着首屏基本不会居中。MOTION_INTENSITY动效强度像调视频的动感程度。低档是静帧最多 hover 变色中档是滚动进场、0.3 到 0.6 秒的过渡高档是滚动联动和物理感动画。技能里有条铁律声称有动效就必须真有动画做不到就降档不许虚报。VISUAL_DENSITY视觉密度一屏摆多少道菜。低档是画廊一道菜占一屏留白管够高档是驾驶舱能塞都塞适合数据密集的仪表盘。普通落地页放在 3 到 5呼吸感刚好。三个值直接在对话里报数即可不用改文件。为你的项目挑对技能模块按场景选装仓库里有 10 个实现类技能和 3 个图像生成技能。不需要全装按场景各取所需。从零建站。SaaS 落地页、作品集用默认 taste-skill。它先读你的需求、定风格再调参数。走 GPT/Codex 工作流可选 gpt-tasteskill布局变化和动效的规矩更严。老站翻新。用 redesign-skill。先审计现有 UI再修布局、间距和层级。URL 结构、表单字段名这类东西不会悄悄改。高端品牌。用 soft-skill。对比更柔、留白更多、字体更讲究、弹簧式动效。想要反方向的实验风选 brutalist-skill瑞士字体加锐利对比。极简工具。Notion/Linear 那种调子用 minimalist-skill。编辑感排版配色克制。设计稿转代码。先用 imagegen-frontend-web 出设计稿再交给 image-to-code-skill走出图→分析→写代码三步。注意图像类技能含移动端、brandkit只出图不写代码。你的处境装哪个它替你做了什么从零做一个落地页taste-skill读需求、定风格、调参数一条龙老站翻新redesign-skill先审计后动刀URL 和字段名不动高端品牌感soft-skill柔对比、大留白、弹簧式动效Notion 式极简minimalist-skill编辑感排版、克制配色设计稿转代码image-to-code出图、分析、写代码三步走它怎么避开AI味5条可以逐条检查的硬规则技能不是一堆软建议而是带量化标准的硬规则。页面出来后你可以逐条对照色彩强调色最多 1 种饱和度低于 80%。AI 招牌的紫蓝发光被点名禁止。强调色一旦选定全页锁定不许第 7 个区块换颜色。布局变化度大于 4 时首屏不许居中强制左右分屏或不对称留白。同一种布局家族全页最多出现一次。卡片只有表达层级时才配用卡片否则用顶部分隔线或留白代替。密度超过 7 时通用卡片容器直接禁用。排版Inter 不当默认字体。有创意就上衬线体的条件反射同样被禁。强调词语用同字体族的粗体或斜体。细节eyebrow标题上方那行小号大写字母标签每 3 个区块最多 1 个。按钮文字和背景对比度必须达到 4.5:1。首屏标题不超 2 行副文案不超 20 词。这些规则背后有一整套研究支撑。仓库的 research/ 目录记录了完整笔记比如大模型为什么偏爱产出模板页。前后对比重构前后的数据某企业 SaaS 平台用这套技能重构界面核心数据如下指标重构前重构后页面加载3.2 秒1.8 秒首次内容绘制2.1 秒1.2 秒设计一致性65%94%页面加载 3.2 秒降到 1.8 秒。电商侧的样本购物车页改成左右分栏加购按钮配上微动画再修掉对比度问题。购物车转化率从 3.2% 升到 4.7%。常见翻车点结果还是模板脸怎么办**先查参数是否说清楚了。**默认 8 / 6 / 4 不算差但想要更强的节奏感直接报变化度 9、密度 3一句话比写一段形容词有效。**先调 DESIGN_VARIANCE。**布局是骨架骨架站住了密度和动效才有意义。骨架还是居中的时候先加动效再怎么动也像模板。助手老交半成品代码装 output-skill。它强制完整输出禁止用占位注释糊弄。**v2 是实验版。**工作流里哪个环节不对劲就钉住 v1--skill design-taste-frontend-v1。安装名不变重装即升级。**别跳过需求描述。**技能要求助手先用一句话报我怎么读这个需求需求真模糊时它只问一个问题。所以别只丢一句做得好看点。Taste-Skill 的实质是把好品味拆成可执行的参数和能逐条打勾的硬规则让 AI 界面生成可以调控而不是碰运气。今天就动手装一次design-taste-frontend给你手上的页面重新生成一版对照上面 5 条硬规则看看 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），仅供参考