Skip to content
Back to skills

Frontend Aesthetic Direction

ASecurity

Generates 3-4 distinct aesthetic directions after starter kits have been rejected or when the user explicitly requests custom directions. Each direction has a clear aesthetic thesis, named color palette, font pairing with rationale, layout concept with ASCII wireframe, and a signature element. Rejects AI default aesthetics.

  • 417 stars
  • 0 votes
  • 0 copies
  • 6 views
  • Added September 8, 2026
designfrontend

Security analysis

A100/100

Scanned September 8, 2026

npx -y skills add infometa/workbuddyskills --skill frontend-aesthetic-direction --agent claude-code

Installs into .claude/skills of the current project.

Are you the author of Frontend Aesthetic Direction?

Add the live security badge to your README. It updates with every re-scan.

Security grade badge for Frontend Aesthetic Direction
[![Security: A — Skills Directory](https://www.skillsdirectory.com/api/skills/infometa-frontend-aesthetic-direction/badge)](https://www.skillsdirectory.com/skills/infometa-frontend-aesthetic-direction)

More formats (shields.io, HTML) on the badges page. Keep it an A: scan every change in CI with Pro.

Download with Pro
SKILL.md
---
name: frontend-aesthetic-direction
description: "Generates 3-4 distinct aesthetic directions after starter kits have been rejected or when the user explicitly requests custom directions. Each direction has a clear aesthetic thesis, named color palette, font pairing with rationale, layout concept with ASCII wireframe, and a signature element. Rejects AI default aesthetics."
trigger:
  - 用户拒绝了所有预制模板(路径 A → 路径 B 降级)后
  - 用户明确要求从零定制美学方向时
  - DesignBrief 完成后,aesthetic-starter-kits 被拒绝后进入 ConceptRoutes 阶段时
---

# 美学方向(Frontend Aesthetic Direction)

## 触发时机

- 用户拒绝了所有预制模板(路径 A → 路径 B 降级)后,需要从零定制美学方向时
- 用户明确要求自定义美学方向时
- DesignBrief 完成后,aesthetic-starter-kits 被拒绝后进入 ConceptRoutes 阶段时

## 执行内容

给出 **3 到 4 个美学方向**,每个方向必须有明确的美学主张,**不能是模型的默认审美**(参见强禁止清单)。

### 每个方向必须包含

**1. 方向名称和一句话主张**
- 名称要有辨识度,不要"现代简约风"这种废话
- 主张说明这个方向的美学立场——它在反抗什么,在主张什么

**2. 配色方案(4 到 6 个命名色值)**
- 每个色值要有名字(如 "Midnight Ink #1a1a2e")
- 说明主色、辅助色、强调色、中性色的角色分工
- 禁止紫色/蓝紫渐变、禁止奶油底+赤陶橙、禁止近黑底+酸性绿/朱红

**3. 字体配对(display + body)**
- 标题字体(display)+ 正文字体(body)
- 说明为什么选这对——它们在一起传达了什么气质
- 禁止 Inter、Roboto、Arial 或系统字体作为默认选择

**4. 布局概念(一句话描述 + ASCII 线框)**
- 一句话描述布局策略
- ASCII 线框展示大致结构

**5. 签名元素**
- 这个方向最被记住的一个独特视觉元素
- 不是"好看的渐变"这种泛泛之谈,而是一个具体的、可识别的设计决策

### 输出格式

```markdown
# ConceptRoutes

---

## 方向 A:{方向名称}

**主张**:{一句话美学主张}

### 配色方案
| 角色 | 色名 | 色值 |
|------|------|------|
| 主色 | {名称} | #{hex} |
| 辅助色 | {名称} | #{hex} |
| 强调色 | {名称} | #{hex} |
| 中性色 | {名称} | #{hex} |
| 背景色 | {名称} | #{hex} |

### 字体配对
- Display: {字体名} — {为什么选它}
- Body: {字体名} — {为什么选它}
- 配对理由: {它们在一起传达了什么}

### 布局概念
{一句话描述}

{ASCII 线框}

### 签名元素
{这个方向最被记住的独特元素}

---

## 方向 B:{...}

{同上结构}

---

## 方向 C:{...}

{同上结构}
```

## 注意事项

- 每个方向必须有**不同的美学主张**,不是同一个风格换个配色。
- **绝对禁止**以下三种 AI 默认审美(除非用户明确要求并注明是有意识选择):
  1. 奶油底 + 高对比衬线 + 赤陶橙强调色
  2. 近黑底 + 单一亮色(酸性绿或朱红)
  3. 报纸风 + 零圆角 + 密集列
- 给出方向后让用户选择,不要替用户决定。
- 用与用户相同的语言输出。

Attribution

Is this your skill, or is something wrong with this listing? Request removal or report an issue. Author removals are honored within 72 hours.

View all in design →

Comments

Loading comments…

Newsletter

Get the weekly list of safe new skills, and the ones we pulled.