frontend-design

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Frontend Design

前端设计

Create distinctive, production-grade frontend interfaces that avoid generic "AI slop" aesthetics. This skill combines design philosophy guidance with practical TypeScript tooling for analyzing existing designs and generating design system artifacts.

Core Principle: Choose a clear aesthetic direction and execute it with precision. Bold maximalism and refined minimalism both work - the key is intentionality, not intensity.

创建特色鲜明的生产级前端界面，避免通用的"AI敷衍式"美学风格。此技能将设计理念指导与实用的TypeScript工具相结合，用于分析现有设计并生成设计系统工件。

核心原则：选择清晰的美学方向并精准执行。大胆的极繁主义和精致的极简主义均适用——关键在于设计的目的性，而非强度。

When to Use This Skill

什么时候使用此技能

Use when:

Building web components, pages, or applications
Auditing existing CSS for design inconsistencies
Extracting design tokens from legacy codebases
Generating color palettes and typography systems
Creating component templates across frameworks
Checking accessibility compliance for design elements

Don't use when:

Simple text content changes
Backend-only work
Non-visual functionality

适用场景：

构建Web组件、页面或应用程序
审计现有CSS中的设计不一致问题
从遗留代码库中提取设计令牌
生成调色板和排版系统
跨框架创建组件模板
检查设计元素的可访问性合规性

不适用场景：

简单的文本内容修改
仅后端工作
非视觉功能开发

Prerequisites

前提条件

Deno runtime (for script execution)
Optional: Existing CSS/design files for analysis
Optional: Design tokens file for reference

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

Quick Start

快速开始

This skill operates in three modes:

此技能有三种运行模式：

1. Analyze Mode

1. 分析模式

Audit existing styles, extract tokens, check accessibility.

bash

undefined

审计现有样式、提取令牌、检查可访问性。

bash

undefined

Audit CSS for design patterns and inconsistencies

审计CSS中的设计模式和不一致问题

deno run --allow-read scripts/analyze-styles.ts styles.css

Extract design tokens from existing CSS

从现有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

undefined

deno run --allow-read scripts/analyze-accessibility.ts component.tsx

undefined

2. Specify Mode

2. 定义模式

Create JSON specifications defining what to generate. See

assets/

for schema examples.

创建用于指定生成内容的JSON规范。请查看

assets/

目录下的 schema 示例。

3. Generate Mode

3. 生成模式

Create palettes, typography systems, tokens, and components.

bash

undefined

创建调色板、排版系统、令牌和组件。

bash

undefined

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

---

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

---

Instructions

第一阶段：分析（可选但推荐）

Phase 1: Analysis (Optional but Recommended)

—

Before creating new designs, audit existing code to understand current patterns.

在创建新设计之前，审计现有代码以了解当前模式。

1a. Style Analysis

1a. 样式分析

Analyze CSS files to identify colors, typography, spacing, and inconsistencies:

bash

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

Output includes:

Color usage inventory with hex normalization
Typography patterns (fonts, sizes, weights)
Spacing value distribution
Inconsistencies and recommendations

分析CSS文件以识别颜色、排版、间距和不一致问题：

bash

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

选项：
  --tokens <file>    与现有设计令牌进行比较
  --pretty           美观打印JSON输出
  --format <type>    输出格式：json（默认）、summary

输出内容包括：

颜色使用清单（含十六进制标准化）
排版模式（字体、大小、字重）
间距值分布
不一致问题及改进建议

1b. Token Extraction

1b. 令牌提取

Extract design tokens from CSS files into standardized formats:

bash

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

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

bash

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

选项：
  --format <type>    输出格式：css、scss、tailwind、style-dictionary、tokens-studio
  --output-css       同时输出CSS变量文件

1c. Accessibility Audit

1c. 可访问性审计

Check design-related accessibility issues:

bash

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

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

Checks include:

Color contrast ratios
Focus indicator presence
Touch target sizes
Motion preference respect

检查与设计相关的可访问性问题：

bash

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

选项：
  --format <type>    输出格式：json、summary
  --level <AA|AAA>   WCAG合规级别（默认：AA）

检查内容包括：

颜色对比度
焦点指示器存在性
触摸目标尺寸
运动偏好适配

Phase 2: Generation

第二阶段：生成

2a. Color Palette Generation

2a. 调色板生成

Generate cohesive color palettes from seed colors or themes:

bash

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

Example specification (

palette-spec.json

json

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

从种子颜色或主题生成协调的调色板：

bash

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

选项：
  --seed <color>     主种子颜色（十六进制）
  --theme <type>     主题：warm、cool、neutral、vibrant、muted、dark、light
  --style <type>     风格：minimalist、bold、organic、corporate、playful
  --shades           生成50-950的色调梯度
  --semantic         生成成功/警告/错误颜色
  --contrast <lvl>   目标对比度：AA（默认）、AAA
  --format <type>    输出格式：css、scss、tailwind、tokens、json

示例规范（

palette-spec.json

）：

json

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

2b. Typography System Generation

2b. 排版系统生成

Generate typography systems with font stacks and scales:

bash

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

Type scales:

Scale	Ratio	Character
minor-second	1.067	Subtle, conservative
major-second	1.125	Balanced, professional
minor-third	1.200	Clear hierarchy
major-third	1.250	Strong presence
perfect-fourth	1.333	Bold, impactful
golden-ratio	1.618	Dramatic, artistic

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

bash

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

选项：
  --display <font>   标题字体家族
  --body <font>      正文字体家族
  --mono <font>      等宽字体家族
  --scale <type>     比例：minor-second、major-second、minor-third、major-third、perfect-fourth、golden-ratio
  --base <px>        基础字体大小（默认：16）
  --line-height      行高：tight、normal、relaxed
  --responsive       生成响应式断点
  --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. Design Token Generation

2c. 设计令牌生成

Generate comprehensive design token files in multiple formats:

bash

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

Specification structure:

json

{
  "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"]
}

