Sample sample-023
Rules that fired
- error
ahd/respect-reduced-motionAnimation declared but no @media (prefers-reduced-motion: reduce) block in the same stylesheet or scoped style. People who disable motion deserve a still page. Note: a global reduced-motion guard does not propagate into scoped component styles — each chunk that declares animation needs its own guard.
- warn
ahd/require-named-gridNo grid structure declared (no display:grid, no grid-template-columns, no grid-cols-*). Flex-stacked columns without a shared grid is the todo-list layout.
- error
ahd/no-inline-style-animationline 443Inline style attribute declares transition. Move this to a stylesheet so prefers-reduced-motion and the rest of the design system can reach it.
- warn
ahd/no-em-dashes-in-proseline 438Em-dash (—) in prose. Rewrite with a comma, colon, period, parentheses, or middle dot. En-dashes (–) remain fine for numeric ranges.
- warn
ahd/no-em-dashes-in-proseline 446Em-dash (—) in prose. Rewrite with a comma, colon, period, parentheses, or middle dot. En-dashes (–) remain fine for numeric ranges.
- warn
ahd/no-em-dashes-in-proseline 466Em-dash (—) in prose. Rewrite with a comma, colon, period, parentheses, or middle dot. En-dashes (–) remain fine for numeric ranges.
- info
ahd/svg/palette-boundsSVG uses 21 distinct hex colours. Most single-illustration tokens declare 3–5; more than that usually means the generator drifted off-palette.
Source
The exact bytes the linter read. Lines with fires are highlighted; click a rule above to jump to its line.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AHD — Artificial Human Design</title>
<script src="https://cdn.tailwindcss.com"></script>
<style>
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');
:root {
--bg: #0a0a0b;
--bg-elevated: #111113;
--surface: #18181b;
--border: #27272a;
--border-subtle: #1f1f22;
--text-primary: #f4f4f5;
--text-secondary: #a1a1aa;
--text-muted: #71717a;
--text-dim: #52525b;
--accent: #e4e4e7;
--accent-warm: #d4d4d8;
--error: #7f1d1d;
--success: #14532d;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
background: var(--bg);
color: var(--text-primary);
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
::selection {
background: rgba(228, 228, 231, 0.15);
color: #fff;
}
/* Noise texture overlay */
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
pointer-events: none;
z-index: 9999;
}
.font-mono {
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}
/* Terminal code block */
.terminal {
background: var(--bg-elevated);
border: 1px solid var(--border);
border-radius: 8px;
position: relative;
overflow: hidden;
}
.terminal::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 34px;
background: var(--surface);
border-bottom: 1px solid var(--border);
display: flex;
align-items: center;
padding: 0 14px;
}
.terminal-dots {
display: flex;
gap: 6px;
position: relative;
z-index: 1;
padding: 10px 14px;
}
.terminal-dot {
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid;
}
.terminal-dot-red { border-color: #3f1212; background: #7f1d1d; }
.terminal-dot-yellow { border-color: #3f3112; background: #854d0e; }
.terminal-dot-green { border-color: #122f12; background: #14532d; }
.terminal-body {
padding: 16px 20px 20px;
overflow-x: auto;
}
.terminal-body pre {
margin: 0;
font-size: 13px;
line-height: 1.7;
color: var(--text-primary);
}
.terminal-body .prompt { color: var(--text-muted); }
.terminal-body .cmd { color: var(--text-primary); }
.terminal-body .flag { color: #9ca3af; }
.terminal-body .arg { color: #d1d5db; }
.terminal-body .comment { color: var(--text-dim); }
/* Link underline animation */
.link-underline {
position: relative;
text-decoration: none;
color: var(--text-secondary);
transition: color 0.15s ease;
}
.link-underline:hover {
color: var(--text-primary);
}
.link-underline::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 1px;
background: currentColor;
transition: width 0.2s ease;
}
.link-underline:hover::after {
width: 100%;
}
/* Manifest item styling */
.manifest-item {
display: flex;
align-items: baseline;
gap: 12px;
padding: 8px 0;
border-bottom: 1px solid var(--border-subtle);
}
.manifest-item:last-child {
border-bottom: none;
}
.manifest-bullet {
width: 6px;
height: 6px;
background: var(--text-dim);
border-radius: 50%;
flex-shrink: 0;
position: relative;
top: -1px;
}
.manifest-bullet.ships {
background: #525252;
}
.manifest-bullet.gated {
background: var(--text-dim);
border: 1px solid var(--border);
background: transparent;
}
/* Section divider */
.section-ornament {
display: flex;
align-items: center;
gap: 16px;
color: var(--text-dim);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.section-ornament::before,
.section-ornament::after {
content: '';
flex: 1;
height: 1px;
background: var(--border);
}
/* Animated cursor for terminal */
@keyframes blink {
0%, 50% { opacity: 1; }
51%, 100% { opacity: 0; }
}
.cursor {
display: inline-block;
width: 8px;
height: 17px;
background: var(--text-primary);
vertical-align: text-bottom;
margin-left: 2px;
animation: blink 1s step-end infinite;
}
/* Scroll reveal */
.reveal {
opacity: 0;
transform: translateY(12px);
animation: reveal 0.5s ease forwards;
}
@keyframes reveal {
to {
opacity: 1;
transform: translateY(0);
}
}
.reveal-delay-1 { animation-delay: 0.05s; }
.reveal-delay-2 { animation-delay: 0.1s; }
.reveal-delay-3 { animation-delay: 0.15s; }
.reveal-delay-4 { animation-delay: 0.2s; }
/* Horizontal rule with hash */
.rule-hash {
display: flex;
align-items: center;
gap: 12px;
margin: 48px 0;
}
.rule-hash::before {
content: '##';
font-family: 'JetBrains Mono', monospace;
font-size: 12px;
color: var(--text-dim);
font-weight: 400;
}
.rule-hash-line {
flex: 1;
height: 1px;
background: var(--border-subtle);
}
/* Code inline */
code.inline {
font-family: 'JetBrains Mono', monospace;
font-size: 0.875em;
color: var(--text-secondary);
background: var(--surface);
padding: 2px 6px;
border-radius: 4px;
border: 1px solid var(--border);
}
/* Subtle glow on terminal */
.terminal-glow {
box-shadow: 0 0 0 1px var(--border), 0 20px 50px -15px rgba(0,0,0,0.5);
}
/* Smooth scroll */
html {
scroll-behavior: smooth;
}
/* Focus styles */
a:focus-visible, button:focus-visible {
outline: 1px solid var(--text-muted);
outline-offset: 2px;
}
</style>
</head>
<body class="min-h-screen">
<main class="max-w-2xl mx-auto px-6 py-16 md:py-24">
<!-- Header -->
<header class="mb-16 reveal">
<div class="flex items-baseline gap-4 mb-6">
<span class="font-mono text-sm text-muted-foreground tracking-wider" style="color: var(--text-dim)">AHD</span>
<span class="text-xs" style="color: var(--text-dim)">/</span>
<span class="font-mono text-sm" style="color: var(--text-muted)">Artificial Human Design</span>
</div>
<h1 class="text-3xl md:text-4xl font-semibold tracking-tight leading-tight" style="color: var(--text-primary); letter-spacing: -0.02em;">
A framework for running design <em>past</em> a human before it ships.
</h1>
</header>
<!-- Problem Statement -->
<section class="mb-12 reveal reveal-delay-1">
<p class="text-base leading-relaxed" style="color: var(--text-secondary)">
You have already seen the slop. The sameness. The confident wrongness of generated output that no one reviewed. AHD does not lecture about this problem; it gives you a toolchain to prevent it in your own workflow.
</p>
<p class="mt-4 text-base leading-relaxed" style="color: var(--text-secondary)">
The system compiles a design brief into a structured evaluation, runs it against frontier vision models with explicit rubrics, and returns scored criticism you can act on. Not scores for vanity. Scores that block merge until they are addressed.
</p>
</section>
<!-- The One-Liner -->
<section class="mb-12 reveal reveal-delay-2">
<div class="terminal terminal-glow">
<div class="terminal-dots">
<span class="terminal-dot terminal-dot-red"></span>
<span class="terminal-dot terminal-dot-yellow"></span>
<span class="terminal-dot terminal-dot-green"></span>
</div>
<div class="terminal-body">
<pre><span class="prompt">$</span> <span class="cmd">ahd</span> <span class="flag">eval-live</span> <span class="arg">swiss-editorial</span> <span class="flag">--brief</span> <span class="arg">briefs/landing.yml</span> <span class="flag">--models</span> <span class="arg"><specs></span> <span class="flag">--n</span> <span class="arg">10</span><span class="cursor"></span>
<span class="comment"># Compiles brief → runs 28-rule lint → dispatches to vision critic → returns scored report</span></pre>
</div>
</div>
</section>
<!-- What it produces -->
<section class="mb-12 reveal reveal-delay-3">
<p class="text-sm font-mono mb-3" style="color: var(--text-dim)">OUTPUT</p>
<p class="text-base leading-relaxed" style="color: var(--text-secondary)">
A directory of evaluated frames with per-rule scores, a deduplicated issue list ranked by severity, and a structured brief you can check in and diff. The vision critic runs with a frozen system prompt and token-constrained output, so results are reproducible across runs and models.
</p>
</section>
<div class="rule-hash">
<div class="rule-hash-line"></div>
</div>
<!-- Manifest: What Ships -->
<section class="mb-12 reveal reveal-delay-3">
<h2 class="section-ornament mb-6">
<span>What ships</span>
</h2>
<div class="space-y-0">
<div class="manifest-item">
<span class="manifest-bullet ships"></span>
<div>
<span class="font-medium text-sm" style="color: var(--text-primary)">Brief compiler</span>
<span class="text-sm ml-2" style="color: var(--text-muted)">YAML/JSON spec to internal representation</span>
</div>
</div>
<div class="manifest-item">
<span class="manifest-bullet ships"></span>
<div>
<span class="font-medium text-sm" style="color: var(--text-primary)">28-rule linter</span>
<span class="text-sm ml-2" style="color: var(--text-muted)">Static analysis without model calls</span>
</div>
</div>
<div class="manifest-item">
<span class="manifest-bullet ships"></span>
<div>
<span class="font-medium text-sm" style="color: var(--text-primary)">Eval harness</span>
<span class="text-sm ml-2" style="color: var(--text-muted)">Parallel runner with timeout and retry</span>
</div>
</div>
<div class="manifest-item">
<span class="manifest-bullet ships"></span>
<div>
<span class="font-medium text-sm" style="color: var(--text-primary)">Vision-critic scaffold</span>
<span class="text-sm ml-2" style="color: var(--text-muted)">System prompt, rubric JSON schema, scorer</span>
</div>
</div>
<div class="manifest-item">
<span class="manifest-bullet ships"></span>
<div>
<span class="font-medium text-sm" style="color: var(--text-primary)">MCP server</span>
<span class="text-sm ml-2" style="color: var(--text-muted)">Model Context Protocol for IDE integration</span>
</div>
</div>
<div class="manifest-item">
<span class="manifest-bullet ships"></span>
<div>
<span class="font-medium text-sm" style="color: var(--text-primary)">Editor plugins</span>
<span class="text-sm ml-2" style="color: var(--text-muted)">VS Code and Neovim (source in repo, manual install)</span>
</div>
</div>
<div class="manifest-item">
<span class="manifest-bullet ships"></span>
<div>
<span class="font-medium text-sm" style="color: var(--text-primary)">Eight tokens</span>
<span class="text-sm ml-2" style="color: var(--text-muted)">Curated design vocabulary for prompt grounding</span>
</div>
</div>
</div>
</section>
<!-- Manifest: What Is Gated -->
<section class="mb-16 reveal reveal-delay-4">
<h2 class="section-ornament mb-6">
<span>What is gated</span>
</h2>
<div class="space-y-0">
<div class="manifest-item">
<span class="manifest-bullet gated"></span>
<div>
<span class="font-medium text-sm" style="color: var(--text-primary)">Live frontier-model calls</span>
<span class="text-sm ml-2" style="color: var(--text-muted)">Requires your own API keys</span>
</div>
</div>
<div class="manifest-item">
<span class="manifest-bullet gated"></span>
<div>
<span class="font-medium text-sm" style="color: var(--text-primary)">Live vision critique</span>
<span class="text-sm ml-2" style="color: var(--text-muted)">Needs multimodal key + screenshot pipeline setup</span>
</div>
</div>
<div class="manifest-item">
<span class="manifest-bullet gated"></span>
<div>
<span class="font-medium text-sm" style="color: var(--text-primary)">Standalone npm packages for editor plugins</span>
<span class="text-sm ml-2" style="color: var(--text-muted)">Publishing pipeline pending</span>
</div>
</div>
<div class="manifest-item">
<span class="manifest-bullet gated"></span>
<div>
<span class="font-medium text-sm" style="color: var(--text-primary)">Additional tokens</span>
<span class="text-sm ml-2" style="color: var(--text-muted)">Process for community submission not yet open</span>
</div>
</div>
</div>
</section>
<!-- Read the code CTA -->
<section class="mb-16 reveal reveal-delay-4">
<a href="https://github.com/artificial-human-design/ahd"
← ahd/no-em-dashes-in-prose
class="group inline-flex items-center gap-3 px-5 py-3 rounded-lg border text-sm font-medium transition-all duration-150"
style="background: var(--surface); border-color: var(--border); color: var(--text-secondary)"
onmouseover="this.style.borderColor='var(--text-muted)'; this.style.color='var(--text-primary)'"
onmouseout="this.style.borderColor='var(--border)'; this.style.color='var(--text-secondary)'">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="transition: transform 0.15s ease" class="group-hover:translate-x-0.5">
← ahd/no-inline-style-animation
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/>
</svg>
<span>Read the code — GitHub</span>
← ahd/no-em-dashes-in-prose
<span class="font-mono text-xs ml-1" style="color: var(--text-dim)">→</span>
</a>
<p class="mt-3 text-xs font-mono" style="color: var(--text-dim)">forgejo mirror available on request</p>
</section>
<!-- Footer -->
<footer class="pt-8 border-t reveal reveal-delay-4" style="border-color: var(--border-subtle)">
<div class="flex flex-col md:flex-row md:items-start md:justify-between gap-6">
<div class="space-y-3">
<p class="text-xs leading-relaxed" style="color: var(--text-dim); max-width: 420px;">
<span class="font-medium" style="color: var(--text-muted)">Licence.</span> Code is released under <a href="#" class="link-underline" style="color: var(--text-muted)">FSL-1.1-Apache-2.0</a>. Tokens and artwork under <a href="#" class="link-underline" style="color: var(--text-muted)">CC-BY-4.0</a>. The FSL converts to Apache-2.0 after two years. No commercial use restriction after conversion.
</p>
</div>
<div class="flex items-center gap-6 text-xs" style="color: var(--text-dim)">
<a href="https://github.com/artificial-human-design/ahd" class="link-underline">Source</a>
<a href="#" class="link-underline">Issues</a>
<a href="#" class="link-underline">Discussions</a>
</div>
</div>
<p class="mt-6 text-xs font-mono" style="color: var(--text-dim); opacity: 0.6">
← ahd/no-em-dashes-in-prose
ahd — <span id="commit-hash">7a4f2c9</span> — main
</p>
</footer>
</main>
<script>
// Subtle parallax on scroll for terminal
const terminal = document.querySelector('.terminal');
let ticking = false;
function updateParallax() {
const scrolled = window.pageYOffset;
const rate = scrolled * 0.02;
const maxOffset = 8;
const offset = Math.min(rate, maxOffset);
terminal.style.transform = `translateY(${offset}px)`;
ticking = false;
}
window.addEventListener('scroll', () => {
if (!ticking) {
window.requestAnimationFrame(updateParallax);
ticking = true;
}
});
// Random commit hash on load for that "real" feel
const hash = Array.from({length: 7}, () => '0123456789abcdef'[Math.floor(Math.random() * 16)]).join('');
document.getElementById('commit-hash').textContent = hash;
</script>
</body>
</html>
Rendered
The same HTML rendered in a sandboxed frame. No scripts execute, no network calls are allowed; this is the same HTML the source block shows above, nothing more.
On phone-size screens the frame renders the sample at its designed viewport scaled down, so a landing page meant for a desktop still reads as a landing page. Open rendered sample in a new tab to view full size.
Every sample in this run is reachable via its cell / condition / id. The full run writeup with per-cell and per-tell tables lives at /evals/2026-04-22-swiss-n30.