企业官网建设流程全解析

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 标题、下面三张等宽卡片、角落里一个 Acme 占位 logo。taste-skill 正是冲着这个问题做的开源 AI 技能集合：装进 Codex、Cursor 或 Claude Code 之后，agent 在动手写代码之前会先"读题"，产出的落地页和作品集明显更有视觉品味。技能本体是一个 SKILL.md 指令文件，仓库与框架无关，不管最后用 React、Vue 还是 Svelte 实现都能用。

AI 味是有指纹的

"AI 味"不是模糊印象，它有一串可枚举的指纹：Inter 配板岩灰、紫色发光按钮、默认用衬线字当"创意选择"（Fraunces 和 Instrument Serif 几乎每个项目都出现）、premium 消费品牌一律米色背景加黄铜色点缀、hero 下挂三张等宽卡片、用 div 矩形拼出来的"产品预览"。taste-skill 的规则库来自对 LLM 真实产出做落地页测试的结果，每条规则都对应模型实际踩过的默认倾向，有些规则甚至写死了模型爱凑出来的具体色值，标注为"禁止作为默认，再遇必须换色族"。

同一份 brief 在加载技能前后的差距就在这：强调色全页锁定一个、hero 只留标题和 CTA、"Trusted by" logo 墙用真 SVG 并放到 hero 下方、需要配图时生成或用真照片而不是 div 假截图。

先用一句话写下设计判断

v2 里最反直觉的是"读题"环节：写任何代码前，agent 必须完成一次brief inference（简报推理），并用一行字写出设计判断。它读取六类信号：页面类型（落地页 / 作品集 / 重设计 / 编辑类）、用户用过的风格词、贴出的参考链接和截图、目标受众（B2B 采购与设计敏感型消费者需要完全不同的语言）、已有品牌资产，以及无障碍、受监管行业这类隐性约束。输出长这样："Reading this as: B2B SaaS landing for technical buyers, Linear-style minimalist, leaning Tailwind utilities + Geist + restrained motion."。如果 brief 真的模糊，只允许追问一个澄清问题；能从上下文推断就径直声明判断并开工。这一步的用途是逼模型先把理解说出口，而不是滑回默认美学。

三个旋钮决定布局、动效与密度

判断之后，agent 设置三个旋钮，各 1-10，作为整个技能的全局变量：

关键不在旋钮本身，而在它们可以从 brief 里推断。技能内置映射表："minimalist / calm / Linear-style" 落到 5-6 / 3-4 / 2-3，"trust-first / 公共部门 / 受监管"落到 3-4 / 2-3 / 4-5，"Awwwards / experimental"落到 9-10 / 8-10 / 3-4，默认基线是 8 / 6 / 4。旋钮直接门控后续规则：DESIGN_VARIANCE 高于 4 时居中 hero 被禁用；VISUAL_DENSITY 高于 7 时卡片容器被禁用；MOTION_INTENSITY 高于 5 才启用磁吸微交互，且必须用 Motion 的 useMotionValue 实现、不走 React 状态。还有一条"声称有动效就必须有动效"：动效旋钮设得高而页面没动起来，算交付失败，宁可把旋钮调低交静态页。

一组机械化的检查

旋钮定方向，硬规则定下限。技能文件把"AI 指纹"（AI tells）整理成一份近乎零容忍的清单：em dash 全页禁止（生产测试里违规率最高的一条，页面里只允许普通连字符）；每 3 个 section 最多一个 eyebrow 小标签，且数量要机械计数；同意图的 CTA 不许出现两种文案；bento 网格 N 个内容必须恰好 N 个格子、不许留空格子；全页不许中途切换明暗主题。交付前 agent 要过一遍pre-flight check，约六十项，覆盖按钮对比度（WCAG AA）、hero 不超出首屏、斜体 descender 裁切、明暗双模式、prefers-reduced-motion 降级等，任何一项勾不诚实就算没做完。

还有一层"选工具"的决策：brief 读起来像企业 SaaS、Google 系、IBM 系时，agent 被要求直接装 Fluent UI、Material、Carbon 等官方包，一个项目一个体系，不许手写模仿 CSS；brief 只是 glassmorphism、bento 这类风格词时没有官方包，就用原生 CSS 实现，并在注释里如实标注"这是近似，不是官方实现"。Apple 的 Liquid Glass 在 Web 端根本没有官方包，规则明确要求标注为近似实现。

一条命令装齐，单装也是命令

所有技能共用同一条安装路径，CLI 会扫描仓库的skills/目录：

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

只想要默认设计技能时指定安装名（是 frontmatter 里的 name，不是文件夹名）：

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

离线或想手动控制时，直接把任意 SKILL.md 复制进项目或贴进对话即可。

走读：一份花艺 brief 变成落地页

拿仓库 examples 里的 Floria 走一遍。输入只有大意一句话：花艺品牌 Floria，面向城市消费者，要 premium 的感觉。agent 先输出 design read：premium consumer 落地页，克制的高级感，不靠花哨装饰堆氛围。旋钮按映射表的 premium consumer 行定在 7 / 6 / 3。此时模型的默认倾向是伸手去拿那套暖纸感加黄铜色的配色，而这组色值已被明确拉黑，于是换成另一族并避免与上一个项目重复。hero 只保留标题、一行副文和一个主 CTA，信任 logo 墙（如有）放在下一个 section；产品图按 section 生成或用真实照片。交付前跑 pre-flight：强调色全页一个、em dash 计数为零、hero 标题不超两行、明暗双模式都验过。

上图中 Floria 落地页的 hero 区域即技能产出效果，examples/目录还有整页截图可对照。

边界与版本取舍

当前默认的 taste-skill 是 v2 实验版，规则仍在迭代，API 会在 v2.0.0 stable 冻结；依赖原版行为的，用--skill "design-taste-frontend-v1"安装保留版。技能明确声明自己不做什么：仪表盘、数据表格、多步表单、原生移动端不在范围内，遇到会直接指向 Fluent、Carbon、TanStack 这类更合适的工具。相邻技能分工也清楚：imagegen-web / imagegen-mobile / brandkit 只产出设计参考图，image-to-code 是"先生图、再分析、最后写码"的完整流水线，redesign-existing-projects 面向存量项目、先审计 UI 问题再动手，output-skill 专治模型输出截断。

taste-skill 的本质是一组用自然语言写成的约束：先读题、选对工具、交付前自查，让 AI 前端设计从凭手感出活变成有明确输入输出的流程。全部 13 个技能清单见 skills/ 目录，关于 LLM 设计懒惰的实证背景研究在 research/。

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