Taste-Skill用 3 个参数把 AI 写出的前端调出专业感【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skillAI 帮你写的页面总长一个样居中 Hero、三张卡片、紫色渐变。Taste-Skill 是一套面向 Codex、Cursor、Claude Code 等 AI 编码代理的前端 Agent Skills装上之后同一套 AI 写出的落地页会有更好的布局、排版、动效与间距帮你摆脱模板味的界面。三步装好并跑起来安装方式很简单一条命令即可把仓库里的全部技能装进你的环境git clone https://gitcode.com/GitHub_Trending/ta/taste-skill安装完成后代理会通过 CLI 扫描仓库里的skills/目录。✅ 首次使用建议只装一个默认技能试水# 安装单个技能传的是 install name不是文件夹名 npx skills add taste-skill 仓库地址 --skill design-taste-frontend如果你不想走 CLI还有更轻的用法把任意一个SKILL.md文件复制到你的项目里或直接粘贴进 ChatGPT / Codex 的对话中效果一样。每个技能就是一个独立的 markdown 文件互相不依赖。先分清两类技能再选你要的仓库里的技能分两大类实现类产出代码图像生成类只产出设计参考图。搞清楚这个区别就不会装错。实现类直接出前端代码taste-skill默认安装名design-taste-frontendv2 实验版重写了原版。它会先读懂你的需求再动手从页面类型、语气词、目标受众推断设计方向然后调三个参数出图。适合落地页、作品集、改版这类场景是新手最稳的起点。gpt-taste针对 GPT/Codex 的更严格变体布局变化要求更高、GSAP 动效指令更硬反平庸规则更激进。image-to-code图像优先的工作流。先生成网站参考图再分析参考图最后写前端代码去还原它适合先看到样子再写代码的习惯。redesign-existing-projects针对现有项目先审计 UI再修布局、间距、层次和样式不用从零重写。soft-skill / minimalist-skill / brutalist-skill三种定好的视觉方向——高端柔和、编辑风极简Notion/Linear 气质、瑞士排版粗野风。视觉方向已定时才需要。full-output-enforcementoutput-skill专治模型偷懒强制完整输出、禁止占位注释。图像生成类只出图不写代码imagegen-frontend-web生成网站设计图Hero、着陆页、多区块排版和间距导向。imagegen-frontend-mobile生成 iOS/Android 移动界面与流程保证一套界面风格连贯。brandkit生成品牌视觉板——logo 方向、配色、字体、应用示例。这三类配合 ChatGPT Images 之类的图像生成工具出图再把图交给 Codex、Cursor 或 Claude Code 实现。技能清单与描述可以直接看 skills/ 目录。用三个参数调出你要的视觉风格默认技能 taste-skill 的核心是 1-10 的三档旋钮数值写在技能文件顶部也可以直接在对话里让代理覆盖参数1-34-78-10DESIGN_VARIANCE布局变化对称居中、严格网格轻微错位、混合图片比例不对称、大面积留白MOTION_INTENSITY动效强度静态仅悬停态过渡与级联动画滚动联动、吸顶、视差VISUAL_DENSITY视觉密度画廊式大留白常规 Web 间距驾驶舱式密集数据基线值是8 / 6 / 4技能内置了按用途匹配的预设表如 SaaS 落地页、作品集、政府公共服务站大多数情况不用自己算。两个实用细节动效有硬性约束只允许动画transform和opacity保证硬件加速MOTION_INTENSITY高于 3 时必须适配减弱动态偏好。v2 是实验版若你的工作流依赖原版行为可显式装 v1npx skills add taste-skill 仓库地址 --skill design-taste-frontend-v1v1 到 v2 的完整差异见 CHANGELOG.md。不同场景怎么选一张表说清你的场景推荐技能从零写落地页、作品集不知道选哪个taste-skill默认最稳用 GPT/Codex想要更强的动效和布局变化gpt-taste先看设计参考图再决定要不要实现imagegen-frontend-web或 image-to-code 一条流走完交付物是移动 App 界面概念图imagegen-frontend-mobile现有项目想提升观感不想重写redesign-existing-projects视觉方向已定高端/极简/粗野soft-skill / minimalist-skill / brutalist-skillAI 总是写一半就停full-output-enforcement常见问题必须用 React 吗不用。规则约束的是设计意图布局、字体、色彩、动效不是某个框架的 API所以 Vue、Svelte 等框架都能配合使用。SKILL.md 到底是什么一个可移植的指令文件代理可以自动加载。你可以用 CLI 安装也可以直接复制到仓库或粘贴进对话里。图像生成技能也要用 CLI 装吗是的。它们和代码技能一起放在skills/目录下同一个 CLI 就能发现并安装。v2 是实验版行为变了怎么办安装名没变重跑安装命令即升级为 v2想固定原版行为就装design-taste-frontend-v1。它和其他 AI 设计技能有什么不一样多个专业变体 关键技能可调参数 基于专项研究的反重复规则且与主流编码代理框架无关。适合谁不适合谁Taste-Skill 解决的是AI 写出来的页面千篇一律这个问题一套 markdown 技能文件装进代理就能用三个参数控制风格适合做落地页、作品集、营销站和老项目改版的开发者。但它的规则明确不覆盖仪表盘、数据表格、多步表单、代码编辑器和实时协作类界面——这类以功能密度为主的 UI 不在它的设计范围内硬套规则反而事倍功半。做这类界面的话建议只挑它的排版与间距部分参考或另找更专业的方案。【免费下载链接】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），仅供参考