如何让AI写出不再模板化的前端Taste-Skill实操指南【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill当你让 Codex 或 Cursor 写落地页得到的常常是居中深色 Hero、紫色渐变和老三张卡片。Taste-Skill 是一组可安装的 Agent SkillAI 写代码前先推断设计方向、调好三个旋钮、过一遍预检清单让前端产出去掉AI 味的模板感。读懂设计决策流程核心技能 taste-skillv2对每个任务走固定五步理解这条流程比背规则更重要设计推断先读页面类型、你用的情绪词、目标受众和已有品牌资产输出一句Reading this as: 面向技术买家的 Linear 风格极简落地页这样的设计判断需求模糊时只问一个问题。 → 适合需求没讲透、但又不想 AI 随机发挥的场景。三旋钮设定在推断基础上定参DESIGN_VARIANCE布局实验度1 对称到 10 混乱、MOTION_INTENSITY动画深度、VISUAL_DENSITY每屏信息量默认 8/6/4。 → 适合你想精确控制输出调性、而不是每次碰运气的场景。设计系统映射需求像企业仪表盘就直接用官方 Fluent 或 Carbon 组件包像玻璃拟态、bento 这类趋势风格则用原生 CSS 实现并如实标注。一个项目只挂一个系统。 → 适合既要对齐行业标准、又需要视觉差异化的场景。重设计审计对现有项目先扫代码列出字体、颜色、间距问题清单再在原有技术栈上逐项修不推倒重写。 → 适合给老站翻新、功能不能动的场景。预检清单输出代码前过硬性检查——零 em-dash、全页一个强调色、CTA 对比度过 WCAG AA、布局不重复等。 → 适合拦住好看但不可用的细节问题。把技能装进项目最短路径一条命令安装默认技能npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend想一次装全部技能去掉--skill参数即可。注意--skill传的是 SKILL 文件 frontmatter 里的安装名不是文件夹名。装好自检新开对话说给我写一个 SaaS 落地页AI 第一句输出应是Reading this as: ...的设计判断然后才动代码。直接蹦代码说明技能没加载。选对适合你的技能装默认技能 taste-skill安装名design-taste-frontend上面五步机制全在这里覆盖落地页、作品集、编辑类页面。只装一个技能就装它。跑 image-to-code 图像优先流程先生成一组分区的可读参考图再分析图片最后照图实现前端。提示词里写一句follow the skill: generate images, then analyze, then code。适合对视觉要求高、想先定稿再写代码的场景。用 redesign-skill 翻新现有项目先审计再修复字体层级、颜色饱和、间距节奏都按现有栈改。适合老网站视觉过时、但功能和结构不能动的情况。在风格变体里选一种语言soft-skill、minimalist-skill、brutalist-skill分别对应高端柔和、Notion/Linear 式极简、工业粗野三种固定视觉语言。方向已定选一个不混装。用 imagegen 技能出设计图imagegen-frontend-web、imagegen-frontend-mobile、brandkit只产出参考图不写代码网页 moodboard、移动端屏概念图、品牌视觉板。图可以交给任意编码 Agent 去实现。按场景做选择场景推荐组合与参数为什么这么选新建 SaaS 落地页taste-skill旋钮 7/6/4贴近主流营销页预设布局略带不对称、动画适中稳且不出错现有网站翻新redesign-skill方向偏高端可加 soft-skill先审计再修复改动基于现有栈不破坏功能先定视觉再写代码image-to-code先参考图、再分析、最后实现页面和图片不会跑偏调优与常见坑旋钮调优想克制VARIANCE 设 5-6、DENSITY 设 2-3想做展示型作品集VARIANCE 提到 9-10政务类信任页三项都压低。MOTION_INTENSITY 超过 4 时页面必须真出动画超过 3 时技能强制做减弱动效的兼容处理。三个常见误区它明确不覆盖高密度仪表盘、数据表格、多步表单、代码编辑器和原生移动端硬用会被指回对应的设计系统。别在同一项目混装多个风格变体设计系统映射的前提就是一个系统。v2 是实验版默认且仍在迭代依赖 v1 行为就固定安装design-taste-frontend-v1。常见问题Q: 支持 React、Vue、Svelte 吗 A: 支持。规则针对设计意图不绑定任何框架 API。Q: 必须用 CLI 安装吗 A: 不必。任意 SKILL.md 直接粘进 AI 对话或放进项目目录也能生效。Q: 图像技能会顺便写代码吗 A: 不会。imagegen 三个技能只产出参考图代码实现交给编码 Agent。适合谁用落地页、作品集、编辑类页面或给现有网站做翻新它合适。主战场是高密度仪表盘、复杂产品 UI 或原生移动应用不在范围内这是技能划定的边界而不是缺陷。全部技能目录skills/设计推断的研究笔记research/v1 到 v2 的版本说明CHANGELOG.md【免费下载链接】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），仅供参考 如何让AI写出不再模板化的前端：Taste-Skill实操指南
如何让AI写出不再模板化的前端Taste-Skill实操指南【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill当你让 Codex 或 Cursor 写落地页得到的常常是居中深色 Hero、紫色渐变和老三张卡片。Taste-Skill 是一组可安装的 Agent SkillAI 写代码前先推断设计方向、调好三个旋钮、过一遍预检清单让前端产出去掉AI 味的模板感。读懂设计决策流程核心技能 taste-skillv2对每个任务走固定五步理解这条流程比背规则更重要设计推断先读页面类型、你用的情绪词、目标受众和已有品牌资产输出一句Reading this as: 面向技术买家的 Linear 风格极简落地页这样的设计判断需求模糊时只问一个问题。 → 适合需求没讲透、但又不想 AI 随机发挥的场景。三旋钮设定在推断基础上定参DESIGN_VARIANCE布局实验度1 对称到 10 混乱、MOTION_INTENSITY动画深度、VISUAL_DENSITY每屏信息量默认 8/6/4。 → 适合你想精确控制输出调性、而不是每次碰运气的场景。设计系统映射需求像企业仪表盘就直接用官方 Fluent 或 Carbon 组件包像玻璃拟态、bento 这类趋势风格则用原生 CSS 实现并如实标注。一个项目只挂一个系统。 → 适合既要对齐行业标准、又需要视觉差异化的场景。重设计审计对现有项目先扫代码列出字体、颜色、间距问题清单再在原有技术栈上逐项修不推倒重写。 → 适合给老站翻新、功能不能动的场景。预检清单输出代码前过硬性检查——零 em-dash、全页一个强调色、CTA 对比度过 WCAG AA、布局不重复等。 → 适合拦住好看但不可用的细节问题。把技能装进项目最短路径一条命令安装默认技能npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill design-taste-frontend想一次装全部技能去掉--skill参数即可。注意--skill传的是 SKILL 文件 frontmatter 里的安装名不是文件夹名。装好自检新开对话说给我写一个 SaaS 落地页AI 第一句输出应是Reading this as: ...的设计判断然后才动代码。直接蹦代码说明技能没加载。选对适合你的技能装默认技能 taste-skill安装名design-taste-frontend上面五步机制全在这里覆盖落地页、作品集、编辑类页面。只装一个技能就装它。跑 image-to-code 图像优先流程先生成一组分区的可读参考图再分析图片最后照图实现前端。提示词里写一句follow the skill: generate images, then analyze, then code。适合对视觉要求高、想先定稿再写代码的场景。用 redesign-skill 翻新现有项目先审计再修复字体层级、颜色饱和、间距节奏都按现有栈改。适合老网站视觉过时、但功能和结构不能动的情况。在风格变体里选一种语言soft-skill、minimalist-skill、brutalist-skill分别对应高端柔和、Notion/Linear 式极简、工业粗野三种固定视觉语言。方向已定选一个不混装。用 imagegen 技能出设计图imagegen-frontend-web、imagegen-frontend-mobile、brandkit只产出参考图不写代码网页 moodboard、移动端屏概念图、品牌视觉板。图可以交给任意编码 Agent 去实现。按场景做选择场景推荐组合与参数为什么这么选新建 SaaS 落地页taste-skill旋钮 7/6/4贴近主流营销页预设布局略带不对称、动画适中稳且不出错现有网站翻新redesign-skill方向偏高端可加 soft-skill先审计再修复改动基于现有栈不破坏功能先定视觉再写代码image-to-code先参考图、再分析、最后实现页面和图片不会跑偏调优与常见坑旋钮调优想克制VARIANCE 设 5-6、DENSITY 设 2-3想做展示型作品集VARIANCE 提到 9-10政务类信任页三项都压低。MOTION_INTENSITY 超过 4 时页面必须真出动画超过 3 时技能强制做减弱动效的兼容处理。三个常见误区它明确不覆盖高密度仪表盘、数据表格、多步表单、代码编辑器和原生移动端硬用会被指回对应的设计系统。别在同一项目混装多个风格变体设计系统映射的前提就是一个系统。v2 是实验版默认且仍在迭代依赖 v1 行为就固定安装design-taste-frontend-v1。常见问题Q: 支持 React、Vue、Svelte 吗 A: 支持。规则针对设计意图不绑定任何框架 API。Q: 必须用 CLI 安装吗 A: 不必。任意 SKILL.md 直接粘进 AI 对话或放进项目目录也能生效。Q: 图像技能会顺便写代码吗 A: 不会。imagegen 三个技能只产出参考图代码实现交给编码 Agent。适合谁用落地页、作品集、编辑类页面或给现有网站做翻新它合适。主战场是高密度仪表盘、复杂产品 UI 或原生移动应用不在范围内这是技能划定的边界而不是缺陷。全部技能目录skills/设计推断的研究笔记research/v1 到 v2 的版本说明CHANGELOG.md【免费下载链接】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），仅供参考