design-taste-frontend

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Taste Skill

If your UI looks like every other AI landing page, this skill is for you.

Gives coding agents actual design taste. Stronger layout, typography, spacing, hierarchy and motion — instead of the default AI template.

Inspired by the open Taste Skill design principles.

如果你的UI看起来和其他所有AI着陆页一模一样，那么这个技能就是为你准备的。

为编码Agent赋予真正的设计审美。打造更出色的布局、排版、间距、层级和动效——而非默认的AI模板。

灵感源自开源的Taste Skill设计原则。

The rule

规则

Do not default to purple gradients, three equal cards, Inter + slate-900, mesh heroes, or generic glassmorphism.

Read the brief first. Infer page kind, audience and vibe. Then build.

切勿默认使用紫色渐变、三等分卡片、Inter字体+slate-900配色、网格英雄区或通用毛玻璃效果。

先读懂需求简报，推断页面类型、受众和风格，再开始构建。

Three dials

三个调节参数

Dial	Low	High
DESIGN_VARIANCE	Clean, centered	Asymmetric, experimental
MOTION_INTENSITY	Hover only	Scroll, magnetic, cinematic
VISUAL_DENSITY	Airy, gallery	Dense, packed

调节参数	低档位	高档位
DESIGN_VARIANCE	简洁居中	不对称、实验性
MOTION_INTENSITY	仅悬停动效	滚动、磁吸、电影级
VISUAL_DENSITY	轻盈画廊风	紧凑密集风

How to apply

应用方法

Before any code, produce a one-line design read: page kind + audience + vibe + foundation direction.
Set the three dials from the brief. Keep every subsequent decision consistent with those values.
Prefer real visual hierarchy, type scale, spacing rhythm and intentional motion over decorative effects.
Reject the familiar AI landing-page template (hero + three equal feature cards + gradient mesh + Inter + slate).
When the brief maps to an official design system, reach for the official package instead of inventing tokens.

Motion should be intentional and sparse unless the brief asks for cinematic energy. Type and color must serve the actual audience, not a default AI palette.

编写代码前，生成一句设计解读：页面类型 + 受众 + 风格 + 基础方向。
根据需求简报设置三个调节参数，后续所有决策均需与这些参数保持一致。
优先采用真实的视觉层级、字体比例、间距韵律和有目的性的动效，而非装饰性效果。
摒弃常见的AI着陆页模板（英雄区 + 三个等分功能卡片 + 渐变网格 + Inter字体 + slate配色）。
当需求简报对应官方设计系统时，使用官方组件包而非自行创建设计令牌。