企业官网建设流程全解析

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

Taste-Skill是一套给Cursor、Codex、Claude Code等编码代理用的Agent Skills（代理可自动加载的指令文件）。它自己不写代码，而是教会模型做出有设计感的前端页面，替换掉AI紫蓝渐变、居中三卡片那套模板感。

项目开篇横幅：定位是"反模板前端框架"，规则先行，而不是再给一套组件库。

3条命令装好Taste-Skill

先克隆仓库浏览，再用CLI扫描skills/目录一次装全：

git clone https://gitcode.com/GitHub_Trending/ta/taste-skill npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill

只装单个技能，用--skill传安装名（取SKILL.md frontmatter里的name:字段，不是目录名）：

npx skills add https://gitcode.com/GitHub_Trending/ta/taste-skill --skill "design-taste-frontend"

不用CLI也行：把任意一个SKILL.md拷进项目，或直接整篇粘贴进ChatGPT/Codex对话，效果一样。

它到底在做什么：一份设计总监红线

类比一下：实习生画页面，你不给模板，给他设计总监的红线规则。他想怎么画都行，但每一条线必须过检。Taste-Skill就是这份红线，分三块。

SKILL.md：模型动手前读的规则

每个技能就是一个SKILL.md。默认技能v2（安装名design-taste-frontend）先"读需求"：判断页面类型、氛围词、受众、已有品牌资产，先输出一句话设计判断，再动旋钮和选组件。需求模糊时只允许问一个问题，不许一口气甩五个。

平庸 tells：一张硬禁清单

v2最狠的部分是把AI默认审美列成黑名单：全页禁用破折号（em-dash）、AI紫蓝渐变、居中hero加三等分卡片、到处玻璃拟态、"Scroll to explore"滚动提示、用div拼的假产品截图，一律禁掉。这些就是让人三秒划走的"AI痕迹"，出货前要过一遍pre-flight（交付前的硬清单）检查。

有官方设计系统时，直接用官方包

规则里有一张映射表：需求像微软风就装Fluent UI官方包，Google风用Material，政务站用GOV.UK或USWDS。一个项目最多混一个系统，不许Fluent和Carbon混着来。只是某种风格（bento网格、粗野主义）才写原生CSS，并在注释里诚实标注借鉴来源。

按场景挑技能

从零做页面：默认技能打底

落地页、作品集、改版选默认taste-skill最稳，内置预设：SaaS落地页7/6/4、创意机构9/8/3。要更严就上gpt-taste，它是专门给GPT/Codex调的变体：布局变化更大、GSAP（滚动动画库）方向更明确。

图已想好：图像优先流水线

嘴上手头有参考图、模型却画不出来，先用imagegen-frontend-web或imagegen-frontend-mobile出网站/移动端设计图，再把图喂给Codex、Cursor实现。或者一步到位用image-to-code：生成图、分析图、写代码，提示词里把这三步顺序写明。

旧项目改版：先审计再动手

在现有代码库上用redesign-existing-projects：先审计布局、间距、层级，再逐项修。URL结构、导航标签、表单字段名、品牌文案这些它不静默改动。模型爱交付半成品、留占位注释的，加一个output-skill强制完整输出。

只要图：设计板与品牌套件

提案、品牌板这类纯图像交付物，用brandkit出logo方向、色板、字体和身份应用。图像类技能只出图，一行代码不写。

默认技能生成的Floria站点顶部：左对齐大标题、主图推到右缘、胶囊标签居左上，看不到居中对齐的模板脸。

调三个旋钮：变化、动效、密度

默认技能顶部是1到10的数字旋钮，基线8/6/4，直接在对话里覆盖，不用改文件：

DESIGN_VARIANCE: 7 # 布局变化度 MOTION_INTENSITY: 6 # 动效深度 VISUAL_DENSITY: 3 # 信息密度

三档含义：

文件里有旋钮推断表：需求偏"极简/安静"对应5-6 / 3-4 / 2-3，偏Awwwards实验风对应9-10 / 8-10 / 3-4，政务信任优先则压到3-4 / 2-3 / 4-5。注意默认是v2实验版，v2.0.0稳定前规则还可能迭代。

关于Taste-Skill你可能想问

React、Vue、Svelte都支持吗？都支持。规则针对设计意图，不是某个框架的API。输出是布局、间距、字体和组件选型建议，框架无关。

和其他AI设计技能差在哪？多场景变体、关键技能可调旋钮，加上基于专门研究（research/目录）的反重复规则。所有技能与主流编码代理框架无关。

装v1还是v2？默认装的已是v2实验版，安装名没变，重跑安装命令即原地升级。要钉死v1行为，单独装design-taste-frontend-v1。

它管不了什么？仪表盘、数据表格、多步表单、代码编辑器、原生移动端都不在范围内。这个技能管的是落地页、作品集和改版。

图像技能也走 npx skills add？是。它们和代码技能同放skills/目录，同一个CLI就能发现。

它不提升模型能力，只抬高输出下限：模板痕迹被pre-flight清单拦下，而不是发出去。挑一个你生成过的页面，装上默认技能用同一需求重跑一遍，差距一眼可见。

【免费下载链接】taste-skillTaste-Skill - gives your AI good taste. stops the AI from generating boring, generic slop项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill