Taste Skill 高审美前端设计

taste-skill

给前端需求或已有代码做设计升级，避开 AI 一眼假的紫渐变和居中套路，直接输出可运行代码。

Leonxlnx

设计师 / 开发者

图片设计编程开发已认证

GitHub Stars45K

试试这样做

重新设计这个前端页面，目标是高端、有品味、无 AI 味，并输出可运行代码。

分析这张参考图的视觉语言，再按同等质感生成网页实现。

对现有代码做一次 redesign：保留功能，提升布局、动效、字体和视觉层级。

详细介绍

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/ 下，可通过相同方式使用。