AgentSkillsCN

aico-frontend-style-extraction

从参考网站或截图中提取设计令牌（颜色、字体、间距、效果），以构建项目设计系统。 独特价值：系统化提取所有设计令牌，并生成标准化的设计系统文件 design-system.md。 当满足以下条件时，可使用此技能： - 用户分享参考网站 URL，并希望提取其风格； - 用户提供截图或图像，请求“提取设计”、“提取风格”； - 执行 /frontend.init，需要根据参考内容创建设计系统； - 用户要求“创建设计系统”、“提取颜色”、“提取字体”； - 在开始前端工作前，需要确立一致的设计令牌。 方法：可通过 Playwright MCP 截图获取 URL，或直接分析截图。 输出：始终将设计写入 docs/reference/frontend/design-system.md。

SKILL.md
--- frontmatter
name: aico-frontend-style-extraction
description: |
  Extract design tokens (colors, typography, spacing, effects) from reference website or screenshot to create project design system.

  UNIQUE VALUE: Creates standardized design-system.md file with all design tokens extracted systematically.

  Use this skill when:
  - User shares reference website URL and wants to extract its style
  - User provides screenshot or image and asks to "extract design", "extract style"
  - Running /frontend.init and need to create design system from reference
  - User asks to "create design system", "extract colors", "extract typography"
  - Need to establish consistent design tokens before starting frontend work

  Methods: URL (via Playwright MCP screenshot) or direct screenshot analysis
  Output: ALWAYS write to docs/reference/frontend/design-system.md

Style Extraction

Language Configuration

Before generating any content, check aico.json in project root for language field to determine the output language. If not set, default to English.

Process

  1. •Get reference material:
    • •URL: Use Playwright MCP to take screenshot, then analyze
    • •Screenshot: Analyze directly
    • •Description: Generate tokens based on style keywords
  2. •Extract systematically using the checklist below
  3. •Save output: ALWAYS write to docs/reference/frontend/design-system.md

Extraction Checklist

Colors

  • • Background colors (page, card, section)
  • • Text colors (primary, secondary, muted)
  • • Accent/brand colors
  • • Border colors
  • • State colors (success, warning, error)

Typography

  • • Font families (headings, body, mono)
  • • Font sizes (scale from xs to 4xl)
  • • Font weights (normal, medium, semibold, bold)
  • • Line heights

Spacing & Layout

  • • Border radius values
  • • Container max-width
  • • Section padding
  • • Component spacing scale

Effects

  • • Shadows (sm, md, lg)
  • • Borders & dividers
  • • Transitions

Output Template

markdown
# Design System

## Colors

### Brand

- Primary: #xxx
- Secondary: #xxx

### Text

- Primary: #xxx
- Secondary: #xxx
- Muted: #xxx

### Background

- Page: #xxx
- Card: #xxx

## Typography

### Font Family

- Headings: "Font Name", sans-serif
- Body: "Font Name", sans-serif

### Font Size

- sm: 0.875rem
- base: 1rem
- lg: 1.125rem
- xl: 1.25rem

## Spacing

### Border Radius

- sm: 0.125rem
- md: 0.375rem
- lg: 0.5rem

## Effects

### Shadow

- sm: 0 1px 2px rgba(0,0,0,0.05)
- md: 0 4px 6px rgba(0,0,0,0.1)

Playwright MCP Usage

If user provides URL:

  1. •browser_navigate to URL
  2. •browser_take_screenshot (fullPage: true)
  3. •Analyze screenshot for design tokens

Key Rules

  • •ALWAYS extract actual hex values from reference - don't guess
  • •MUST note shadows, borders, transitions
  • •ALWAYS save to docs/reference/frontend/design-system.md

Common Mistakes

  • •❌ Guess colors without checking → ✅ Extract actual hex values
  • •❌ Skip subtle details → ✅ Note shadows, borders, transitions
  • •❌ Ignore responsive differences → ✅ Document mobile vs desktop