Taste-Skill 实战指南为 AI 生成有设计感的前端界面开源技能组【免费下载链接】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 是一组开源 AI 技能让 Codex、Cursor、Claude Code 等编码代理生成不模板化的前端界面并附带设计参考图生成技能。你用 AI 写落地页或作品集时从今天起就能拿到更专业的前端产出。适合谁四类典型用法你用 AI 写创业落地页但产出总是千篇一律的模板感。你有一个已上线的网站要修布局、间距和层级又不能破坏品牌。你在 GPT/Codex 里做页面希望布局变化和动效约束更严格。你只需要先出一批设计参考图网页、移动端、品牌套件对齐方向后再让代理写代码。工作方式先读懂需求再动代码每个技能文件SKILL.md都会给代理一套固定流程读懂需求先判断页面类型SaaS 落地页、作品集、重设计等、你提到的风格词、参考截图、目标受众和已有品牌资产然后给出一行设计解读。需求有歧义时只追问一个问题不靠猜。设定参数默认技能 taste-skill 用三个 1-10 参数控制输出——DESIGN_VARIANCE 管布局实验度1 完全对称10 艺术化混乱MOTION_INTENSITY 管动效深度1 静态10 电影级VISUAL_DENSITY 管每屏信息量1 画廊式留白10 驾驶舱式密集。基线为 8/6/4也可在对话中口头覆盖。选择设计底座需求对应官方设计系统Material、Fluent、Carbon 等时要求直接用官方组件包而非手写 CSS 模仿纯风格方向玻璃拟态、Bento、粗野主义则用原生 CSS 实现并在注释里如实标注。生成或改造新项目直接产出代码重设计项目先审计现有 UI再按优先级修复且不擅自改动 URL 结构、导航文案和表单字段名。输出检查交付前过一遍最终预检清单任何一项不通过就不能算完成。模块怎么选按任务匹配而不是按目录挑每个技能只做一件事不需要一次全装。你的任务安装名注意事项新建前端默认taste-skilldesign-taste-frontendv2 实验版含参数机制与预检清单必须保持 v1 的原有行为taste-skill-v1design-taste-frontend-v1仅当 v2 改变了你依赖的流程时固定使用在 GPT/Codex 下要更严规则gpt-tasteskillgpt-taste更高的布局变化与动效约束图优先参考图 → 分析 → 代码image-to-code-skillimage-to-code提示词里写明先出图、再分析、再写码现有项目重设计redesign-skillredesign-existing-projects先审计 UI 问题再修布局、间距、层级视觉方向已定只强化风格soft-skill / minimalist-skill / brutalist-skill高端柔和、极简编辑、工业粗野三个方向输出总被截断、留占位注释output-skillfull-output-enforcement强制完整输出只要设计图不要代码imagegen-frontend-web / imagegen-frontend-mobile / brandkit网页、移动端、品牌套件三类参考图安装三种接入方式一键安装全部技能npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill只装单个技能传 SKILL 文件 frontmatter 里的安装名不是文件夹名npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend离线或需要自定义时把任意SKILL.md复制进项目或直接粘进 ChatGPT / Codex 对话即可。已装 v1 的用户重跑一次安装命令就能升到 v2安装名不变。场景组合从新站到重设计场景 1主流 SaaS 落地页目标做出不像 AI 模板的专业营销页。建议组合taste-skill。参数DESIGN_VARIANCE 7 / MOTION_INTENSITY 6 / VISUAL_DENSITY 4技能文件里的预设值。预期结果主标题不超过两行、CTA 无需滚动可见、整页至少 4 种不同版式家族、全站一个强调色。场景 2设计师作品集目标编辑感强、作品突出的展示站。建议组合taste-skill想更贵气可加 soft-skill。参数8 / 7 / 3。注意点留白更多、动效克制把视觉重心让给作品本身。场景 3现有项目重设计目标修旧站但不破坏品牌。建议组合redesign-skill。注意点在 preserve 与 overhaul 之间选择preserve 沿用现有参数、动效 1overhaul 则变化与动效各 2URL 结构、导航文案、表单字段名不动。预期结果先拿到一份 UI 审计再按优先级修布局、间距、层级与样式。场景 4先出参考图再写码目标先用图对齐设计方向再实现代码。建议组合image-to-code-skill或用 imagegen-frontend-web 出图后交给 Codex、Cursor、Claude Code。注意点提示词写明 follow the skill: generate images, then analyze, then code。预期结果先得到一批符合调性的参考图代码实现对齐这些图。质量检查交付前过这些项避开这些坑v2 的最终预检清单是最后一道闸高频检查项包括参数有声明、有理由而不是默默用默认 8/6/4。一致性锁定整页单一主题、单一强调色、单一圆角体系。可读性CTA 与表单元素对比度达 WCAG AA没有白字压白底。版式不重复八个区块至少四种不同版式连续三段不许同一种左右分栏。动效诚实参数大于 4 页面必须真的动大于 3 要支持减少动效回退。排除AI 痕迹AI 紫渐变、三张等宽功能卡、装饰性破折号、手写 SVG 图标都不行。容易踩的坑超出范围的页面别用它仪表盘、数据表格、多步表单、代码编辑器、原生移动端不在默认技能覆盖内。别混用设计系统一个项目一个体系有官方包的不要手写 CSS 仿制。v2 仍是实验版后续版本接口可能微调流程需要稳定时固定 v1。版本怎么选什么时候用 v2什么时候用 v1新装默认就是 v2实验版它是 v1 的大改新增需求解读、设计系统映射、暗色模式协议、重设计协议与最终预检清单新项目建议直接用它。如果某项目长期依赖 v1 的精确行为v2 又改动过你的流程就安装design-taste-frontend-v1固定旧版。升级只需重跑安装命令安装名不变、无需改脚本。两版完整差异见 changelog。常见问题支持 React、Vue、Svelte 吗支持。规则约束的是设计意图而不是某个框架 API跨框架通用。SKILL.md 是什么代理可直接加载的便携指令文件可以用 CLI 安装、复制进仓库也可以直接粘进对话。图像生成技能和代码技能装法一样吗一样。它们都在同一个 skills 目录下npx skills add会一起发现。只想用某个功能可以只装那个吗可以。按--skill指定安装名即可各技能彼此独立。动效参数写了但页面不动怎么办清单里明确禁止只声明不做参数大于 4 就必须实现动画否则把参数降下来交付静态版。项目资源技能集合每个技能一个 SKILL.mdskills/v1 到 v2 的完整差异与原因CHANGELOG.md设计背后的调研笔记research/许可证LICENSE【免费下载链接】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 实战指南：为 AI 生成有设计感的前端界面开源技能组
Taste-Skill 实战指南为 AI 生成有设计感的前端界面开源技能组【免费下载链接】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 是一组开源 AI 技能让 Codex、Cursor、Claude Code 等编码代理生成不模板化的前端界面并附带设计参考图生成技能。你用 AI 写落地页或作品集时从今天起就能拿到更专业的前端产出。适合谁四类典型用法你用 AI 写创业落地页但产出总是千篇一律的模板感。你有一个已上线的网站要修布局、间距和层级又不能破坏品牌。你在 GPT/Codex 里做页面希望布局变化和动效约束更严格。你只需要先出一批设计参考图网页、移动端、品牌套件对齐方向后再让代理写代码。工作方式先读懂需求再动代码每个技能文件SKILL.md都会给代理一套固定流程读懂需求先判断页面类型SaaS 落地页、作品集、重设计等、你提到的风格词、参考截图、目标受众和已有品牌资产然后给出一行设计解读。需求有歧义时只追问一个问题不靠猜。设定参数默认技能 taste-skill 用三个 1-10 参数控制输出——DESIGN_VARIANCE 管布局实验度1 完全对称10 艺术化混乱MOTION_INTENSITY 管动效深度1 静态10 电影级VISUAL_DENSITY 管每屏信息量1 画廊式留白10 驾驶舱式密集。基线为 8/6/4也可在对话中口头覆盖。选择设计底座需求对应官方设计系统Material、Fluent、Carbon 等时要求直接用官方组件包而非手写 CSS 模仿纯风格方向玻璃拟态、Bento、粗野主义则用原生 CSS 实现并在注释里如实标注。生成或改造新项目直接产出代码重设计项目先审计现有 UI再按优先级修复且不擅自改动 URL 结构、导航文案和表单字段名。输出检查交付前过一遍最终预检清单任何一项不通过就不能算完成。模块怎么选按任务匹配而不是按目录挑每个技能只做一件事不需要一次全装。你的任务安装名注意事项新建前端默认taste-skilldesign-taste-frontendv2 实验版含参数机制与预检清单必须保持 v1 的原有行为taste-skill-v1design-taste-frontend-v1仅当 v2 改变了你依赖的流程时固定使用在 GPT/Codex 下要更严规则gpt-tasteskillgpt-taste更高的布局变化与动效约束图优先参考图 → 分析 → 代码image-to-code-skillimage-to-code提示词里写明先出图、再分析、再写码现有项目重设计redesign-skillredesign-existing-projects先审计 UI 问题再修布局、间距、层级视觉方向已定只强化风格soft-skill / minimalist-skill / brutalist-skill高端柔和、极简编辑、工业粗野三个方向输出总被截断、留占位注释output-skillfull-output-enforcement强制完整输出只要设计图不要代码imagegen-frontend-web / imagegen-frontend-mobile / brandkit网页、移动端、品牌套件三类参考图安装三种接入方式一键安装全部技能npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill只装单个技能传 SKILL 文件 frontmatter 里的安装名不是文件夹名npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend离线或需要自定义时把任意SKILL.md复制进项目或直接粘进 ChatGPT / Codex 对话即可。已装 v1 的用户重跑一次安装命令就能升到 v2安装名不变。场景组合从新站到重设计场景 1主流 SaaS 落地页目标做出不像 AI 模板的专业营销页。建议组合taste-skill。参数DESIGN_VARIANCE 7 / MOTION_INTENSITY 6 / VISUAL_DENSITY 4技能文件里的预设值。预期结果主标题不超过两行、CTA 无需滚动可见、整页至少 4 种不同版式家族、全站一个强调色。场景 2设计师作品集目标编辑感强、作品突出的展示站。建议组合taste-skill想更贵气可加 soft-skill。参数8 / 7 / 3。注意点留白更多、动效克制把视觉重心让给作品本身。场景 3现有项目重设计目标修旧站但不破坏品牌。建议组合redesign-skill。注意点在 preserve 与 overhaul 之间选择preserve 沿用现有参数、动效 1overhaul 则变化与动效各 2URL 结构、导航文案、表单字段名不动。预期结果先拿到一份 UI 审计再按优先级修布局、间距、层级与样式。场景 4先出参考图再写码目标先用图对齐设计方向再实现代码。建议组合image-to-code-skill或用 imagegen-frontend-web 出图后交给 Codex、Cursor、Claude Code。注意点提示词写明 follow the skill: generate images, then analyze, then code。预期结果先得到一批符合调性的参考图代码实现对齐这些图。质量检查交付前过这些项避开这些坑v2 的最终预检清单是最后一道闸高频检查项包括参数有声明、有理由而不是默默用默认 8/6/4。一致性锁定整页单一主题、单一强调色、单一圆角体系。可读性CTA 与表单元素对比度达 WCAG AA没有白字压白底。版式不重复八个区块至少四种不同版式连续三段不许同一种左右分栏。动效诚实参数大于 4 页面必须真的动大于 3 要支持减少动效回退。排除AI 痕迹AI 紫渐变、三张等宽功能卡、装饰性破折号、手写 SVG 图标都不行。容易踩的坑超出范围的页面别用它仪表盘、数据表格、多步表单、代码编辑器、原生移动端不在默认技能覆盖内。别混用设计系统一个项目一个体系有官方包的不要手写 CSS 仿制。v2 仍是实验版后续版本接口可能微调流程需要稳定时固定 v1。版本怎么选什么时候用 v2什么时候用 v1新装默认就是 v2实验版它是 v1 的大改新增需求解读、设计系统映射、暗色模式协议、重设计协议与最终预检清单新项目建议直接用它。如果某项目长期依赖 v1 的精确行为v2 又改动过你的流程就安装design-taste-frontend-v1固定旧版。升级只需重跑安装命令安装名不变、无需改脚本。两版完整差异见 changelog。常见问题支持 React、Vue、Svelte 吗支持。规则约束的是设计意图而不是某个框架 API跨框架通用。SKILL.md 是什么代理可直接加载的便携指令文件可以用 CLI 安装、复制进仓库也可以直接粘进对话。图像生成技能和代码技能装法一样吗一样。它们都在同一个 skills 目录下npx skills add会一起发现。只想用某个功能可以只装那个吗可以。按--skill指定安装名即可各技能彼此独立。动效参数写了但页面不动怎么办清单里明确禁止只声明不做参数大于 4 就必须实现动画否则把参数降下来交付静态版。项目资源技能集合每个技能一个 SKILL.mdskills/v1 到 v2 的完整差异与原因CHANGELOG.md设计背后的调研笔记research/许可证LICENSE【免费下载链接】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），仅供参考