SuperAPI AI 工具集

design-taste-frontend

前端与建站

查看项目

更新于 10-15 08:51

技能介绍

用途

Taste Skill 是一个前端设计技能,目标是解决 AI 生成界面“千篇一律”的问题。如果你的 UI 看起来和其他 AI 落地页毫无区别,这个技能就是为此设计的。它让编码智能体获得实际的设计品味,产出更强的布局、字体、间距、层级和动效,而不是默认的 AI 模板。该技能基于 Leonxlnx/taste-skill。

主要能力

该技能的核心是“反套路”规则,明确要求不要默认使用以下元素:

  • 紫色 / 靛蓝色渐变
  • 三张等宽功能卡片
  • Inter 字体 + slate-900 配色
  • 居中英雄区 + 网格背景
  • 通用的玻璃拟态效果

它要求先阅读需求简报,推断页面类型、受众和氛围,然后再开始构建。

使用方式

三个设计旋钮

在编写代码之前,需要设定以下三个旋钮:

旋钮 低 高
DESIGN_VARIANCE 干净、居中 不对称、实验性
MOTION_INTENSITY 仅悬停 滚动、磁吸、电影感
VISUAL_DENSITY 通透、画廊感 密集、紧凑

智能体工作流程

  1. 输出一行设计解读:“Reading this as: [page] for [audience], [vibe], leaning toward [system/aesthetic].”
  2. 设定三个旋钮。
  3. 在合适的情况下优先使用真实设计系统(Fluent、Material、Carbon、Primer、shadcn、Tailwind 等)。
  4. 交付完整 UI——不要占位注释,不要半成品区块。
  5. 在宣布完成前运行交付前检查。

安装

完整安装(推荐):

git clone https://github.com/0xwilliamortiz/taste-skill.git
cd taste-skill
npm install -g .
taste-skill

适用场景

  • 落地页、作品集、营销站点、改版设计
  • 当智能体不断产出同样无聊的 AI 外观时
  • 当你希望界面感觉是有意为之的

限制

资料中未提供关于收费、价格、平台支持范围、具体效果指标或使用步骤的更多细节,暂未提供。