frontend-design

前端设计

创建独具特色、可用于生产的前端界面，避免千篇一律的“AI 垃圾美学”。这项技能结合了设计理念指导和实用的 TypeScript 工具，可用于分析现有设计并生成设计系统资源。

核心原则：选择明确的美学方向，并精准地贯彻。大胆的极繁主义和精致的极简主义都行得通——关键在于有意识地设计，而非追求强烈的视觉效果。

何时使用此技能

适用场景：

• 构建 Web 组件、页面或应用
• 审查现有 CSS，排查设计不一致
• 从旧代码库中提取设计令牌
• 生成配色方案和排版系统
• 为不同框架创建组件模板
• 检查设计元素是否符合无障碍要求

不适用场景：

• 简单的文本内容修改
• 仅涉及后端的工作
• 非视觉功能

先决条件

• Deno 运行时（用于执行脚本）
• 可选：用于分析的现有 CSS／设计文件
• 可选：用于参考的设计令牌文件

快速开始

此技能支持三种模式：

1. 分析模式

审查现有样式、提取令牌、检查无障碍性。

# Audit CSS for design patterns and inconsistencies
deno run --allow-read scripts/analyze-styles.ts styles.css

# Extract design tokens from existing CSS
deno run --allow-read scripts/extract-tokens.ts ./src --format css

# Check accessibility (contrast, focus states)
deno run --allow-read scripts/analyze-accessibility.ts component.tsx

2. 规范模式

创建定义生成内容的 JSON 规范。请参阅 assets/ 中的架构示例。

3. 生成模式

创建配色方案、排版系统、令牌和组件。

# Generate a color palette
deno run --allow-read --allow-write scripts/generate-palette.ts --seed "#2563eb" --theme warm

# Generate typography system
deno run --allow-read --allow-write scripts/generate-typography.ts --display "Playfair Display" --body "Source Sans Pro"

# Generate design tokens file
deno run --allow-read --allow-write scripts/generate-tokens.ts tokens-spec.json ./output/

# Generate a component
deno run --allow-read --allow-write scripts/generate-component.ts --name Button --framework react --styling tailwind

---

说明

阶段 1：分析（可选，但建议执行）

创建新设计前，先审查现有代码，了解当前模式。

1a. 样式分析

分析 CSS 文件，识别颜色、排版、间距和不一致之处：

deno run --allow-read scripts/analyze-styles.ts <input> [options]

Options:
  --tokens <file>    Compare against existing design tokens
  --pretty           Pretty-print JSON output
  --format <type>    Output format: json (default), summary

输出包括：

• 颜色使用清单，并统一为十六进制格式
• 排版模式（字体、字号、字重）
• 间距值分布
• 不一致之处和建议

1b. 令牌提取

从 CSS 文件中提取设计令牌，并转换为标准格式：

deno run --allow-read scripts/extract-tokens.ts <input> [options]

Options:
  --format <type>    Output: css, scss, tailwind, style-dictionary, tokens-studio
  --output-css       Also output CSS variables file

1c. 无障碍审查

检查与设计相关的无障碍问题：

deno run --allow-read scripts/analyze-accessibility.ts <input> [options]

Options:
  --format <type>    Output: json, summary
  --level <AA|AAA>   WCAG conformance level (default: AA)

检查内容包括：

• 颜色对比度
• 焦点指示器是否存在
• 触控目标尺寸
• 是否遵循动态效果偏好设置

---

阶段 2：生成

2a. 配色方案生成

根据种子颜色或主题生成协调的配色方案：

deno run --allow-read --allow-write scripts/generate-palette.ts [options] <output>

Options:
  --seed <color>     Primary seed color (hex)
  --theme <type>     warm, cool, neutral, vibrant, muted, dark, light
  --style <type>     minimalist, bold, organic, corporate, playful
  --shades           Generate 50-950 shade scale
  --semantic         Generate success/warning/error colors
  --contrast <lvl>   Target contrast: AA (default), AAA
  --format <type>    css, scss, tailwind, tokens, json

规范示例（palette-spec.json）：

{
  "seedColors": {
    "primary": "#2563eb",
    "accent": "#f59e0b"
  },
  "theme": "cool",
  "generateShades": true,
  "generateSemantics": true,
  "contrastTarget": "AA",
  "outputFormat": "css"
}

2b. 排版系统生成

生成包含字体栈和字号比例的排版系统：

deno run --allow-read --allow-write scripts/generate-typography.ts [options] <output>

Options:
  --display <font>   Display/heading font family
  --body <font>      Body text font family
  --mono <font>      Monospace font family
  --scale <type>     minor-second, major-second, minor-third, major-third, perfect-fourth, golden-ratio
  --base <px>        Base font size (default: 16)
  --line-height      tight, normal, relaxed
  --responsive       Generate responsive breakpoints
  --format <type>    css, scss, tailwind, tokens

字号比例：

比例	数值	特点
minor-second	1.067	微妙、保守
major-second	1.125	均衡、专业
minor-third	1.200	层次清晰
major-third	1.250	存在感强
perfect-fourth	1.333	醒目、有冲击力
golden-ratio	1.618	戏剧化、富有艺术感

2c. 设计令牌生成

以多种格式生成完整的设计令牌文件：

deno run --allow-read --allow-write scripts/generate-tokens.ts <spec> <output-dir>

规范结构：

