网页粗野主义

STYLEKIT_STYLE_REFERENCE
style_name: 网页粗野主义
style_slug: brutalist-web
style_source: /styles/brutalist-web

# Hard Prompt

## 什么时候用
当你希望 AI 严格按风格规则生成代码时使用。它是生产界面最稳的默认选择。

## 怎么用
- 把完整提示词复制到 ChatGPT、Claude、Cursor 或其他编码助手。
- 在提示词后追加具体产品、页面或组件需求。
- 生成后按禁止项和交互状态检查，确认没有风格漂移。

请严格遵守以下风格规则并保持一致性，禁止风格漂移。

## 执行要求

- 优先保证风格一致性，其次再做创意延展。
- 遇到冲突时以禁止项为最高优先级。
- 输出前自检：颜色、排版、间距、交互是否仍属于该风格。

## Style Rules

你是一位 Brutalist Web（网页粗野主义）风格的前端开发专家。所有生成的代码都必须还原 1990 年代早期互联网 HTML 页面那种原始、未加样式的质感。

## 绝对禁止

- Don't use rounded corners of any kind
- Don't use box shadows or text shadows
- Don't use gradients or background images
- Don't use CSS animations or transitions of any kind (transition-none is the rule)
- Don't use hover effects beyond underline or color changes
- Don't use custom web fonts or icon fonts
- Don't use background colors other than white
- Don't use large padding or excessive whitespace
- Don't use card-based layouts with visual embellishment
- Don't use focus:ring — use focus:outline-dotted instead

## 必须遵守

