Name: Graphic Design Skill
Author: fabioc-aloha

搜索技能.../

Graphic Design Skill | Skills Pool

┌─────┬─────┬─────┬─────┐
│  1  │  2  │  3  │  4  │   12-column grid
├─────┼─────┼─────┼─────┤   (most flexible)
│  5  │  6  │  7  │  8  │
├─────┼─────┼─────┼─────┤
│  9  │ 10  │ 11  │ 12  │
└─────┴─────┴─────┴─────┘

┌─────────┬─────────┬─────────┐
│         │    ●    │         │  Place key elements
├─────────┼─────────┼─────────┤  at intersection
│    ●    │         │    ●    │  points for dynamic
├─────────┼─────────┼─────────┤  composition
│         │    ●    │         │
└─────────┴─────────┴─────────┘

        Primary
           ●
          /|\
         / | \
        /  |  \
       ●───●───●
   Secondary  Tertiary

Scheme	Description	Mood
Monochromatic	One hue, varied lightness	Cohesive, elegant
Complementary	Opposite on wheel	High contrast, vibrant
Analogous	Adjacent on wheel	Harmonious, natural
Triadic	Three equidistant	Balanced, dynamic
Split-complementary	Base + two adjacent to complement	Softer contrast

Color	Associations	Use Cases
Blue	Trust, stability, tech	Corporate, software
Green	Growth, nature, success	Health, finance
Red	Energy, urgency, passion	CTAs, alerts
Purple	Creativity, luxury	Premium, creative
Orange	Friendly, energetic	Social, youth
Yellow	Optimism, attention	Highlights, warnings

<svg viewBox="0 0 width height" xmlns="...">
  <defs>
    <!-- Reusable definitions -->
    <linearGradient id="grad1">...</linearGradient>
    <filter id="shadow">...</filter>
  </defs>

  <!-- Background layer -->
  <rect .../>

  <!-- Main content -->
  <g transform="translate(x, y)">
    <!-- Grouped elements -->
  </g>

  <!-- Foreground/overlay -->
</svg>

Element	Use	Key Attributes
`<rect>`	Rectangles, backgrounds	x, y, width, height, rx (rounded)
`<circle>`	Circles, dots	cx, cy, r
`<ellipse>`	Ovals	cx, cy, rx, ry
`<line>`	Straight lines	x1, y1, x2, y2
`<path>`	Complex shapes	d (path data)
`<text>`	Typography	x, y, text-anchor, dominant-baseline
`<g>`	Grouping	transform

<!-- Horizontal alignment -->
text-anchor="start|middle|end"

<!-- Vertical alignment -->
dominant-baseline="auto|middle|central|hanging"

<!-- Centered text -->
<text x="50%" y="50%" text-anchor="middle" dominant-baseline="central">
  Perfectly Centered
</text>

<!-- Linear gradient -->
<linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="0%">
  <stop offset="0%" stop-color="#007ACC"/>
  <stop offset="100%" stop-color="#00a8e8"/>
</linearGradient>

<!-- Radial gradient -->
<radialGradient id="glow" cx="50%" cy="50%" r="50%">
  <stop offset="0%" stop-color="#007ACC" stop-opacity="0.4"/>
  <stop offset="100%" stop-color="#007ACC" stop-opacity="0"/>
</radialGradient>

┌─────────────────────────────────────────┐
│  ┌─────────────────────────────────┐    │
│  │         VISUAL ELEMENT          │    │  Top third: Logo/Icon
│  └─────────────────────────────────┘    │
│                                         │
│           MAIN HEADLINE                 │  Middle: Primary message
│           Subtitle Text                 │
│                                         │
│  [Badge 1]  [Badge 2]  [Badge 3]        │  Bottom third: CTAs/Details
└─────────────────────────────────────────┘

<!-- Rounded pill badge -->
<g>
  <rect x="-50" y="-16" width="100" height="32" rx="16"
        fill="#007ACC" opacity="0.15"/>
  <text x="0" y="0" text-anchor="middle" dominant-baseline="central"
        font-size="12" fill="#94a3b8">Label</text>
</g>

┌────────────────────┐
│ ┌──────────────┐   │  Outer: Padding zone
│ │              │   │  Inner: Safe area
│ │   CONTENT    │   │  Content: Icon artwork
│ │              │   │
│ └──────────────┘   │  Standard: 24×24, 16×16
└────────────────────┘

