企业官网建设流程全解析

Taste-Skill 上手指南：3 个参数让 AI 生成的前端页面摆脱模板感

【免费下载链接】taste-skillAgent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill

Taste-Skill 是一套交给 AI 编码代理的 Agent Skills。它把打磨过的布局、排版、动效与间距规则写进 SKILL.md，模型照条款执行，生成的页面不再是模板脸。十余个技能按场景分工，装进项目或贴进对话即可生效。

🎯 为什么 AI 生成的页面总像"模板"

模型见过的页面太多，输出往往是"平均脸"：居中大标题加一行小字，下面排三张等宽卡片，再配紫渐变和细分割线。单看每一处都没错，合起来却没有一处是设计过的。Taste-Skill 就是冲着这个问题来的：它不替你写代码，而是给模型一份明确规则，逼它做出有取舍的界面。

⚙️ 工作原理：SKILL.md 如何约束模型

SKILL.md 是一份带元信息的 Markdown 规则文件。代理启动时会扫描所在目录，自动加载技能文件，之后写代码就按里面的条款执行。全程不用跑服务，也不改工程配置，文件放哪、规则就跟到哪。

默认技能（位于 skills/taste-skill/）的约束集中在四处：

• 布局：打破"居中标题 + 三张等宽卡片"公式，允许分屏、内容左对齐配资产右置、不对称留白。
• 色彩：整页最多一种强调色，饱和度压在 80% 以下，紫渐变、通用玻璃拟态被点名禁止。
• 排版：标题与正文各有字体和层级要求，点名过度通用的字体组合，要求有层次。
• 动效：只动 transform 与 opacity，走硬件加速，不触发重排，避免掉帧。

⚡ 最快启用方式

最轻的路子不用任何命令：把目标技能的 SKILL.md 拷进仓库，或整段贴进 ChatGPT / Codex 的对话窗口。规则即刻生效，适合先试风格再决定装不装。

想长期用，再走 Agent Skills 安装命令。CLI 会扫描仓库的 skills/ 目录，全量装和按技能名单装都支持：

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

注意--skill跟的是文件头声明的 install name，不一定等于文件夹名。

版本方面：默认技能已重写为 v2（实验性），新增需求解读、设计系统映射、重写前审计与交付前自检。依赖 v1 旧行为的，装 install name 为design-taste-frontend-v1的固定版本；v2 用户重跑安装命令即是就地升级。

🧩 按场景选技能

十余个技能分两类：实现类直接输出代码，图像类只产出设计参考图。各技能一句话说明：

四条常见组合路径：

• 企业官网：imagegen-frontend-web 出图，image-to-code-skill 读图实现，设计感与落地兼得。
• 移动 App：imagegen-frontend-mobile 生成连贯界面流，编码代理逐屏实现。
• 老项目救场：redesign-skill 先审计再动手，不必推倒重来。
• 品牌先行：brandkit 定下 logo、色彩与字体，taste-skill 统一落地。

🎛️ 用 3 个参数调出"品味"

默认技能文件顶部有三个 1–10 的数字旋钮，所有布局、动效、密度决策都受它们约束。不想动文件，直接在对话里口头覆盖即可。

• DESIGN_VARIANCE（布局实验程度）
  • 1–3：对称可预测，Flexbox 居中、严格 12 列网格、均等内边距
  • 4–7：开始偏移，负边距叠压、图像宽高比刻意不统一、标题左对齐数据居中
  • 8–10：不对称，瀑布流、Grid 分数单位、大面积留白
• MOTION_INTENSITY（动效深度）
  • 1–3：静态，只有 hover 与 active 状态
  • 4–7：流畅 CSS，约 0.3 秒过渡、级联延迟入场
  • 8–10：高级编排，滚动触发显现、视差、磁性跟随
• VISUAL_DENSITY（单位视口信息量）
  • 1–3：画廊模式，大块留白、超大区块间距
  • 4–7：常规 Web 应用的标准间距
  • 8–10：驾驶舱模式，小内边距、去卡片框、1px 线条分隔、数字等宽

默认基线是 8 / 6 / 4，多数营销页从这组值起步再微调。想要极简 Linear 风，把三项往低拧到约 5 / 3 / 2 即可。

❓ 常见问题

框架有讲究吗？规则约束的是设计意图，不是某个框架的 API。React、Vue、Svelte 都能用，技能也不绑定特定代理框架。

模型老是输出半成品怎么办？加装 output-skill。它强制完整输出、禁用占位注释，专治截断问题。

图像技能和代码技能是同一套安装体系吗？是。两类技能同在 skills/ 技能目录 下，同一条npx skills add命令全部可发现。

和普通"AI 设计提示词"有什么区别？三点：按场景拆分的专职变体，关键技能内置可调旋钮，以及基于专门研究沉淀的反套路规则。仓库 research/ 目录记录了模型偷懒、输出截断等问题的成因与对策。

项目采用 MIT 许可，技能文件都可以自行裁剪；完整技能对照表见 skills/llms.txt。

【免费下载链接】taste-skillAgent skills that give coding agents taste: art direction, reference images and a browser check instead of generic AI pages项目地址: https://gitcode.com/GitHub_Trending/ta/taste-skill