61 lines
2.2 KiB
Markdown
61 lines
2.2 KiB
Markdown
---
|
||
title: Taste Skill（前端设计 · 反模板化）
|
||
type: reference
|
||
tags:
|
||
- AI agent
|
||
- skill
|
||
- 前端设计
|
||
- 反模板化
|
||
- design-taste-frontend
|
||
created: 2026-08-18
|
||
audience: human + AI
|
||
language: zh-CN
|
||
---
|
||
|
||
# Taste Skill（前端设计 · 反模板化）
|
||
|
||
> The Anti-Slop Frontend Framework for AI Agents —— 防止 AI 生成千篇一律的模板化前端界面。
|
||
|
||
## 基本信息
|
||
|
||
| 项目 | 内容 |
|
||
|---|---|
|
||
| 仓库 | https://github.com/Leonxlnx/taste-skill |
|
||
| 许可证 | MIT |
|
||
| Stars | 约 7.7 万 |
|
||
| 安装名 | `design-taste-frontend`（v2 实验版为默认） |
|
||
| 官网 | https://www.tasteskill.dev |
|
||
|
||
## 核心机制（v2）
|
||
|
||
1. **Brief Inference** — 先读懂需求，输出一行 "Design Read" 再动手
|
||
2. **三个旋钮 (Three Dials)** — 所有布局/动效/密度决策由旋钮门控：
|
||
- `DESIGN_VARIANCE`（1=完美对称 ↔ 10=艺术混乱）
|
||
- `MOTION_INTENSITY`（1=静态 ↔ 10=电影级/物理动效）
|
||
- `VISUAL_DENSITY`（1=画廊留白 ↔ 10=仪表盘密集）
|
||
3. **Brief → 设计系统映射** — 按需求套用官方设计系统（Radix/Tailwind v4/Carbon 等），禁止手写山寨 CSS；诚实规则：不要导入系统 token 却覆盖 90%
|
||
4. **AI Tells 禁令** — 禁止 em-dash、章节编号 eyebrow、滚动提示、重复 CTA 等 AI 特征模式
|
||
5. **Pre-flight 检查** — 所有勾选通过才算完成
|
||
|
||
## 适用范围
|
||
|
||
- 适用：落地页、作品集、网站改版
|
||
- 不适用：仪表盘、数据表格、多步骤产品 UI
|
||
|
||
## 相关变体
|
||
|
||
| 变体 | 安装名 | 说明 |
|
||
|---|---|---|
|
||
| taste-skill（默认） | `design-taste-frontend` | v2 实验版，推荐 |
|
||
| taste-skill-v1 | `design-taste-frontend-v1` | 旧版，行为固定 |
|
||
| gpt-tasteskill | `gpt-taste` | 更激进，面向 GPT/Codex |
|
||
| image-to-code-skill | `image-to-code` | 图片 → 分析 → 实现网站 |
|
||
| redesign-skill | `redesign-design-taste` | 已有代码库改版 |
|
||
| soft / minimalist / brutalist | — | 视觉方向已定时的补充 |
|
||
| imagegen-frontend-web/mobile、brandkit | — | 交付为图片（参考板/品牌包） |
|
||
|
||
## 安装方式
|
||
|
||
```bash
|
||
npx skills add https://github.com/Leonxlnx/taste-skill --skill "design-taste-frontend"
|
||
``` |