生成多格式的综合设计令牌文件：

bash

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

规范结构：

json

{
  "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. Component Generation

2d. 组件生成

Generate component templates with design-focused styling:

bash

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

Framework output examples:

React with Tailwind:

tsx

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

Vue with scoped 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:

svelte

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

生成以设计为核心的组件模板：

bash

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

选项：
  --name <name>      组件名称（必填）
  --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        包含深色模式支持
  --tokens <file>    使用设计令牌文件

框架输出示例：

React + Tailwind：

tsx

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

Vue + 作用域CSS：

vue

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

Svelte：

svelte

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

Examples

示例

Example 1: Audit and Modernize Legacy CSS

示例1：审计并现代化遗留CSS

bash

undefined

bash

undefined

1. Analyze existing styles

1. 分析现有样式

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

2. Extract tokens from the analysis

2. 从分析结果中提取令牌

deno run --allow-read scripts/extract-tokens.ts ./legacy/styles.css --format css > tokens.css

3. Generate improved palette from dominant color

3. 从主色调生成改进的调色板

deno run --allow-read --allow-write scripts/generate-palette.ts --seed "#336699" --shades --format css palette.css

undefined

deno run --allow-read --allow-write scripts/generate-palette.ts --seed "#336699" --shades --format css palette.css

undefined

Example 2: Create Design System from Scratch

示例2：从零开始创建设计系统

bash

undefined

bash

undefined

1. Generate color palette

1. 生成调色板

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

2. Generate typography system

2. 生成排版系统

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

3. 生成综合令牌

deno run --allow-read --allow-write scripts/generate-tokens.ts design-spec.json ./tokens/

undefined

deno run --allow-read --allow-write scripts/generate-tokens.ts design-spec.json ./tokens/

undefined

Example 3: Generate Component Library

示例3：生成组件库

bash

undefined

bash

undefined

Generate button component for React with Tailwind

为React + 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

为Vue + 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

为Svelte生成输入组件

deno run --allow-read --allow-write scripts/generate-component.ts
--name Input --framework svelte --styling css --aesthetic minimal ./components/

undefined

deno run --allow-read --allow-write scripts/generate-component.ts
--name Input --framework svelte --styling css --aesthetic minimal ./components/

undefined

Example 4: Accessibility Check Before Launch

示例4：上线前的可访问性检查

bash

undefined

bash

undefined

Audit all components

审计所有组件

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

---

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

---

Script Reference

脚本参考

Script	Purpose	Permissions
`analyze-styles.ts`	Audit CSS for patterns and inconsistencies	`--allow-read`
`extract-tokens.ts`	Extract design tokens from CSS	`--allow-read`
`analyze-accessibility.ts`	Check design accessibility	`--allow-read`
`generate-palette.ts`	Generate color palettes	`--allow-read --allow-write`
`generate-typography.ts`	Generate typography systems	`--allow-read --allow-write`
`generate-tokens.ts`	Generate multi-format tokens	`--allow-read --allow-write`
`generate-component.ts`	Generate framework components	`--allow-read --allow-write`

脚本	用途	权限
`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`

Design Philosophy

设计理念

Avoid generic "AI slop" aesthetics. See

references/design-philosophy.md

for detailed guidance.

Key principles:

Typography: Choose distinctive fonts, not defaults (avoid Arial, Inter, Roboto)
Color: Dominant colors with sharp accents, not timid palettes
Motion: Orchestrated reveals over scattered micro-interactions
Composition: Asymmetry, overlap, grid-breaking elements
Texture: Gradients, noise, patterns - not flat solid colors

Never converge on:

Purple gradients on white backgrounds
System fonts or overused families
Predictable card-based layouts
Cookie-cutter Bootstrap aesthetics

避免通用的"AI敷衍式"美学。详细指导请查看

references/design-philosophy.md

。

核心原则：

排版：选择有特色的字体，而非默认字体（避免Arial、Inter、Roboto）
颜色：主色调搭配鲜明的强调色，而非保守的调色板
动效：协调的过渡效果，而非零散的微交互
布局：不对称、重叠、打破网格的元素
质感：渐变、纹理、图案——而非纯色平面

绝对避免：

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

Common Issues

常见问题

"CSS parsing failed"

Ensure valid CSS syntax
SCSS/PostCSS may need preprocessing first

"Color contrast check failed"

Check for CSS variables that couldn't be resolved
Provide the actual color values or tokens file

"Unknown framework"

Supported: react, vue, svelte, html
Check spelling and lowercase

"Token format not supported"

Supported: css, scss, tailwind, style-dictionary, tokens-studio, json, ts

"CSS解析失败"

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

"颜色对比度检查失败"

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

"未知框架"

支持的框架：react、vue、svelte、html
检查拼写是否正确且为小写

"不支持的令牌格式"

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