[How to Generate 100 Landing Pages Overnight with OpenCode and Free AI Models]

The more we use models in our work, the smarter they get and the more tools they get loaded with, the more we realize we're not development agents or management agents anymore. We're becoming choice agents. Right now we still have this thin ability to say "yeah, this is what I like, I choose this."

If you look at how humans make choices, we're best at choosing how something looks or how it's perceived.

A lot of times, we're prototyping a project and need to generate some text and visuals. This is often a blocker. Because if you let the model generate stuff without your input, you get more AI slop. But instructing a model to generate something when you're not sure yourself is a dead end.

So here's what helps:

OpenCode
The free model Minimax M2.1 is in it
A prompt to create 100 landing page variants with different text and visual styles

This is a great way to have the model generate stuff overnight. You come in the morning, and you've got options ready. While choosing, you'll definitely find something closer to what you want, and that artifact becomes a reference point for the model to better generate what you actually need.

Why do we pick OpenCode for tasks while we sleep?

Its Build mode by default doesn't ask many questions. Other tools will either ask you about commands, or you'll have to tell them not to in prompts or settings. OpenCode, in this case, is a pro's knife: very sharp and needs skilled hands. So run it at your own risk, in an isolated environment, or if you can rebuild your machine quickly if the agent breaks or deletes something.

Why free models?

First, they're built into OpenCode by default. Second, you don't pay for tokens when you're generating throwaway artifacts. You know you'll only like 1 or 2 out of 100 options. So using paid models here doesn't make much sense. Use paid models to make a plan for generating lots of variants. Use free models to generate the variants. And yeah, remember if a model is free, the authors use your prompts for training and retraining, and someone will probably look at them with their own eyes and evaluate them 🙂

Step by step

Install curl -fsSL https://opencode.ai/install | bash

Run inside your project directory opencode

Look at the nice TUI with well-chosen colors:

Then run this prompt:

