Skip to content

Add dark-theme SVG visuals and polish README layout #79

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cobusgreyling merged 1 commit into from
Jun 27, 2026
Merged

Add dark-theme SVG visuals and polish README layout #79

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 22 additions & 7 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,11 +19,13 @@


<p align="center">
<img src="assets/visuals/loop-engineering-logo.jpg" alt="Loop Engineering" width="96" />
<a href="https://cobusgreyling.github.io/loop-engineering/">
<img src="assets/visuals/loop-engineering-logo.svg" alt="Loop Engineering logo" width="88" />
</a>
</p>

<p align="center">
<img src="assets/visuals/LE5.jpeg" alt="Loop Engineering" width="100%" />
<img src="assets/visuals/LE5.jpeg" alt="Loop Engineering — design the system that prompts your agents" width="100%" />
</p>

**Loop engineering is replacing yourself as the person who prompts the agent. You design the system that does it instead.**
Expand All @@ -36,10 +38,6 @@ A loop is a recursive goal: you define a purpose and the AI iterates (often with



<p align="center">
<img src="assets/visuals/loop-engineering-social-banner.jpg" alt="Loop Engineering — Design the system that prompts your agents" width="100%" />
</p>

<p align="center">
<strong><a href="https://cobusgreyling.github.io/loop-engineering/">→ Interactive showcase + pattern picker</a></strong>
<br>
Expand Down Expand Up @@ -80,6 +78,10 @@ A loop is a recursive goal: you define a purpose and the AI iterates (often with
| [Goal Engineering](https://github.com/cobusgreyling/goal-engineering) | Companion: Grok Build `/goal` — run-until-done objectives (`npx @cobusgreyling/goal-audit`) |
| [Stories](stories/) | Real wins and honest failures |

<p align="center">
<img src="assets/visuals/section-divider.svg" alt="" width="100%" />
</p>

## Why This Matters

Peter Steinberger:
Expand Down Expand Up @@ -109,7 +111,14 @@ Full detail: [docs/primitives.md](docs/primitives.md) · Cross-tool matrix: [doc
<img src="assets/visuals/primitives-infographic.jpg" alt="The Five Building Blocks + Memory — Loop Engineering" width="100%" />
</p>

### Anatomy of a Loop (Mermaid)
### Anatomy of a Loop

<p align="center">
<img src="assets/visuals/loop-cycle-animated.svg" alt="Animated loop flow — schedule, triage, state, worktree, implement, verify, MCP, human gate" width="100%" />
</p>

<details>
<summary>Mermaid diagram (copy-friendly)</summary>

```mermaid
flowchart LR
Expand All @@ -126,10 +135,16 @@ flowchart LR
J --> A
```

</details>

**This reference repo now runs its own `validate-patterns` + `audit` workflows on every push/PR** (see `.github/workflows/`). We also added `LOOP.md` describing the loops that will maintain it.

## Patterns

<p align="center">
<img src="assets/visuals/patterns-overview.svg" alt="Seven production loop patterns with cadence and token cost" width="100%" />
</p>

| Pattern | Cadence | Starter | Week 1 | Token cost |
|---------|---------|---------|--------|------------|
| [Daily Triage](patterns/daily-triage.md) | 1d–2h | [minimal-loop](starters/minimal-loop/) | **L1** report | Low |
Expand Down
113 changes: 113 additions & 0 deletions assets/visuals/loop-cycle-animated.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 34 additions & 0 deletions assets/visuals/loop-engineering-logo.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
94 changes: 94 additions & 0 deletions assets/visuals/patterns-overview.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
19 changes: 19 additions & 0 deletions assets/visuals/section-divider.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
16 changes: 13 additions & 3 deletions docs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,16 @@
<meta property="og:description" content="Stop prompting. Start designing loops.">
<meta property="og:image" content="https://raw.githubusercontent.com/cobusgreyling/loop-engineering/main/assets/visuals/loop-engineering-social-banner.jpg">
<link rel="stylesheet" href="{{ site.baseurl }}/assets/css/showcase.css">
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⟳</text></svg>">
<link rel="icon" href="https://raw.githubusercontent.com/cobusgreyling/loop-engineering/main/assets/visuals/loop-engineering-logo.svg">
</head>
<body>

<nav class="nav">
<div class="wrap nav-inner">
<a href="#" class="logo">Loop <span>Engineering</span></a>
<a href="#" class="logo">
<img src="https://raw.githubusercontent.com/cobusgreyling/loop-engineering/main/assets/visuals/loop-engineering-logo.svg" alt="" width="28" height="28" style="vertical-align:-6px;margin-right:8px;border-radius:6px;" />
Loop <span>Engineering</span>
</a>
<button
type="button"
class="nav-toggle"
Expand Down Expand Up @@ -95,7 +98,7 @@ <h2 class="section-title">What one loop looks like</h2>
<p class="section-desc">You design it once. You're not prompting every micro-step.</p>
<img
class="hero-img"
src="https://raw.githubusercontent.com/cobusgreyling/loop-engineering/main/assets/visuals/loop-anatomy.jpg"
src="https://raw.githubusercontent.com/cobusgreyling/loop-engineering/main/assets/visuals/loop-cycle-animated.svg"
alt="Anatomy of a loop — schedule, triage, state, worktree, implementer, verifier, MCP, human gate"
loading="lazy"
style="margin-bottom: 24px;"
Expand Down Expand Up @@ -170,6 +173,13 @@ <h3>State</h3>
<p class="section-label">Copy & run</p>
<h2 class="section-title">Production patterns</h2>
<p class="section-desc">Documented loops with scheduling, skills, state schemas, verification, and honest failure modes.</p>
<img
class="hero-img"
src="https://raw.githubusercontent.com/cobusgreyling/loop-engineering/main/assets/visuals/patterns-overview.svg"
alt="Seven production loop patterns — cadence and token cost overview"
loading="lazy"
style="margin-bottom: 28px;"
/>
<div class="patterns">
<article class="pattern-card">
<span class="tag">Most popular</span>
Expand Down