{
  "name": "my-design-system",
  "tokens": {
    "color": { "primary": "#2563eb", "secondary": "#64748b" },
    "spacing": { "xs": "0.25rem", "sm": "0.5rem", "md": "1rem" },
    "typography": {
      "fontFamilies": { "display": "Playfair Display", "body": "Inter" },
      "fontSizes": { "sm": "0.875rem", "base": "1rem", "lg": "1.125rem" }
    },
    "shadow": { "sm": "0 1px 2px rgba(0,0,0,0.05)" },
    "border": { "radius": { "sm": "0.25rem", "md": "0.5rem" } },
    "animation": { "duration": { "fast": "150ms", "normal": "300ms" } }
  },
  "outputFormats": ["css", "scss", "tailwind", "ts"]
}

2d. 组件生成

生成采用注重设计的样式的组件模板：

deno run --allow-read --allow-write scripts/generate-component.ts [options] <output-dir>

Options:
  --name <name>      Component name (required)
  --type <type>      button, card, input, modal, navigation, hero, custom
  --framework <fw>   react, vue, svelte, html
  --styling <type>   css, tailwind, css-modules, styled-components, emotion
  --aesthetic <type> minimal, bold, organic, brutalist, glassmorphism, neumorphism
  --animation <lvl>  none, subtle, expressive
  --dark-mode        Include dark mode support
  --tokens <file>    Use design tokens file

框架输出示例：

使用 Tailwind 的 React：

export function Button({ variant = 'primary', children }: ButtonProps) {
  return (
    <button className="px-4 py-2 rounded-lg font-medium transition-all">
      {children}
    </button>
  );
}

使用作用域 CSS 的 Vue：

<template>
  <button :class="['btn', `btn--${variant}`]"><slot /></button>
</template>
<script setup lang="ts">
defineProps<{ variant?: 'primary' | 'secondary' }>();
</script>
<style scoped>.btn { /* styles */ }</style>

Svelte：

<script lang="ts">
  export let variant: 'primary' | 'secondary' = 'primary';
</script>
<button class="btn btn--{variant}"><slot /></button>
<style>.btn { /* styles */ }</style>

---

示例

示例 1：审查并改造旧版 CSS

# 1. Analyze existing styles
deno run --allow-read scripts/analyze-styles.ts ./legacy/styles.css --pretty > audit.json

# 2. Extract tokens from the analysis
deno run --allow-read scripts/extract-tokens.ts ./legacy/styles.css --format css > tokens.css

# 3. Generate improved palette from dominant color
deno run --allow-read --allow-write scripts/generate-palette.ts --seed "#336699" --shades --format css palette.css

示例 2：从头创建设计系统

# 1. Generate color palette
deno run --allow-read --allow-write scripts/generate-palette.ts \
  --seed "#8b5cf6" --theme vibrant --shades --semantic --format css colors.css

# 2. Generate typography system
deno run --allow-read --allow-write scripts/generate-typography.ts \
  --display "Space Grotesk" --body "Inter" --scale major-third --responsive --format css typography.css

# 3. Generate comprehensive tokens
deno run --allow-read --allow-write scripts/generate-tokens.ts design-spec.json ./tokens/

示例 3：生成组件库

# Generate button component for React with Tailwind
deno run --allow-read --allow-write scripts/generate-component.ts \
  --name Button --framework react --styling tailwind --aesthetic bold ./components/

# Generate card component for Vue with CSS modules
deno run --allow-read --allow-write scripts/generate-component.ts \
  --name Card --framework vue --styling css-modules --aesthetic glassmorphism ./components/

# Generate input for Svelte
deno run --allow-read --allow-write scripts/generate-component.ts \
  --name Input --framework svelte --styling css --aesthetic minimal ./components/

示例 4：上线前检查无障碍性

# Audit all components
deno run --allow-read scripts/analyze-accessibility.ts ./src/components --level AAA --format summary

---

脚本参考

脚本	用途	权限
analyze-styles.ts	审查 CSS 中的模式和不一致之处	--allow-read
extract-tokens.ts	从 CSS 中提取设计令牌	--allow-read
analyze-accessibility.ts	检查设计的无障碍性	--allow-read
generate-palette.ts	生成调色板	--allow-read --allow-write
generate-typography.ts	生成排版系统	--allow-read --allow-write
generate-tokens.ts	生成多格式令牌	--allow-read --allow-write
generate-component.ts	生成框架组件	--allow-read --allow-write

---

设计理念

避免千篇一律的“AI 垃圾风格”。详细指南请参阅 references/design-philosophy.md。

核心原则：

• 排版：选择有辨识度的字体，而非默认字体（避免使用 Arial、Inter、Roboto）
• 色彩：使用醒目的主色搭配鲜明的点缀色，而非拘谨的配色
• 动效：采用精心编排的揭示动画，而非零散的微交互
• 构图：运用不对称、叠加和打破网格的元素
• 质感：使用渐变、噪点和图案，而非平面纯色

切勿采用以下风格：

• 白色背景上的紫色渐变
• 系统字体或过度使用的字体系列
• 可预测的卡片式布局
• 千篇一律的 Bootstrap 风格

---

常见问题

“CSS 解析失败”

• 确保 CSS 语法有效
• SCSS/PostCSS 可能需要先进行预处理

“颜色对比度检查失败”

• 检查是否存在无法解析的 CSS 变量
• 提供实际颜色值或令牌文件

“未知框架”

• 支持的框架：react、vue、svelte、html
• 检查拼写并确保使用小写

“不支持此令牌格式”

• 支持的格式：css、scss、tailwind、style-dictionary、tokens-studio、json、ts

---

更多资源

• references/design-philosophy.md - 反对千篇一律风格的详细指南
• references/token-formats.md - 设计令牌格式规范
• references/framework-templates.md - 特定框架的模式
• assets/*.json - 规范对应的 JSON 架构文件

---

相关技能

• web-search - 调研设计灵感和趋势
• research-workflow - 深入研究设计系统