Website 设计系统

设计与多媒体社区

作者仓库星标 136
作者仓库 envilder

解读按原文结构重写，命令、链接、术语均保留；右侧可核对作者原始 SKILL.md

原文结构

Themes：The site uses data-theme attribute on <html>. Two themes are supported: Theme · Selector · Palette Retro (default) · :root · Game Boy green
Responsive Breakpoints：Mobile-first approach. Default styles target mobile; expand with min-width. Breakpoint · Target · Pattern Default · Mobile · Single column, compact spacing
Grid Utilities：Use existing grid classes: .grid-2, .grid-3, .grid-4.

适用与边界

When to Use：Creating new Astro components or page sections Adding or modifying CSS (global or scoped) Choosing between existing utility classes
Rules：All colors MUST use CSS variables — never hardcode hex values New variables MUST be defined in both :root (retro) and [data-theme="light"] blocks in global.css

原文中的明确线索

要点：「All colors MUST use CSS variables」、「both」、「Rules and patterns for the Envilder website's pure CSS design system.」、「The site uses data-theme attribute on <html>.」、「Mobile-first approach.」、「Use existing grid classes: .grid-2, .grid-3, .grid-4.」
文件与命令：data-theme、<html>、:root、[data-theme="light"]、global.css、min-width、min-width: 640px、min-width: 1024px

流狐整理：以上内容来自当前 SKILL.md 的章节与原词；未补写作者没有声明的工具、兼容性或能力。

Website Design System

Rules and patterns for the Envilder website's pure CSS design system.

When to Use

Creating new Astro components or page sections
Adding or modifying CSS (global or scoped)
Choosing between existing utility classes
Defining new CSS variables
Reviewing PRs that touch website styling

Themes

The site uses data-theme attribute on <html>. Two themes are supported:

Theme	Selector	Palette
Retro (default)	`:root`	Game Boy green
Light	`[data-theme="light"]`	Warm neutrals

Rules

All colors MUST use CSS variables — never hardcode hex values
New variables MUST be defined in both :root (retro) and [data-theme="light"] blocks in global.css
Never modify the theme switcher mechanism or its localStorage key

/* ✓ Correct */
color: var(--color-text);
background: var(--color-bg);

/* ✗ NEVER */
color: #8bac0f;
background: #1a1a2e;

Responsive Breakpoints

Mobile-first approach. Default styles target mobile; expand with min-width.

Breakpoint	Target	Pattern
Default	Mobile	Single column, compact spacing
`min-width: 640px`	Tablet	2-column grids, expanded spacing
`min-width: 1024px`	Desktop	3-4 column grids, full layout

Grid Utilities

Use existing grid classes: .grid-2, .grid-3, .grid-4.

Spacing & Layout

Use the spacing scale defined in global.css:

Variables: --space-xs through --space-4xl
Container max-width: --max-width (1200px)

Typography

Use	Font	Access
Section titles / pixel style	Press Start 2P	Via `.pixel-card h3` or custom class
Body text	Inter	Default (inherited)
Code / terminal	JetBrains Mono	`<code>`, `<pre>`, or mono class

Use clamp() for fluid typography
Never use fixed px font sizes

Component Patterns

Reuse existing CSS classes for visual consistency:

Class	Purpose
`.pixel-card`	Bordered cards with pixel corner notches
`.pixel-icon`	Emoji with pixelated filter
`.pixel-shadow`	4px offset retro shadow
`.badge`	Small label badges
`.pixel-divider`	Section separator
`.scanlines`	CRT overlay effect (use sparingly)
`.section`	Standard section wrapper with vertical padding

File Locations

What	Where
Global CSS	`src/website/src/styles/global.css`
Components	`src/website/src/components/*.astro`
Layout	`src/website/src/layouts/BaseLayout.astro`

Constraints

DO NOT install CSS frameworks or UI libraries — use existing pure CSS
DO NOT hardcode colors — always CSS variables from global.css
DO NOT use fixed pixel font sizes — use clamp() or relative units
DO NOT break existing responsive layouts when adding new sections
DO NOT add JavaScript frameworks (React, Vue) — Astro components + <script> tags only
ONLY add new CSS variables if defined in both theme blocks

流狐档案作者与许可取自来源；运行、权限和网络为流狐检测或估算

流狐分类: 设计与多媒体
作者声明 Agent: 未找到明确声明；不据此推断已兼容或已测试
静态检查: 88 / 100 · 启发式扫描，不代表运行安全
作者 / 版本 / 许可: @macalbert · 未声明 license
流狐 Token 估算: 低消耗
流狐接入估算: 即装即用
是否需要外部 API Key: 未发现要求
检测到的系统要求: 未声明
底层运行要求: 未声明
检测到的文件与系统行为: 只读
允许写入 / 修改
检测到的网络行为: 仅限本地
安装命令数: 无（仅作为资料）

档案由构建时根据 SKILL.md 与安装命令自动衍生，可能与作者实际意图存在差异。

需要注意： 未限定 allowed-tools，默认拥有全部工具权限。

输出预览 website-design-system.preview

作者没有在当前 SKILL.md 中定义固定输出样例。

SKILL.md SKILL.md

# Website Design System

Rules and patterns for the Envilder website's pure CSS design system.

## When to Use

- Creating new Astro components or page sections
- Adding or modifying CSS (global or scoped)
- Choosing between existing utility classes
- Defining new CSS variables
- Reviewing PRs that touch website styling

## Themes

The site uses `data-theme` attribute on `<html>`. Two themes are supported:

| Theme | Selector | Palette |
|-------|----------|---------|
| Retro (default) | `:root` | Game Boy green |
| Light | `[data-theme="light"]` | Warm neutrals |

### Rules

- **All colors MUST use CSS variables** — never hardcode hex values
- New variables MUST be defined in **both** `:root` (retro) and
  `[data-theme="light"]` blocks in `global.css`
- Never modify the theme switcher mechanism or its localStorage key

```css
/* ✓ Correct */
color: var(--color-text);
background: var(--color-bg);

/* ✗ NEVER */
color: #8bac0f;
background: #1a1a2e;
```

## Responsive Breakpoints

Mobile-first approach. Default styles target mobile; expand with `min-width`.

| Breakpoint | Target | Pattern |
|------------|--------|---------|
| Default | Mobile | Single column, compact spacing |
| `min-width: 640px` | Tablet | 2-column grids, expanded spacing |
| `min-width: 1024px` | Desktop | 3-4 column grids, full layout |

### Grid Utilities

Use existing grid classes: `.grid-2`, `.grid-3`, `.grid-4`.

## Spacing & Layout

Use the spacing scale defined in `global.css`:

- Variables: `--space-xs` through `--space-4xl`
- Container max-width: `--max-width` (1200px)

## Typography

| Use | Font | Access |
|-----|------|--------|
| Section titles / pixel style | Press Start 2P | Via `.pixel-card h3` or custom class |
| Body text | Inter | Default (inherited) |

…

证据边界与执行链路

作者原文负责流程事实；流狐只索引当前章节、要点、文件与命令。

章节    -> When to Use → Themes → Rules → Responsive Breakpoints → Grid Utilities → Spacing & Layout
要点    -> All colors MUST use CSS variables · both · Rules and patterns for the Envilder website's pure CSS design system. · The site uses data-theme attribute on <html>. · Mobile-first approach. · Use existing grid classes: .grid-2, .grid-3, .grid-4.
文件/命令 -> data-theme · <html> · :root · [data-theme="light"] · global.css · min-width · min-width: 640px · min-width: 1024px
内容 SHA-256 -> ded24f0e8ad6