关于 design-taste-frontend
面向编码 Agent 的设计技能，根据页面简述指导布局、字体、间距、层级与动效。它强调从受众需求出发，并避免套用常见的 AI 落地页样式。
主要功能
- 01依据简述确定设计方向
- 02三个可调设计维度
- 03层级与动效指导
- 04适用时采用官方设计系统
适用场景
- 01为特定受众设计落地页
- 02根据简述选择动效和视觉密度
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/design-taste-frontend确认已加载。
详细介绍
Taste Skill
如果你的 UI 看起来和其他 AI 落地页如出一辙，这项技能就是为你准备的。
为编码 Agent 带来真正的设计品味。强化布局、排版、间距、层级和动效，而不是套用默认的 AI 模板。
灵感来自 open Taste Skill 设计原则。
规则
不要默认使用紫色渐变、三张等宽卡片、Inter + slate-900、网格渐变主视觉或千篇一律的玻璃拟态。
先阅读需求。推断页面类型、受众和氛围，然后再开始构建。
三个调节项
| 调节项 | 低 | 高 |
|---|---|---|
| DESIGN_VARIANCE | 简洁、居中 | 不对称、实验性 |
| MOTION_INTENSITY | 仅悬停效果 | 滚动、磁吸、电影感 |
| VISUAL_DENSITY | 疏朗、画廊式 | 密集、充实 |
如何应用
- 编写任何代码之前，先用一行概述设计方向：页面类型 + 受众 + 氛围 + 基础方向。
- 根据需求设定三个调节项。之后的每项决策都应与这些值保持一致。
- 优先打造真实的视觉层级、字体比例、间距节奏和恰到好处的动效，而不是装饰效果。
- 避免使用常见的 AI 落地页模板（主视觉 + 三张等宽功能卡片 + 网格渐变 + Inter + slate）。
- 如果需求对应某个官方设计系统，请优先使用官方包，而不是自行设计令牌。
除非需求要求营造电影感，否则动效应有明确目的且少而精。字体和颜色必须服务于实际受众，而不是默认采用 AI 配色。
评论
支持 Markdown