Clone the repository [https://github.com/bencium/bencium-claude-code-design-skill](https://github.com/bencium/bencium-claude-code-design-skill) into a sibling directory. Read all files and keep them as context for the project's frontend layout "constitution." Base your work on the presentation style, tools, colors, typography/styles, and grid/layout system.

During this session you will generate 100 variants of frontend web layout constitutions and for each constitution variant you will generate a landing page based on it. A constitution is a single Markdown file. A landing page is a single HTML file with inline styles and animations/scripts if needed. Each variant should live in its own directory named by the variant number.

Goal: the user isn't sure what they want so you need to provide options for them to choose from.

Go to sleep – human in the sleep

Picking variants and next steps

Wake up and go through the options. Remember, we don't just have landing pages but landing pages with constitutions. These two artifacts can be turned into clear instructions for the model on how to approach all frontend layout tasks.

Why clone the Claude skills repository? Actually, you can give the agent any other instructions on how to approach the layout. I just liked this one more. There are plenty of them popping up now; you can pick what you want. You can ask it not to rely on anything, but then you'll get way more AI slop variants.

From the bunch, this landing page worked well in context and content:

And its constitution:

# Variant 08: Brutalist/Raw Constitution

## Design Philosophy

Exposed structure, harsh contrasts, intentionally rough. No smoothing, no
polish, no apologies. Design that shows its bones and dares you to look closer.

## Typography System

| Role | Font Family | Weight | Size Scale |
|------|-------------|--------|------------|
| Display | Archivo Black | 400 | 4xl, 5xl, 6xl |
| Heading | Work Sans | 800, 900 | xl, 2xl, 3xl |
| Body | Space Mono | 400 | base, lg |
| Accent | JetBrains Mono | 700 | sm |

## Color Palette

**Raw Palette:**
- Background: #F5F5F5 (Raw White)
- Text: #000000 (Pure Black)
- Accent: #0000FF (Hyperlink Blue)
- Border: #000000 (2px solid)
- Error: #FF0000 (Pure Red)

## Layout Rules

- Visible grid lines (1px black)
- No border-radius (0px)
- High contrast borders everywhere
- Monospace as primary body font
- Overlapping elements with z-index

And the landing page itself:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>RAW — Brutalist Design</title>

  <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Work+Sans:wght@800;900&family=Space+Mono:wght@400&family=JetBrains+Mono:wght@700&display=swap" rel="stylesheet">

  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --bg: #F5F5F5;
      --text: #000000;
      --blue: #0000FF;
      --red: #FF0000;
    }

    body {
      font-family: 'Space Mono', monospace;
      background: var(--bg);
      color: var(--text);
    }

    .container {
      max-width: 1400px;
      margin: 0 auto;
      border-left: 2px solid var(--text);
      border-right: 2px solid var(--text);
    }

    .border-b {
      border-bottom: 2px solid var(--text);
    }

    .border-t {
      border-top: 2px solid var(--text);
    }

    header {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      border-bottom: 2px solid var(--text);
    }

    .logo-box {
      font-family: 'Archivo Black', sans-serif;
      font-size: 64px;
      padding: 32px;
      border-right: 2px solid var(--text);
      line-height: 0.9;
    }

    .meta-box {
      padding: 32px;
      border-right: 2px solid var(--text);
    }

    .meta-box p {
      font-size: 12px;
      margin-bottom: 8px;
    }

    .nav-box {
      padding: 32px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .nav-box a {
      font-family: 'Work Sans', sans-serif;
      font-weight: 900;
      font-size: 24px;
      color: var(--text);
      text-decoration: none;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .nav-box a:hover {
      color: var(--blue);
    }

    .hero {
      display: grid;
      grid-template-columns: 2fr 1fr;
      border-bottom: 2px solid var(--text);
    }

    .hero-text {
      padding: 80px 48px;
      border-right: 2px solid var(--text);
    }

    h1 {
      font-family: 'Archivo Black', sans-serif;
      font-size: clamp(56px, 10vw, 120px);
      line-height: 0.9;
      margin-bottom: 32px;
      text-transform: uppercase;
    }

    .hero-text p {
      font-size: 18px;
      max-width: 600px;
      margin-bottom: 32px;
    }

    .btn {
      display: inline-block;
      background: var(--text);
      color: white;
      padding: 20px 48px;
      font-family: 'Work Sans', sans-serif;
      font-weight: 900;
      font-size: 18px;
      text-transform: uppercase;
      text-decoration: none;
      border: 2px solid var(--text);
      cursor: pointer;
    }

    .btn:hover {
      background: var(--blue);
      border-color: var(--blue);
    }

    .hero-stats {
      display: flex;
      flex-direction: column;
    }

    .stat {
      padding: 32px;
      border-bottom: 2px solid var(--text);
      flex: 1;
      display: flex;
      align-items: center;
    }

    .stat:last-child {
      border-bottom: none;
    }

    .stat-num {
      font-family: 'JetBrains Mono', monospace;
      font-weight: 700;
      font-size: 72px;
      margin-right: 24px;
    }

    .stat-label {
      font-size: 14px;
      text-transform: uppercase;
    }

    .content-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
    }

    .content-box {
      padding: 48px;
      border-right: 2px solid var(--text);
    }

    .content-box:last-child {
      border-right: none;
    }

    .content-box h3 {
      font-family: 'Work Sans', sans-serif;
      font-weight: 900;
      font-size: 32px;
      margin-bottom: 16px;
      text-transform: uppercase;
    }

    .content-box p {
      font-size: 14px;
      line-height: 1.8;
    }

    .tag {
      display: inline-block;
      background: var(--blue);
      color: white;
      padding: 4px 12px;
      font-size: 12px;
      font-family: 'JetBrains Mono', monospace;
      margin-bottom: 16px;
    }

    .marquee {
      background: var(--text);
      color: white;
      padding: 24px 0;
      overflow: hidden;
      white-space: nowrap;
      font-family: 'Archivo Black', sans-serif;
      font-size: 48px;
      text-transform: uppercase;
      text-align: center;
    }

    .cta {
      padding: 120px 48px;
      text-align: center;
      border-top: 2px solid var(--text);
    }

    .cta h2 {
      font-family: 'Work Sans', sans-serif;
      font-weight: 900;
      font-size: 64px;
      text-transform: uppercase;
      margin-bottom: 32px;
    }

    .cta .btn {
      background: var(--red);
      border-color: var(--red);
    }

    footer {
      padding: 32px 48px;
      border-top: 2px solid var(--text);
      display: flex;
      justify-content: space-between;
      font-size: 12px;
    }

    @media (max-width: 768px) {
      header {
        grid-template-columns: 1fr;
      }

      .logo-box {
        border-right: none;
        border-bottom: 2px solid var(--text);
      }

      .meta-box {
        border-right: none;
        border-bottom: 2px solid var(--text);
      }

      .hero {
        grid-template-columns: 1fr;
      }

      .hero-text {
        border-right: none;
        border-bottom: 2px solid var(--text);
      }

      .content-grid {
        grid-template-columns: 1fr;
      }

      .content-box {
        border-right: none;
        border-bottom: 2px solid var(--text);
      }
    }
  </style>
</head>
<body>
  <div class="container">
    <header>
      <div class="logo-box">
        RAW
DESIGN
      </div>

      <div class="meta-box">
        <p>EST. 2024</p>
        <p>VERSION 1.0</p>
        <p>NO SHADOWS</p>
        <p>NO GRADIENTS</p>
      </div>

      <nav class="nav-box">
        <a href="#">Manifesto</a>
        <a href="#">Work</a>
        <a href="#">Raw</a>
        <a href="#">Contact</a>
      </nav>
    </header>

    <section class="hero">
      <div class="hero-text">
        <h1>No
Filters.
No
B.S.</h1>
        <p>Brutal honesty in design. We strip away the smoothing, the rounding, the pretty lies. What remains is raw, honest, unapologetic design.</p>
        <a href="#" class="btn">Get Raw →</a>
      </div>

      <div class="hero-stats">
        <div class="stat">
          <span class="stat-num">100%</span>
          <span class="stat-label">Honest Design</span>
        </div>
        <div class="stat">
          <span class="stat-num">0px</span>
          <span class="stat-label">Border Radius</span>
        </div>
        <div class="stat">
          <span class="stat-num">∞</span>
          <span class="stat-label">Raw Potential</span>
        </div>
      </div>
    </section>

    <div class="marquee">
      BRUTALISM IS NOT DEAD — RAW DESIGN LIVES — NO APOLOGIES — BRUTALISM IS NOT DEAD — RAW DESIGN LIVES — NO APOLOGIES —
    </div>

    <section class="content-grid">
      <div class="content-box">
        <span class="tag">PRINCIPLE 01</span>
        <h3>Expose
Everything</h3>
        <p>Grid lines, structure, hierarchy—make it visible. Hide nothing. The skeleton is beautiful. Show the bones.</p>
      </div>

      <div class="content-box">
        <span class="tag">PRINCIPLE 02</span>
        <h3>Reject
Smoothing</h3>
        <p>Anti-aliasing is a lie. Pixel perfection means embracing the pixel. Sharp edges, hard lines, deliberate choices.</p>
      </div>

      <div class="content-box">
        <span class="tag">PRINCIPLE 03</span>
        <h3>High
Contrast</h3>
        <p>Black on white. White on black. Maximum contrast creates maximum impact. Subtlety is overrated.</p>
      </div>
    </section>

    <section class="cta">
      <h2>Ready To Be Raw?</h2>
      <a href="#" class="btn">Start The Revolution</a>
    </section>

    <footer>
      <span>RAW © 2025</span>
      <span>NO ROUNDED CORNERS</span>
      <span>EST. IN CONTRAST</span>
    </footer>
  </div>
</body>
</html>

We know the current constitution is just a prompt for the model; it needs to be changed to become a proper AGENTS.md. But since we have both the mini-constitution and the HTML result from the model, we can now take this to a smart, expensive model (like Opus 4.5) and ask it to create a reflective AGENTS.md for frontend visual presentation based on these two artifacts.

After giving Opus 4.5 the prompt and HTML above, we ask it to generate a layout constitution based on these inputs:

First, Google all current, practical trends for agent “constitutions” and for structuring AGENTS.md in 2025–2026. 
Then, based on the two artifacts below, produce a single file called FRONTEND.md that contains the agent constitution describing how they must format and implement all frontend-related tasks in the project.

Opus 4.5 gives us a full layout constitution whose approach is based on recent trends and best practices for instructing agents:

# FRONTEND.md — Agent Constitution for Brutalist/Raw Frontend Development

> This document defines the absolute rules, patterns, and boundaries for all AI coding agents working on frontend tasks in this project. Treat this as law — not suggestion.

## Philosophy

**We build RAW.** Exposed structure. Harsh contrasts. Intentionally rough. No smoothing, no polish, no apologies. Design that shows its bones and dares you to look closer.  
Every line of CSS, every HTML element, every design decision must embody this philosophy. If it looks "nice" or "friendly" — you've failed. If it looks like it was carved from concrete with a chisel — you're on the right track.

---

## Typography System

| Role    | Font Family       | Weight    | Size Scale      | Usage                            |
|---------|-------------------|-----------|-----------------|----------------------------------|
| Display | `Archivo Black`   | 400       | 4xl, 5xl, 6xl   | Hero headlines, major statements |
| Heading | `Work Sans`       | 800, 900  | xl, 2xl, 3xl    | Section headers, CTAs            |
| Body    | `Space Mono`      | 400       | base, lg        | All body text, descriptions      |
| Accent  | `JetBrains Mono`  | 700       | sm              | Tags, labels, stats, metadata    |

### Font Import (Required)

```html
<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Work+Sans:wght@800;900&family=Space+Mono:wght@400&family=JetBrains+Mono:wght@700&display=swap" rel="stylesheet"/>
```

### Font Usage Rules

```css
/* ✅ CORRECT */
.hero-title {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(56px, 10vw, 120px);
  line-height: 0.9;
  text-transform: uppercase;
}

.body-text {
  font-family: 'Space Mono', monospace;
  font-size: 14px;
  line-height: 1.8;
}

/* ❌ WRONG — Never use these */
.bad-example {
  font-family: system-ui, sans-serif; /* NO system fonts */
  font-family: Arial, Helvetica;      /* NO generic fonts */
  font-weight: 300;                   /* NO light weights */
  font-style: italic;                 /* NO italics */
}
```

## Color Palette

### Raw Palette Variables

:root {
  --bg: #F5F5F5;   /* Raw White — backgrounds only */
  --text: #000000; /* Pure Black — text and borders */
  --blue: #0000FF; /* Hyperlink Blue — links, accents, hover states */
  --red: #FF0000;  /* Pure Red — errors, danger, CTAs */
}

### Color Rules

| Color          | Hex     | Usage                | Forbidden Usage |
| -------------- | ------- | -------------------- | --------------- |
| Raw White      | #F5F5F5 | Backgrounds          | Never for text  |
| Pure Black     | #000000 | Text, borders, fills | —               |
| Hyperlink Blue | #0000FF | Links, hover, tags   | Body text       |
| Pure Red       | #FF0000 | Errors, urgent CTAs  | Decorative only |

```css
### Absolute Prohibitions

/* ❌ FORBIDDEN — Never use these */
.wrong {
  color: #333333;                /* NO gray text */
  background: linear-gradient(); /* NO gradients */
  box-shadow: 0 4px 6px rgba();  /* NO shadows */
  opacity: 0.5;                  /* NO transparency */
  background-color: #f0f0f0;     /* NO off-whites */
}
```
## Layout Architecture

### Grid System

- Visible grid structure preferred
- Maximum container width: `1400px` 
- All major sections use CSS Grid 
- Borders define space, not whitespace

```css
/* ✅ Standard container */
.container {
  max-width: 1400px;
  margin: 0 auto;
  border-left: 2px solid var(--text);
  border-right: 2px solid var(--text);
}

/* ✅ Grid sections */
.content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

/* ✅ Bordered divisions */
.grid-item {
  padding: 48px;
  border-right: 2px solid var(--text);
}

.grid-item:last-child {
  border-right: none;
}
```

### Border Rules

```css
/* ✅ CORRECT — Always 2px solid black */
.element {
  border: 2px solid var(--text);
  border-bottom: 2px solid var(--text);
}

/* ❌ WRONG — Never these */
.bad {
  border: 1px solid #ccc;   /* NO thin borders */
  border: 2px solid #666;   /* NO gray borders */
  border-radius: 8px;       /* NO rounded corners */
  border-radius: 4px;       /* NO rounded corners */
  border-radius: 2px;       /* NO rounded corners — ZERO TOLERANCE */
}
```

### The Sacred Rule of Border Radius

```css
/* THE ONLY ACCEPTABLE VALUES */
border-radius: 0;
border-radius: 0px;
/* There are no exceptions. Ever. */

## Component Patterns

### Buttons

/* ✅ Primary button */
.btn {
  display: inline-block;
  background: var(--text);
  color: white;
  padding: 20px 48px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 900;
  font-size: 18px;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid var(--text);
  cursor: pointer;
}

.btn:hover {
  background: var(--blue);
  border-color: var(--blue);
}

/* ✅ Danger/CTA button */
.btn-danger {
  background: var(--red);
  border-color: var(--red);
}
```

```html
<!-- ✅ CORRECT -->
<a href="#" class="btn">Get Raw →</a>
<button class="btn btn-danger">Start The Revolution</button>

<!-- ❌ WRONG -->
<button class="btn rounded-lg shadow-md">Soft Button</button>
```

### Tags/Labels

```css
.tag {
  display: inline-block;
  background: var(--blue);
  color: white;
  padding: 4px 12px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
}
```css

### Statistics Display

```css
.stat {
  padding: 32px;
  border-bottom: 2px solid var(--text);
  display: flex;
  align-items: center;
}

.stat-num {
  font-family: 'JetBrains Mono', monospace;
  font-weight: 700;
  font-size: 72px;
  margin-right: 24px;
}

.stat-label {
  font-size: 14px;
  text-transform: uppercase;
}
```

### Content Boxes

```css
.content-box {
  padding: 48px;
  border-right: 2px solid var(--text);
}

.content-box:last-child {
  border-right: none;
}

.content-box h3 {
  font-family: 'Work Sans', sans-serif;
  font-weight: 900;
  font-size: 32px;
  margin-bottom: 16px;
  text-transform: uppercase;
}

.content-box p {
  font-size: 14px;
  line-height: 1.8;
}
```

### Marquee/Banner

```css
.marquee {
  background: var(--text);
  color: white;
  padding: 24px 0;
  overflow: hidden;
  white-space: nowrap;
  font-family: 'Archivo Black', sans-serif;
  font-size: 48px;
  text-transform: uppercase;
}
```

## Header Pattern

```html
<header>
  <div class="logo-box">RAW
DESIGN</div>

  <div class="meta-box">
    <p>EST. 2024</p>
    <p>VERSION 1.0</p>
    <p>NO SHADOWS</p>
    <p>NO GRADIENTS</p>
  </div>

  <nav class="nav-box">
    <a href="#">Manifesto</a>
    <a href="#">Work</a>
    <a href="#">Contact</a>
  </nav>
</header>
```

```css
header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  border-bottom: 2px solid var(--text);
}

.logo-box {
  font-family: 'Archivo Black', sans-serif;
  font-size: 64px;
  padding: 32px;
  border-right: 2px solid var(--text);
  line-height: 0.9;
}

.meta-box {
  padding: 32px;
  border-right: 2px solid var(--text);
}

.meta-box p {
  font-size: 12px;
  margin-bottom: 8px;
}

.nav-box {
  padding: 32px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.nav-box a {
  font-family: 'Work Sans', sans-serif;
  font-weight: 900;
  font-size: 24px;
  color: var(--text);
  text-decoration: none;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.nav-box a:hover {
  color: var(--blue);
}
```
## Hero Section Pattern

```html
<section class="hero">
  <div class="hero-text">
    <h1>No
Filters.
No
B.S.</h1>
    <p>Brutal honesty in design. What remains is raw, honest, unapologetic.</p>
    <a href="#" class="btn">Get Raw →</a>
  </div>

  <div class="hero-stats">
    <div class="stat">
      <span class="stat-num">100%</span>
      <span class="stat-label">Honest Design</span>
    </div>
    <div class="stat">
      <span class="stat-num">0px</span>
      <span class="stat-label">Border Radius</span>
    </div>
  </div>
</section>
```

```css
.hero {
  display: grid;
  grid-template-columns: 2fr 1fr;
  border-bottom: 2px solid var(--text);
}

.hero-text {
  padding: 80px 48px;
  border-right: 2px solid var(--text);
}

h1 {
  font-family: 'Archivo Black', sans-serif;
  font-size: clamp(56px, 10vw, 120px);
  line-height: 0.9;
  margin-bottom: 32px;
  text-transform: uppercase;
}

.hero-text p {
  font-size: 18px;
  max-width: 600px;
  margin-bottom: 32px;
}

.hero-stats {
  display: flex;
  flex-direction: column;
}
```

## Responsive Breakpoints

Mobile breakpoint: `768px`

```css
@media (max-width: 768px) {
  header {
    grid-template-columns: 1fr;
  }

  .logo-box {
    border-right: none;
    border-bottom: 2px solid var(--text);
  }

  .meta-box {
    border-right: none;
    border-bottom: 2px solid var(--text);
  }

  .hero {
    grid-template-columns: 1fr;
  }

  .hero-text {
    border-right: none;
    border-bottom: 2px solid var(--text);
  }

  .content-grid {
    grid-template-columns: 1fr;
  }

  .content-box {
    border-right: none;
    border-bottom: 2px solid var(--text);
  }
}
```

### Responsive Rules

- Stack to single column at mobile
- Replace `border-right` with `border-bottom` when stacking
- Maintain all other styling (colors, fonts, weights)
- Never add mobile-specific "softening"

## Forbidden Patterns

### Never Use These CSS Properties

```css
/* ❌ ABSOLUTELY FORBIDDEN */
border-radius: *;             /* Any value > 0 */
box-shadow: *;                /* Any shadow */
text-shadow: *;               /* Any text shadow */
background: linear-gradient(*);
background: radial-gradient(*);
opacity: *;                   /* Any transparency */
filter: blur(*);
backdrop-filter: *;
transition: *;                /* Minimal transitions only, otherwise forbidden */
animation: *;                 /* Unless marquee-style */
transform: rotate(*);         /* Unless intentionally "broken" */
```

| Pattern          | Why It's Wrong                 |
| ---------------- | ------------------------------ |
| Rounded corners  | Softens the brutalist edge     |
| Drop shadows     | Implies depth we reject        |
| Gradients        | Too smooth, too friendly       |
| Soft grays       | We use pure black or nothing   |
| Thin borders     | We use 2px minimum             |
| System fonts     | We have a specific type system |
| Icons with fill  | Line icons or text only        |
| Hover animations | Instant state changes only     |
| Loading spinners | Raw waiting states             |
| Tooltips         | Information should be visible  |

## File Structure

src/
├── styles/
│   ├── reset.css        # CSS reset
│   ├── variables.css    # CSS custom properties
│   ├── typography.css   # Font definitions
│   ├── layout.css       # Grid and container
│   ├── components.css   # Reusable components
│   └── responsive.css   # Media queries
├── components/
│   ├── Header/
│   ├── Hero/
│   ├── ContentGrid/
│   ├── Button/
│   ├── Tag/
│   ├── Stat/
│   ├── Marquee/
│   ├── Footer/
│   └──
└── pages/
    └──

```bash
## Comands

# Development
npm run dev        # Start dev server
npm run build      # Production build
npm run preview    # Preview production build

# Linting & Formatting
npm run lint       # Run ESLint
npm run lint:fix   # Auto-fix ESLint issues
npm run format     # Run Prettier
npm run stylelint  # Lint CSS

# Testing
npm run test           # Run all tests
npm run test:watch     # Watch mode
npm run test:coverage  # Coverage report
```

## Agent Boundaries

### ✅ ALWAYS DO

- Use the exact color values from this constitution
- Use the specified font families and weights
- Apply 2px solid black borders
- Set border-radius: 0 on everything
- Use uppercase for headings and navigation
- Stack layouts to single column on mobile
- Maintain high contrast (black on white, white on black)

### ⚠️ ASK FIRST

- Adding new color values
- Creating new component patterns
- Modifying the responsive breakpoint
- Adding JavaScript interactions
- Changing the typography scale
- Adding new font weights

### 🚫 NEVER DO

- Add border-radius greater than 0
- Use box-shadow or text-shadow
- Use gradients of any kind
- Use colors outside the defined palette
- Use fonts outside the type system
- Add smooth transitions or animations
- Use opacity or transparency
- Soften or round any element
- Use gray colors (#333, #666, #999, etc.)
- Add decorative elements

## Quality Checklist

Before committing any frontend code, verify:

- [] All border-radius values are 0 or 0px
- [] No box-shadow or text-shadow present
- [] No gradients in backgrounds
- [] Only palette colors used (#F5F5F5, #000000, #0000FF, #FF0000)
- [] Typography uses only specified font families
- [] All borders are 2px solid var(--text)
- [] Headings are uppercase
- [] Mobile breakpoint maintains brutalist aesthetic
- [] No decorative flourishes added
- [] Code passes linting

## Examples: Good vs Bad

### Button Implementation

```html 
<!-- ✅ CORRECT -->
<button class="btn">SUBMIT</button>

<style>
  .btn {
    background: #000000;
    color: #FFFFFF;
    border: 2px solid #000000;
    padding: 20px 48px;
    font-family: 'Work Sans', sans-serif;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
  }
</style>

<!-- ❌ WRONG -->
<button class="btn-soft">Submit</button>

<style>
  .btn-soft {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 24px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-family: system-ui;
  }
</style>
```

### Card Implementation

```html
<!-- ✅ CORRECT -->
<div class="content-box">
  <span class="tag">FEATURE 01</span>
  <h3>RAW
POWER</h3>
  <p>Unfiltered. Uncompromising. Unforgettable.</p>
</div>

<!-- ❌ WRONG -->
<div class="card">
  <span class="badge">Feature</span>
  <h3>Smooth Experience</h3>
  <p>Gentle transitions for a pleasant journey.</p>
</div>

<style>
  /* ❌ Everything wrong with modern "clean" design */
  .card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    padding: 24px;
  }

  .badge {
    background: #e0e0e0;
    border-radius: 16px;
    padding: 4px 12px;
    font-size: 12px;
  }
</style>
```
## Final Word

This is not a guideline. This is a constitution.

Every pixel matters. Every border defines space. Every sharp edge is intentional.

We don't smooth things over. We don't soften the blow. We don't apologize for being raw.

**Build brutal. Stay raw.**

Final check

We ask Claude Code to build us a landing page based only on the frontend layout constitution.

It turned out to be almost what we needed:

With small tweaks, you can perfect the layout constitution, and especially if you're a backend dev, the frustration that your app looks bad goes away.

What can be done better?

This is just an example approach. The important thing is to get used to generating hundreds of variants to increase your chances of finding something suitable. How you generate them is up to you. You can ask to generate variants focused on Tailwind and Shadcn libraries and forbid custom styles entirely.

And finally

Get used to assigning cheap models to generate hundreds of variants when you leave work for the day.