Level	Purpose	Techniques
Primary	First thing seen	Largest, boldest, highest contrast
Secondary	Supporting info	Medium size, moderate weight
Tertiary	Details	Smaller, lighter, subtle

Level	Purpose	Techniques
Primary	First thing seen	Largest, boldest, highest contrast
Secondary	Supporting info	Medium size, moderate weight
Tertiary	Details	Smaller, lighter, subtle

Type	Characteristics	Best For
Symmetrical	Mirror image, formal	Corporate, traditional
Asymmetrical	Visual weight balanced, dynamic	Modern, creative
Radial	Elements radiate from center	Logos, icons

Principle	Rule
Edge alignment	Elements share common edges
Center alignment	Elements share center axis
Baseline alignment	Text shares baseline
Optical alignment	Visually aligned (may differ from mathematical)

Level	Size	Use
Display	72px	Hero headlines
H1	48px	Page titles
H2	36px	Section headers
H3	28px	Subsections
Body	16px	Main content
Caption	12px	Supporting text

Combination	Example	Vibe
Serif + Sans	Georgia + Helvetica	Classic, professional
Sans + Sans	Montserrat + Open Sans	Modern, clean
Display + Body	Playfair + Source Sans	Elegant, editorial

WCAG Level	Contrast Ratio	Use
AA (normal)	4.5:1	Body text
AA (large)	3:1	18px+ or 14px bold
AAA	7:1	Maximum accessibility

Command	Meaning	Example
M	Move to	M 10 20
L	Line to	L 30 40
H	Horizontal line	H 50
V	Vertical line	V 60
Q	Quadratic curve	Q cx cy, x y
C	Cubic curve	C cx1 cy1, cx2 cy2, x y
Z	Close path	Z

Transform	Syntax	Use
Translate	translate(x, y)	Move element
Rotate	rotate(deg, cx, cy)	Spin around point
Scale	scale(x, y)	Resize
Skew	skewX(deg) / skewY(deg)	Shear

Platform	Size	Aspect
VS Code Marketplace	1280×640	2:1
GitHub Social	1280×640	2:1
Twitter Header	1500×500	3:1
LinkedIn Banner	1584×396	4:1
Open Graph	1200×630	~1.9:1

Style	Characteristics	Use
Outlined	Stroke only, no fill	Light, modern UI
Filled	Solid shapes	Bold, clear visibility
Duotone	Two tones/colors	Distinctive, branded
Glyph	Single color, simplified	System icons

Token	Value	Use
xs	4px	Tight spacing
sm	8px	Default gap
md	16px	Section spacing
lg	24px	Component gaps
xl	32px	Major sections
2xl	48px	Hero spacing

Level	Shadow	Use
0	None	Flat elements
1	0 1px 2px	Subtle lift
2	0 2px 4px	Cards
3	0 4px 8px	Dropdowns
4	0 8px 16px	Modals

Token	Value	Use
none	0	Sharp corners
sm	4px	Subtle rounding
md	8px	Standard buttons
lg	16px	Cards, pills
full	9999px	Circles, pills

Graphic Design Skill

Design Principles

Visual Hierarchy

Hierarchy Tools

Graphic Design Skill

Design Principles

Visual Hierarchy

Hierarchy Tools

Balance Types

Layout & Composition

Grid Systems

Golden Ratio (1:1.618)

Rule of Thirds

Alignment Principles

Typography

Type Scale (1.25 ratio)

Font Pairing Rules

Typography Best Practices

Color Theory

Color Relationships

Color Schemes

Color Psychology

Contrast & Accessibility

SVG Design

SVG Structure

Common SVG Elements

SVG Path Commands

SVG Text Alignment

SVG Gradients

SVG Transforms

Banner & Marketing Design

Banner Dimensions

Banner Composition

Badge/Pill Design

Icon Design

Icon Grid

Icon Principles

Icon Styles

Design Systems

Spacing Scale (8px base)

Elevation/Shadow

Border Radius Scale

Design Review Checklist

Visual Quality

Typography

Color

Technical

Synapses

High-Strength Connections

Medium-Strength Connections

Supporting Connections

Trello

Taskflow Inbox Triage

Things Mac

Accessibility

Open a Pull Request

Frontend Slides