Taste-SkillAI 前端去模板化实操指南【免费下载链接】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 编码代理装上的品味技能包安装后代理写落地页、作品集时会主动避开居中 Hero、Inter 字体、紫色渐变这类模板脸产出排版和动效都更讲究的界面。 这些 AI 生成的页面你肯定刷到过深色背景配紫色光晕居中大标题下面三张等大的特性卡片字体永远是 Inter。同一个提示词喂给不同的模型出来的页面像同一套模板换了 logo。更糟的是半成品加载态是通用圆圈转圈空状态只有干巴巴一句话按钮点了没有任何按压反馈。代码能跑但上线前你大概率会推翻重写。问题不在提示词写得多差而在模型见过的页面里这类默认审美占大头输出时直接照抄。要修的不是咒语是规则。 Taste-Skill 到底是什么Taste-Skill 不是框架也不是组件库仓库里没有一行会打进你 bundle 的代码。它是一组可移植的 Agent Skills每个技能就是一个 SKILL.md 指令文件装好后由 Codex、Cursor、Claude Code 这类代理自动加载约束代理在布局、排版、色彩、动效上的每个决策。它管的是设计意图不绑定框架 API——React、Vue、Svelte 项目都适用。你不用重写项目也不用改构建配置。⚡ 两条命令装好安装用 skills CLI它会扫描仓库的skills/目录代码技能和图像生成技能走同一条命令npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill只装某一个技能时用--skill传安装名取技能 frontmatter 里的name字段不是文件夹名npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill imagegen-frontend-mobile不想装也可以把任意 SKILL.md 复制进项目或直接粘贴进 ChatGPT / Codex 对话效果等价。 核心能力拆解先读题再动手效果代理写第一行代码前会先输出一句设计判读说清页面类型、目标受众、设计语言。原理v2 把读需求做成了强制流程——先判断是 SaaS 落地页、作品集还是政府服务站点再选视觉方向需求含糊时只允许追问一个问题不许猜。用法正常写需求即可比如B2B SaaS 落地页给技术买家看判读由代理自己完成。三个旋钮锁住风格边界效果整站的布局实验性、动效深度、信息量被同一组数值管住前后章节不会风格漂移。原理DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY三个 1-10 的旋钮是全局变量SKILL.md 里每条规则都按它们决定是否触发。用法不想动文件就在对话里口头覆盖例如动效降到 3只要悬停反馈。反AI 味的硬规则清单效果紫蓝渐变、衬线默认字体、em-dash 滥用、Scroll ↓提示这类一眼假的元素被逐条点名禁止。原理规则来自专项研究仓库research/目录记录了 LLM 输出中最高频的审美惯性长什么样。用法生成时规则自动生效发布前的 pre-flight checklist 会再逐条自查一遍不需要你手动盯。 关键参数与技能选择三个旋钮的默认值在skills/taste-skill/SKILL.md顶部按项目类型调整旋钮控制内容默认值低值 → 高值DESIGN_VARIANCE布局实验性8居中对称 → 不对称MOTION_INTENSITY动效深度6仅悬停 → 滚动/磁性VISUAL_DENSITY每屏信息量4艺术画廊 → 数据密集技能不用全装每个只干一件事按需挑技能安装名--skill 参数什么时候用taste-skilldesign-taste-frontend默认首选落地页/作品集通用gpt-tasteskillgpt-tasteGPT/Codex 下要更严的规则和 GSAP 动效image-to-code-skillimage-to-code出参考图 → 分析 → 写码的一体化流程redesign-skillredesign-existing-projects改造现有项目先审计再修soft / minimalist / brutalisthigh-end-visual-design / minimalist-ui / industrial-brutalist-ui视觉方向已定套对应风格output-skillfull-output-enforcement代理总输出半成品时强制完整交付imagegen-frontend-web / mobile、brandkit与技能同名只要设计图、不要代码 效果展示下面这张用 taste-skill 生成的花卉工作室页面首屏可以对照着看规则怎么落地左文右图的不对称首屏而不是居中三件套黑色基调上只放一个强调元素没有紫蓝渐变标题用同族字体的斜体做强调没有硬塞衬线导航高度、按钮样式、留白都受 pre-flight 规则约束 进阶技巧图像先行先要图再要码用 image-to-code-skill 时在提示词里直接声明流水线例如按技能执行先生成参考图再分析再写代码。如果交付物本身就是设计图改用 imagegen-frontend-web 或 imagegen-frontend-mobile 出图再把图喂给编码代理落地两条链路可以分开用。老项目改造让代理先审计在现有代码库上别直接说帮我美化。装上 redesign-skill它会先跑审计、列出问题再按布局 → 间距 → 层次的顺序修。URL 结构、表单字段名、品牌字样这类东西明确在不许悄悄改清单里。 你大概率会问它和我项目里的 Tailwind、组件库冲突吗不冲突。规则针对设计意图而不是框架 APIReact、Vue、Svelte 都适用现有 Tailwind 项目直接装即可。SKILL.md 到底是什么一个可移植的指令文件。代理能自动加载它你手动复制进仓库或粘贴进对话也完全可以两种用法等价。图像生成技能怎么安装和代码技能同在skills/目录下同一条npx skills add命令就能发现并安装不需要额外工具。v1 和 v2 有区别吗默认技能已更新为 v2实验性新增需求判读、暗色模式协议和发布前检查清单。依赖 v1 精确行为的显式安装design-taste-frontend-v1锁定旧版即可。跑完上面的安装命令把下一个落地页需求直接丢给代理对比一次输出你就知道它拦下了多少模板脸。【免费下载链接】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-SkillAI 前端去模板化实操指南【免费下载链接】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 编码代理装上的品味技能包安装后代理写落地页、作品集时会主动避开居中 Hero、Inter 字体、紫色渐变这类模板脸产出排版和动效都更讲究的界面。 这些 AI 生成的页面你肯定刷到过深色背景配紫色光晕居中大标题下面三张等大的特性卡片字体永远是 Inter。同一个提示词喂给不同的模型出来的页面像同一套模板换了 logo。更糟的是半成品加载态是通用圆圈转圈空状态只有干巴巴一句话按钮点了没有任何按压反馈。代码能跑但上线前你大概率会推翻重写。问题不在提示词写得多差而在模型见过的页面里这类默认审美占大头输出时直接照抄。要修的不是咒语是规则。 Taste-Skill 到底是什么Taste-Skill 不是框架也不是组件库仓库里没有一行会打进你 bundle 的代码。它是一组可移植的 Agent Skills每个技能就是一个 SKILL.md 指令文件装好后由 Codex、Cursor、Claude Code 这类代理自动加载约束代理在布局、排版、色彩、动效上的每个决策。它管的是设计意图不绑定框架 API——React、Vue、Svelte 项目都适用。你不用重写项目也不用改构建配置。⚡ 两条命令装好安装用 skills CLI它会扫描仓库的skills/目录代码技能和图像生成技能走同一条命令npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill只装某一个技能时用--skill传安装名取技能 frontmatter 里的name字段不是文件夹名npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill imagegen-frontend-mobile不想装也可以把任意 SKILL.md 复制进项目或直接粘贴进 ChatGPT / Codex 对话效果等价。 核心能力拆解先读题再动手效果代理写第一行代码前会先输出一句设计判读说清页面类型、目标受众、设计语言。原理v2 把读需求做成了强制流程——先判断是 SaaS 落地页、作品集还是政府服务站点再选视觉方向需求含糊时只允许追问一个问题不许猜。用法正常写需求即可比如B2B SaaS 落地页给技术买家看判读由代理自己完成。三个旋钮锁住风格边界效果整站的布局实验性、动效深度、信息量被同一组数值管住前后章节不会风格漂移。原理DESIGN_VARIANCE、MOTION_INTENSITY、VISUAL_DENSITY三个 1-10 的旋钮是全局变量SKILL.md 里每条规则都按它们决定是否触发。用法不想动文件就在对话里口头覆盖例如动效降到 3只要悬停反馈。反AI 味的硬规则清单效果紫蓝渐变、衬线默认字体、em-dash 滥用、Scroll ↓提示这类一眼假的元素被逐条点名禁止。原理规则来自专项研究仓库research/目录记录了 LLM 输出中最高频的审美惯性长什么样。用法生成时规则自动生效发布前的 pre-flight checklist 会再逐条自查一遍不需要你手动盯。 关键参数与技能选择三个旋钮的默认值在skills/taste-skill/SKILL.md顶部按项目类型调整旋钮控制内容默认值低值 → 高值DESIGN_VARIANCE布局实验性8居中对称 → 不对称MOTION_INTENSITY动效深度6仅悬停 → 滚动/磁性VISUAL_DENSITY每屏信息量4艺术画廊 → 数据密集技能不用全装每个只干一件事按需挑技能安装名--skill 参数什么时候用taste-skilldesign-taste-frontend默认首选落地页/作品集通用gpt-tasteskillgpt-tasteGPT/Codex 下要更严的规则和 GSAP 动效image-to-code-skillimage-to-code出参考图 → 分析 → 写码的一体化流程redesign-skillredesign-existing-projects改造现有项目先审计再修soft / minimalist / brutalisthigh-end-visual-design / minimalist-ui / industrial-brutalist-ui视觉方向已定套对应风格output-skillfull-output-enforcement代理总输出半成品时强制完整交付imagegen-frontend-web / mobile、brandkit与技能同名只要设计图、不要代码 效果展示下面这张用 taste-skill 生成的花卉工作室页面首屏可以对照着看规则怎么落地左文右图的不对称首屏而不是居中三件套黑色基调上只放一个强调元素没有紫蓝渐变标题用同族字体的斜体做强调没有硬塞衬线导航高度、按钮样式、留白都受 pre-flight 规则约束 进阶技巧图像先行先要图再要码用 image-to-code-skill 时在提示词里直接声明流水线例如按技能执行先生成参考图再分析再写代码。如果交付物本身就是设计图改用 imagegen-frontend-web 或 imagegen-frontend-mobile 出图再把图喂给编码代理落地两条链路可以分开用。老项目改造让代理先审计在现有代码库上别直接说帮我美化。装上 redesign-skill它会先跑审计、列出问题再按布局 → 间距 → 层次的顺序修。URL 结构、表单字段名、品牌字样这类东西明确在不许悄悄改清单里。 你大概率会问它和我项目里的 Tailwind、组件库冲突吗不冲突。规则针对设计意图而不是框架 APIReact、Vue、Svelte 都适用现有 Tailwind 项目直接装即可。SKILL.md 到底是什么一个可移植的指令文件。代理能自动加载它你手动复制进仓库或粘贴进对话也完全可以两种用法等价。图像生成技能怎么安装和代码技能同在skills/目录下同一条npx skills add命令就能发现并安装不需要额外工具。v1 和 v2 有区别吗默认技能已更新为 v2实验性新增需求判读、暗色模式协议和发布前检查清单。依赖 v1 精确行为的显式安装design-taste-frontend-v1锁定旧版即可。跑完上面的安装命令把下一个落地页需求直接丢给代理对比一次输出你就知道它拦下了多少模板脸。【免费下载链接】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），仅供参考