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-skill你多半遇到过这种体验让 AI 编码工具做个落地页出来的却是居中 hero、三张一模一样的卡片、AI 紫渐变。Taste-Skill 就是一组可安装的 Agent Skills装好后你的 agentCodex、Cursor、Claude Code 等在写界面时会遵守一套更严格的布局、排版、色彩和动效规则输出不再长一个模子。它是什么一组让 agent有审美的指令文件Taste-Skill 不是框架也不直接替你生成代码它是一批SKILL.md指令文件agent 在构建界面时自动加载。skills/目录下共 13 个技能分两类实现类产出前端代码和imagegen 类只出设计图无代码主力技能 taste-skill 面向落地页、个人站、改版场景明确不适用仪表盘、数据表格、多步表单、代码编辑器、原生移动端规则针对设计意图而非某个框架 APIReact、Vue、Svelte 都能用每个技能只干一件事不需要一次全装安装与首次跑通两条命令的事没有构建步骤也不涉及依赖管理跑完npx命令技能就进入你 agent 的 skills 目录。npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill这条会安装全部技能。如果只要默认的 taste-skill加--skill参数传的是文件 frontmatter 里name:字段的安装名不是目录名npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend不想走 CLI也可以把任意一个 SKILL.md 复制进项目或直接粘贴到 ChatGPT/Codex 对话里当前默认是 v2实验版。装过旧版的直接重跑命令即可原地升级要锁定 v1 行为用--skill design-taste-frontend-v1两版差异见 CHANGELOG.md到这里你应该已经装好了。接下来照旧描述你想要的页面agent 会自动加载技能能力巡礼按使用场景挑而不是按功能名到底选哪个技能先回答一个问题你要拿到的是能打开的页面还是给人看的图从零搭建一个页面用 taste-skill安装名design-taste-frontend先读需求、推断设计方向再动手写代码GPT/Codex 用户可换更严格的 gpt-tasteskill安装名gpt-taste更高的布局变化、更强的 GSAP 动效方向改造已有项目用 redesign-skill安装名redesign-existing-projects先扫描代码库审计字体、色彩、布局问题然后在现有技术栈上做定向修复不推倒重写taste-skill v2 也内置了改版协议会先分辨新建 / 保留品牌 / 整体推翻三种模式且 URL 结构、表单字段名、法务文案这类东西默认不动只要设计图不要代码imagegen-frontend-web 出网站设计稿imagegen-frontend-mobile 出移动端屏幕和流程brandkit 出品牌工具包面板这三个技能只产图把图交给你的编码 agent 去实现想出图、分析、写码一气呵成用 image-to-code-skill安装名image-to-code决定效果的 3 个参数怎么调taste-skill 文件顶部有 3 个 1-10 的旋钮直接决定输出的风格取向DESIGN_VARIANCE: 8 # 布局实验性 MOTION_INTENSITY: 6 # 动画深度 VISUAL_DENSITY: 4 # 每屏信息量DESIGN_VARIANCE默认 8调低是居中、对称、干净调高是不对称、大留白、错落网格。大于 4 时居中的 hero 区块被禁止MOTION_INTENSITY默认 6调低只剩悬停和按压反馈调高出现滚动驱动、磁性微物理。大于 3 时必须兼容prefers-reduced-motionVISUAL_DENSITY默认 4调低是画廊式留白调高变成数据密集布局大于 7 时禁用通用卡片容器不用手改文件v2 流程里 agent 会按你的需求在对话中调这 3 个值你说一句再克制一点就行案例拆解Floria 页面做对了什么这是用 taste-skill 生成的 Floria植物建筑主题落地页完整素材在仓库 examples/ 目录里。对照技能规则能看到几条具体落点hero 是左文右图的非对称构图而不是默认的居中大标题对应较高的 DESIGN_VARIANCE标题 BotanicArchitecture. 用同族字体的粗体加斜体做强调没有混入突兀的衬线字纯黑背景配单一白色 CTA强调色从头用到尾没有 AI 紫渐变商品图是真实摄影图而不是用 div 拼出来的假截图后者被技能明确禁止常见坑与避坑建议这些坑都写在文档和 changelog 里踩之前先知道能省不少返工。v2 是实验版规则还在迭代。项目依赖旧行为时先锁定 v1等 v2.0.0 稳定版再升别用错场景拿 taste-skill 去做仪表盘或多步表单输出一定跑偏这类页面该用 Fluent、Carbon 等官方设计系统imagegen 技能不出代码imagegen-*只产图记得把结果交接给编码 agent否则你手里只有图agent 跳过设计解读时拦一下v2 要求写码前先声明一行设计推断需求歧义时最多只问一个澄清问题看到它直接开写先打断常见问答React、Vue、Svelte 都能用吗能。规则针对设计意图不绑定任何框架 API。SKILL.md 到底是什么agent 可自动加载的可移植指令文件用npx skills add安装或复制进仓库、贴进对话都行。imagegen 技能也用同一条命令装吗是。它们和代码技能同在 skills/ 目录同一个npx skills add就能发现。13 个技能都要装吗不要。每个技能只干一件事建议只从默认 taste-skill 开始需要时再按场景加装。下一步Taste-Skill 就是给 AI 的一组审美约束文件装、选、调三步就能过第一轮。想深入规则细节读 skills/taste-skill/SKILL.md想看这些规则背后的反模板化研究看 research/想翻完整页面效果图看 examples/floria-full.webp。【免费下载链接】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-skill你多半遇到过这种体验让 AI 编码工具做个落地页出来的却是居中 hero、三张一模一样的卡片、AI 紫渐变。Taste-Skill 就是一组可安装的 Agent Skills装好后你的 agentCodex、Cursor、Claude Code 等在写界面时会遵守一套更严格的布局、排版、色彩和动效规则输出不再长一个模子。它是什么一组让 agent有审美的指令文件Taste-Skill 不是框架也不直接替你生成代码它是一批SKILL.md指令文件agent 在构建界面时自动加载。skills/目录下共 13 个技能分两类实现类产出前端代码和imagegen 类只出设计图无代码主力技能 taste-skill 面向落地页、个人站、改版场景明确不适用仪表盘、数据表格、多步表单、代码编辑器、原生移动端规则针对设计意图而非某个框架 APIReact、Vue、Svelte 都能用每个技能只干一件事不需要一次全装安装与首次跑通两条命令的事没有构建步骤也不涉及依赖管理跑完npx命令技能就进入你 agent 的 skills 目录。npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill这条会安装全部技能。如果只要默认的 taste-skill加--skill参数传的是文件 frontmatter 里name:字段的安装名不是目录名npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend不想走 CLI也可以把任意一个 SKILL.md 复制进项目或直接粘贴到 ChatGPT/Codex 对话里当前默认是 v2实验版。装过旧版的直接重跑命令即可原地升级要锁定 v1 行为用--skill design-taste-frontend-v1两版差异见 CHANGELOG.md到这里你应该已经装好了。接下来照旧描述你想要的页面agent 会自动加载技能能力巡礼按使用场景挑而不是按功能名到底选哪个技能先回答一个问题你要拿到的是能打开的页面还是给人看的图从零搭建一个页面用 taste-skill安装名design-taste-frontend先读需求、推断设计方向再动手写代码GPT/Codex 用户可换更严格的 gpt-tasteskill安装名gpt-taste更高的布局变化、更强的 GSAP 动效方向改造已有项目用 redesign-skill安装名redesign-existing-projects先扫描代码库审计字体、色彩、布局问题然后在现有技术栈上做定向修复不推倒重写taste-skill v2 也内置了改版协议会先分辨新建 / 保留品牌 / 整体推翻三种模式且 URL 结构、表单字段名、法务文案这类东西默认不动只要设计图不要代码imagegen-frontend-web 出网站设计稿imagegen-frontend-mobile 出移动端屏幕和流程brandkit 出品牌工具包面板这三个技能只产图把图交给你的编码 agent 去实现想出图、分析、写码一气呵成用 image-to-code-skill安装名image-to-code决定效果的 3 个参数怎么调taste-skill 文件顶部有 3 个 1-10 的旋钮直接决定输出的风格取向DESIGN_VARIANCE: 8 # 布局实验性 MOTION_INTENSITY: 6 # 动画深度 VISUAL_DENSITY: 4 # 每屏信息量DESIGN_VARIANCE默认 8调低是居中、对称、干净调高是不对称、大留白、错落网格。大于 4 时居中的 hero 区块被禁止MOTION_INTENSITY默认 6调低只剩悬停和按压反馈调高出现滚动驱动、磁性微物理。大于 3 时必须兼容prefers-reduced-motionVISUAL_DENSITY默认 4调低是画廊式留白调高变成数据密集布局大于 7 时禁用通用卡片容器不用手改文件v2 流程里 agent 会按你的需求在对话中调这 3 个值你说一句再克制一点就行案例拆解Floria 页面做对了什么这是用 taste-skill 生成的 Floria植物建筑主题落地页完整素材在仓库 examples/ 目录里。对照技能规则能看到几条具体落点hero 是左文右图的非对称构图而不是默认的居中大标题对应较高的 DESIGN_VARIANCE标题 BotanicArchitecture. 用同族字体的粗体加斜体做强调没有混入突兀的衬线字纯黑背景配单一白色 CTA强调色从头用到尾没有 AI 紫渐变商品图是真实摄影图而不是用 div 拼出来的假截图后者被技能明确禁止常见坑与避坑建议这些坑都写在文档和 changelog 里踩之前先知道能省不少返工。v2 是实验版规则还在迭代。项目依赖旧行为时先锁定 v1等 v2.0.0 稳定版再升别用错场景拿 taste-skill 去做仪表盘或多步表单输出一定跑偏这类页面该用 Fluent、Carbon 等官方设计系统imagegen 技能不出代码imagegen-*只产图记得把结果交接给编码 agent否则你手里只有图agent 跳过设计解读时拦一下v2 要求写码前先声明一行设计推断需求歧义时最多只问一个澄清问题看到它直接开写先打断常见问答React、Vue、Svelte 都能用吗能。规则针对设计意图不绑定任何框架 API。SKILL.md 到底是什么agent 可自动加载的可移植指令文件用npx skills add安装或复制进仓库、贴进对话都行。imagegen 技能也用同一条命令装吗是。它们和代码技能同在 skills/ 目录同一个npx skills add就能发现。13 个技能都要装吗不要。每个技能只干一件事建议只从默认 taste-skill 开始需要时再按场景加装。下一步Taste-Skill 就是给 AI 的一组审美约束文件装、选、调三步就能过第一轮。想深入规则细节读 skills/taste-skill/SKILL.md想看这些规则背后的反模板化研究看 research/想翻完整页面效果图看 examples/floria-full.webp。【免费下载链接】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），仅供参考