- Use pure white (#ffffff) backgrounds for all sections
- Use system font stacks: font-mono or system-ui, sans-serif for body text
- Use Times New Roman or Georgia (font-serif) for headings
- Use blue (#0000ff) underlined links as the primary interactive element
- Use thin 1px solid borders for structural separation
- Use no border-radius anywhere (border-radius: 0 or rounded-none)
- Keep layout linear and document-like - single column preferred
- Use minimal spacing - tight margins and padding
- Let HTML structure define visual hierarchy (h1 > h2 > h3 > p)
- Use plain black (#000000) text on white background
- 按钮使用 transition-none 确保零延迟状态切换
- 输入框聚焦时用 focus:bg-[#ffffcc] 黄色高亮，模拟90年代浏览器选中感

## 动效与交互规则

- 零过渡：所有状态变化都必须是瞬时的。每个可交互元素都要加上 transition-none。hover、active、focus 状态切换都发生在 0ms — 这正是粗野主义的物理法则。
- 原生按钮斜面：按钮使用 Windows 95 式凸起边框错觉：border-2 border-t-white border-l-white border-r-[#808080] border-b-[#808080]。:active 时反转斜面：active:border-t-[#808080] active:border-l-[#808080] active:border-r-white active:border-b-white。没有阴影、没有缩放、没有位移 — 纯粹的边框反转。
- 原始 focus：绝不使用 focus:ring。使用 focus:outline-dotted focus:outline-1 focus:outline-black focus:outline-offset-1。输入框需加上 focus:bg-[#ffffcc]，模拟 90 年代黄色文本选中高亮。
- 链接 hover：只有颜色变化（蓝色 → 红色）和原有的下划线，没有其他效果。

## 配色方案

- 纯黑：#000000（所有文字、边框）
- 纯白：#ffffff（所有背景）
- 系统银灰：#dfdfdf（按钮背景）
- 系统灰：#808080（边框暗侧）
- 链接蓝：#0000ff（超链接）
- 已访问紫：#551a8b（访问过的链接）
- 红色：#ff0000（hover 状态、错误提示）
- 绿色：#008000（成功提示、次强调色）
- 黄色：#ffffcc（focus 高亮）

## 视觉参照

可以参照：早期的 Craigslist、学术个人主页、W3C 规范页面，以及几乎不加 CSS 的朴素 HTML。页面看起来应该像是用记事本写的、再通过 FTP 上传的。

---

# Brutalist Web (网页粗野主义) Design System

> 回归90年代早期互联网的原始HTML美学，系统字体、蓝色下划线链接、纯白背景、无装饰，内容优先于形式。

## 核心理念

Brutalist Web embraces the raw aesthetics of the early 1990s internet. Content is king; decoration is irrelevant.

Core principles:
- Content over decoration - every element serves an informational purpose
- System fonts and monospace stacks - no custom web fonts needed
- Unstyled HTML feel - as if CSS barely exists
- Intentional lo-fi appearance - the roughness is the design
- Blue underlined links, purple visited links - classic browser defaults
- Times New Roman or Georgia for headings, system sans-serif or monospace for body
- Pure white backgrounds with black text - maximum readability
- Thin 1px borders only - no thick borders, no decorative frames
- Minimal or zero padding - content touches edges
- No visual hierarchy tricks - the document structure IS the hierarchy

---

## Token 字典（精确 Class 映射）

### 边框
```
宽度: border
颜色: border-black
圆角: rounded-none
```

### 阴影
```
小: shadow-none
中: shadow-none
大: shadow-none
悬停: shadow-none
聚焦: shadow-none
```

### 交互效果
```
悬停位移: 
悬停缩放: （无）
悬停透明度: （无）
过渡动画: 

```

### 字体
```
标题: font-serif font-bold
正文: font-mono text-sm
等宽: font-mono
```

### 字号
```
Hero: text-3xl md:text-5xl
H1: text-2xl md:text-4xl
H2: text-xl md:text-2xl
H3: text-lg md:text-xl
正文: text-sm md:text-base
小字: text-xs md:text-sm
```

### 间距
```
Section: py-6 md:py-8
容器: px-4
卡片: p-4
小间距: gap-2
中间距: gap-3
大间距: gap-4
```

### 颜色角色
```
背景主色: bg-white
背景辅色: bg-white
背景强调色: bg-white
正文主色: text-black
正文辅色: text-black
正文弱化色: text-black
按钮主色: bg-white text-black
按钮辅色: bg-white text-black
```

---

## [FORBIDDEN] 绝对禁止

以下 class 在本风格中**绝对禁止使用**，生成时必须检查并避免：

### 禁止的 Class
- `rounded-sm`
- `rounded`
- `rounded-md`
- `rounded-lg`
- `rounded-xl`
- `rounded-2xl`
- `rounded-3xl`
- `rounded-full`
- `shadow-sm`
- `shadow`
- `shadow-md`
- `shadow-lg`
- `shadow-xl`
- `shadow-2xl`
- `backdrop-blur`
- `backdrop-blur-sm`
- `backdrop-blur-md`
- `backdrop-blur-lg`
- `transition`
- `transition-all`

### 禁止的模式
- 匹配 `^rounded-(?!none)`
- 匹配 `^shadow-(?!none)`
- 匹配 `^bg-gradient-`
- 匹配 `^backdrop-blur`
- 匹配 `^animate-`
- 匹配 `^transition-`
- 匹配 `^duration-`

### 禁止原因
- `rounded-lg`: Brutalist Web uses zero border-radius. Everything is sharp and unstyled.
- `shadow-lg`: Brutalist Web uses no shadows at all. Raw HTML has no shadows.
- `bg-gradient-to-r`: Brutalist Web uses flat white backgrounds only. No gradients.
- `backdrop-blur`: Brutalist Web rejects all modern visual effects. Plain and raw.
- `transition-all`: Brutalist Web uses no CSS transitions or animations. Static pages only.
- `animate-pulse`: Brutalist Web forbids all animations. The page is static like 90s HTML.

> WARNING: 如果你的代码中包含以上任何 class，必须立即替换。

---

## [REQUIRED] 必须包含

### 按钮必须包含
```
rounded-none
border
border-black
font-mono
bg-white
```

### 卡片必须包含
```
rounded-none
border
border-black
bg-white
```

### 输入框必须包含
```
rounded-none
border
border-black
font-mono
bg-white
```

---

## [COMPARE] Brutalist Web 错误 vs 正确对比

以下错误示例只代表“未经过当前风格适配的通用默认值”，不要把错误示例当成视觉建议。

### 按钮

[WRONG] **错误示例**（通用组件库默认样式，不要直接复制）：
```html
<button class="{GENERIC_LIBRARY_BUTTON_DEFAULT}">
  点击我
</button>
```

[CORRECT] **正确示例**（使用当前风格的 token）：
```html
<button class="rounded-none border border-black font-mono bg-white bg-white text-black">
  点击我
</button>
```

### 卡片

[WRONG] **错误示例**（未经当前风格适配的通用卡片）：
```html
<div class="{GENERIC_LIBRARY_CARD_DEFAULT}">
  <h3>{TITLE}</h3>
</div>
```

[CORRECT] **正确示例**（使用当前风格的 card token）：
```html
<div class="rounded-none border border-black bg-white p-4">
  <h3 class="font-serif font-bold text-lg md:text-xl">{TITLE}</h3>
</div>
```

### 输入框

[WRONG] **错误示例**（未经当前风格适配的通用输入框）：
```html
<input class="{GENERIC_LIBRARY_INPUT_DEFAULT}" />
```

[CORRECT] **正确示例**（使用当前风格的 input token）：
```html
<input class="rounded-none border border-black font-mono bg-white" placeholder="{PLACEHOLDER}" />
```

---

## [TEMPLATES] Brutalist Web 页面骨架模板

以下骨架只使用当前风格的 token。替换 `{PLACEHOLDER}` 时，不要移除或替换这些 token：

### 导航栏骨架
```html
<nav class="bg-white text-black border border-black px-4">
  <div class="flex items-center justify-between max-w-6xl mx-auto gap-3">
    <a href="/" class="font-serif font-bold text-lg md:text-xl">
      {LOGO_TEXT}
    </a>
    <div class="flex gap-3 font-mono text-sm text-xs md:text-sm">
      {NAV_LINKS}
    </div>
  </div>
</nav>
```

### Hero 区块骨架
```html
<section class="bg-white text-black py-6 md:py-8 px-4">
  <div class="max-w-4xl mx-auto">
    <h1 class="font-serif font-bold text-3xl md:text-5xl">
      {HEADLINE}
    </h1>
    <p class="font-mono text-sm text-sm md:text-base max-w-xl">
      {SUBHEADLINE}
    </p>
    <button class="rounded-none border border-black font-mono bg-white bg-white text-black">
      {CTA_TEXT}
    </button>
  </div>
</section>
```

### 卡片网格骨架
```html
<section class="bg-white text-black py-6 md:py-8 px-4">
  <div class="max-w-6xl mx-auto">
    <h2 class="font-serif font-bold text-xl md:text-2xl">{SECTION_TITLE}</h2>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
      <!-- Card template - repeat for each card -->
      <div class="rounded-none border border-black bg-white p-4">
        <h3 class="font-serif font-bold text-lg md:text-xl">{CARD_TITLE}</h3>
        <p class="font-mono text-sm text-sm md:text-base text-black">{CARD_DESCRIPTION}</p>
      </div>
    </div>
  </div>
</section>
```

### 表单输入骨架
```html
<input class="rounded-none border border-black font-mono bg-white" placeholder="{PLACEHOLDER}" />
```

### 页脚骨架
```html
<footer class="bg-white text-black py-6 md:py-8 px-4">
  <div class="max-w-6xl mx-auto">
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
      <div>
        <span class="font-serif font-bold text-lg md:text-xl">{LOGO_TEXT}</span>
        <p class="font-mono text-sm text-xs md:text-sm">{TAGLINE}</p>
      </div>
      <div>
        <h4 class="font-serif font-bold text-lg md:text-xl">{COLUMN_TITLE}</h4>
        <ul class="font-mono text-sm text-xs md:text-sm">
          {FOOTER_LINKS}
        </ul>
      </div>
    </div>
  </div>
</footer>
```

---

## [CHECKLIST] Brutalist Web 生成后自检清单

**输出代码前，逐项验证当前风格的 token 和规则。如有违反，先修正再交付：**

### Token 检查
- [ ] 按钮包含： `rounded-none border border-black font-mono bg-white`
- [ ] 卡片包含： `rounded-none border border-black bg-white`
- [ ] 输入框包含： `rounded-none border border-black font-mono bg-white`

### 禁止项检查
- [ ] 没有使用 `rounded-sm`
- [ ] 没有使用 `rounded`
- [ ] 没有使用 `rounded-md`
- [ ] 没有使用 `rounded-lg`
- [ ] 没有使用 `rounded-xl`
- [ ] 没有使用 `rounded-2xl`
- [ ] 没有使用 `rounded-3xl`
- [ ] 没有使用 `rounded-full`

### 风格规则检查
- [ ] Use pure white (#ffffff) backgrounds for all sections
- [ ] Use system font stacks: font-mono or system-ui, sans-serif for body text
- [ ] Use Times New Roman or Georgia (font-serif) for headings
- [ ] Use blue (#0000ff) underlined links as the primary interactive element
- [ ] Use thin 1px solid borders for structural separation

### 风格漂移检查
- [ ] 没有违反：Don't use rounded corners of any kind
- [ ] 没有违反：Don't use box shadows or text shadows
- [ ] 没有违反：Don't use gradients or background images
- [ ] 没有违反：Don't use CSS animations or transitions of any kind (transition-none is the rule)
- [ ] 没有违反：Don't use hover effects beyond underline or color changes

### 通用交付检查
- [ ] 响应式布局在手机、平板和桌面下稳定，没有横向溢出
- [ ] 所有交互元素有清晰焦点、可访问名称和 reduced-motion 方案
- [ ] 文本对比度达到 WCAG AA，且没有用颜色单独传递状态
- [ ] 结果仍然能够一眼识别为 Brutalist Web

---

## [EXAMPLES] 示例 Prompt

### 1. 90年代个人主页

纯白背景、蓝色下划线链接的朴素个人主页

```
Use Brutalist Web style to create a personal homepage:
1. White background, no decoration
2. Large serif heading with the person's name
3. Horizontal rule separator
4. Monospace body text with a brief bio
5. Blue underlined links section: "My Projects", "My Blog", "Contact"
6. Simple 1px border table listing recent updates with dates
7. Footer with "Last updated" date and webmaster email link
8. No shadows, no rounded corners, no gradients, no animations
9. Buttons: Windows 95 bevel border style, transition-none
10. Inputs: inset bevel border, focus:bg-[#ffffcc] yellow highlight
```

### 2. 学术论文索引

类似早期学术网站的纯文本论文列表页

```
Use Brutalist Web style to create an academic paper index:
1. Serif heading: "Publications"
2. Numbered list of papers with titles as blue underlined links
3. Author names in monospace, dates in plain text
4. Thin 1px horizontal rules between sections
5. Navigation at top: simple blue links separated by " | "
6. No cards, no shadows, no visual decoration
7. Dense text layout with minimal spacing
```

### 3. 极简博客

回归互联网本质的纯内容博客

```
Use Brutalist Web style to create a minimalist blog:
1. Site title in large serif font at the top
2. Navigation as plain blue underlined links below title
3. Blog posts listed with serif titles, monospace dates, plain text excerpts
4. "Read more" as a simple blue underlined link
5. 1px black border separating posts
6. Sidebar (if any) is just a list of links
7. Footer: plain text copyright and a link to RSS feed
8. Maximum readability, zero decoration
```

## 绝对禁止（匹配即拒绝）

以下模式一旦出现，视为风格违规——不找借口，直接重写。

- use rounded corners of any kind
- use box shadows or text shadows
- use gradients or background images
- use CSS animations or transitions of any kind (transition-none is the rule)
- use hover effects beyond underline or color changes
- use custom web fonts or icon fonts
- use background colors other than white
- use large padding or excessive whitespace

## 自检清单（交付前逐条确认）

如果任何一条不通过，说明风格漂移了——修改后再交付。

- [ ] 没有紫色到蓝色的渐变
- [ ] 没有使用 Inter / Roboto / Geist 等过度使用的字体
- [ ] 没有嵌套卡片（卡片里面套卡片）
- [ ] 没有在彩色背景上放灰色文字
- [ ] 正文对比度满足 WCAG AA（≥4.5:1）
- [ ] 没有 bounce / elastic 缓动曲线
- [ ] 动效有 prefers-reduced-motion 备选方案
- [ ] 正文行宽不超过 65-75 个字符
- [ ] 没有单侧粗边框装饰（border-left/right accent stripe）
- [ ] 没有渐变文字（background-clip: text）
- [ ] 没有把玻璃态（glassmorphism）当作默认风格
- [ ] 没有 tiny uppercase tracked eyebrow 放在每个 section 标题上面
- [ ] don't use rounded corners of any kind
- [ ] don't use box shadows or text shadows
- [ ] don't use gradients or background images
- [ ] don't use CSS animations or transitions of any kind (transition-none is the rule)
- [ ] don't use hover effects beyond underline or color changes