Taste Skill 高审美前端设计

反AI审美Skill，防止Agent输出千篇一律紫色渐变页面。Vercel赞助

详细介绍

Taste Skill

面向AI Agent的反千篇一律前端框架，提供可移植的Agent技能，用于提升AI构建的界面：强化布局、排版、动效和间距，取代千篇一律的外观。同时包含用于参考板（网页、移动端、品牌套件）的图像生成技能。与ChatGPT图像生成等工具搭配，再将帧交给Codex、Cursor或Claude Code实现。

免责声明

Taste Skill 没有官方代币、硬币或加密项目。任何使用我的名字、图像或项目的代币均与我无关，也不受我认可。

技能概览

每个技能只做一件事，你不需要同时全部使用。代码技能输出代码，图像生成技能仅输出参考图像。

技能（文件夹）
描述

taste-skill
🆕 v2（实验性） – 默认技能的重大重写。阅读设计说明，推断设计语言，调整三个旋钮（VARIANCE / MOTION / DENSITY）。包含设计说明推断、设计系统映射、硬性禁止破折号、规范 GSAP 代码骨架、重新设计审计协议、严格的起飞前检查。正积极迭代至 v2.0.0 稳定版。

taste-skill-v1
taste-skill 的原版 v1，为依赖其精确行为的项目保留。仅在默认 v2 破坏了你的特定流程时使用。

gpt-tasteskill
适用于 GPT/Codex 的更严格变体：更高的布局差异性、更强的 GSAP 指导、积极反千篇一律。

image-to-code-skill
图像优先管道：生成站点参考，分析它们，然后实现与之匹配的前端。

redesign-skill
现有项目：先审计 UI，然后修复布局、间距、层次和样式。

soft-skill
精致、平静、昂贵的 UI：更柔和的对比、留白、高端字体、弹性动效。

output-skill
当模型输出不完整时：强制完整输出，不允许占位符注释。

minimalist-skill
编辑类产品 UI（类似 Notion/Linear 风格），克制的调色板，清晰的结构。

brutalist-skill
硬朗的机械语言：瑞士字体、鲜明对比、实验性布局。

stitch-skill
Google Stitch 兼容规则，包含可选的 DESIGN.md 导出格式。

图像生成技能

这些技能仅生成设计图像（无代码）。可与 ChatGPT 图像、Codex 图像模式或任何生成图像的代理一起使用。

技能（文件夹）
描述

imagegen-frontend-web
网站合成图：首屏、着陆页、多区块，强调排版、间距和反千篇一律的艺术指导。

imagegen-frontend-mobile
移动端屏幕和流程：iOS/Android/跨平台，样机，可读字体，连贯的系列。

brandkit
品牌套件板：标志方向、调色板、字体，跨类别的品牌应用。

我该用哪个？

从 taste-skill 开始，作为最安全的通用默认值。（现在是 v2 实验版 – 查看变更日志了解详情。）

如果你依赖原版 taste-skill 的精确行为，改用 taste-skill-v1 。

当需要更严格的 GPT/Codex 规则和动效/布局强制时，使用 gpt-taste 。

使用 image-to-code-skill 进行图像 → 分析 → 代码的网站工作流。

使用 redesign-skill 改善现有代码库，而非从零开始设计。

当视觉方向已确定时，再加入 soft-skill 、 minimalist-skill 或 brutalist-skill 。

如果代理不断截断输出，加入 output-skill 。

当交付物是 图像 （合成图、流程、品牌板）时，使用 imagegen-frontend-web 、 imagegen-frontend-mobile 或 brandkit ，然后将结果传递给编码代理。

图像优先提示

对于 image-to-code-skill ，在提示中声明流程，例如： 遵循技能：生成图像，然后分析，再编码 。

ChatGPT 图像与 Codex

附加或粘贴 imagegen-frontend-web 、 imagegen-frontend-mobile 或 brandkit ，请求所需的帧，然后将渲染结果提供给 Codex、Cursor 或 Claude Code。若需要一个同时生成参考图和实现网站代码的工作流，则使用 image-to-code-skill 。

设置（仅限 taste-skill）

文件顶部的数字为 1-10 的旋钮：

DESIGN_VARIANCE ：布局实验性（较低：居中/干净 · 较高：不对称/现代）。

MOTION_INTENSITY ：动画深度（较低：悬停 · 较高：滚动/磁性）。

VISUAL_DENSITY ：每视口的信息密度（较低：宽敞 · 较高：密集仪表板）。

效果示例

使用 taste-skill 创建：

常见问题

它与其他 AI 设计技能有何不同？

多个专业化变体，关键技能中可调旋钮，基于专门研究的反重复规则。所有变体均不依赖特定框架，适用于主流编码代理。

适用于 React、Vue、Svelte 吗？

是的。规则针对设计意图，而非特定框架的 API。

什么是 SKILL.md ？

一种可移植的指令文件，代理可自动加载；可通过复制到仓库或对话中使用。

图像生成技能是否随此包一起提供？

是的。它们与代码技能一同位于 skills/ 下，可通过相同方式使用。

许可证

MIT License · Copyright (c) 2026 Leonxlnx

试试这样做

• 重新设计这个前端页面，目标是高端、有品味、无 AI 味，并输出可运行代码。
• 分析这张参考图的视觉语言，再按同等质感生成网页实现。
• 对现有代码做一次 redesign：保留功能，提升布局、动效、字体和视觉层级。

作者：Leonxlnx 设计师 / å¼€å‘è€ ｜ GitHub Stars 45K ｜ 标签：图片设计 编程开发 已认证

来源：colaos.ai ｜ Skill ID：taste-skill