feat: add inline SVG diagrams to judgment essay

Two diagrams in the warm palette (paper bg, terracotta accent):

1. Floor and Ceiling: before/after comparison showing AI raises the
   floor (what's functional) while the ceiling (excellence, judgment)
   stays where it is. The gap between them IS the argument.

2. Lagged Failure Timeline: decision → invisible degradation →
   failure surfaces 12-18 months later → misattributed to market
   conditions. Makes the delay visible as a four-node flow.

Both use SVG primitives (rect, line, text, circle) following the
diagram design spec: warm palette, Inter for labels, Source Serif
for descriptions, terracotta for accents.

🤖 Generated with Amplifier

Co-Authored-By: Amplifier <240397093+microsoft-amplifier@users.noreply.github.com>
This commit is contained in:
Ken
2026-05-27 03:53:02 +00:00
parent b0960ec71c
commit 84bf9e706b
2 changed files with 69 additions and 0 deletions
+4
View File
@@ -9,4 +9,8 @@ bundle:
includes: includes:
- bundle: git+https://github.com/kenotron-ms/amplifier-bundle-design-md@master - bundle: git+https://github.com/kenotron-ms/amplifier-bundle-design-md@master
tools:
- module: tool-openai-images
source: git+https://github.com/singh2/amplifier-module-tool-openai-images@main
--- ---
@@ -12,6 +12,38 @@ Real professional engineers will still be needed for excellence. Not because AI
AI raises the floor dramatically. It does not flatten the ceiling. AI raises the floor dramatically. It does not flatten the ceiling.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 280" role="img" aria-label="Diagram: AI raises the floor but the ceiling stays. The gap between them is judgment.">
<rect width="840" height="280" fill="#F5F0E8" rx="4"/>
<!-- Left: Before AI -->
<text x="210" y="32" text-anchor="middle" font-family="Inter, sans-serif" font-size="13" font-weight="600" fill="#2B2421" letter-spacing="0.05em">BEFORE AI</text>
<rect x="60" y="48" width="300" height="196" rx="3" fill="none" stroke="#DDD7CD" stroke-width="1"/>
<line x1="80" y1="80" x2="340" y2="80" stroke="#A0522D" stroke-width="2"/>
<text x="350" y="84" font-family="Inter, sans-serif" font-size="11" fill="#A0522D" font-weight="600">EXCELLENCE</text>
<rect x="80" y="80" width="260" height="100" rx="0" fill="#A0522D" fill-opacity="0.08"/>
<text x="210" y="136" text-anchor="middle" font-family="Source Serif 4, Georgia, serif" font-size="14" fill="#6B5F55" font-style="italic">judgment, taste,</text>
<text x="210" y="154" text-anchor="middle" font-family="Source Serif 4, Georgia, serif" font-size="14" fill="#6B5F55" font-style="italic">accountability</text>
<line x1="80" y1="180" x2="340" y2="180" stroke="#6B5F55" stroke-width="2"/>
<text x="350" y="184" font-family="Inter, sans-serif" font-size="11" fill="#6B5F55" font-weight="600">FUNCTIONAL</text>
<rect x="80" y="180" width="260" height="44" rx="0" fill="#6B5F55" fill-opacity="0.06"/>
<text x="210" y="206" text-anchor="middle" font-family="Source Serif 4, Georgia, serif" font-size="12" fill="#948880">code that runs</text>
<!-- Right: After AI -->
<text x="630" y="32" text-anchor="middle" font-family="Inter, sans-serif" font-size="13" font-weight="600" fill="#2B2421" letter-spacing="0.05em">AFTER AI</text>
<rect x="480" y="48" width="300" height="196" rx="3" fill="none" stroke="#DDD7CD" stroke-width="1"/>
<line x1="500" y1="80" x2="760" y2="80" stroke="#A0522D" stroke-width="2"/>
<text x="770" y="84" font-family="Inter, sans-serif" font-size="11" fill="#A0522D" font-weight="600">UNCHANGED</text>
<rect x="500" y="80" width="260" height="52" rx="0" fill="#A0522D" fill-opacity="0.08"/>
<text x="630" y="112" text-anchor="middle" font-family="Source Serif 4, Georgia, serif" font-size="14" fill="#6B5F55" font-style="italic">still judgment</text>
<line x1="500" y1="132" x2="760" y2="132" stroke="#6B5F55" stroke-width="2"/>
<text x="770" y="136" font-family="Inter, sans-serif" font-size="11" fill="#6B5F55" font-weight="600">RAISED</text>
<rect x="500" y="132" width="260" height="92" rx="0" fill="#6B5F55" fill-opacity="0.06"/>
<text x="630" y="172" text-anchor="middle" font-family="Source Serif 4, Georgia, serif" font-size="12" fill="#948880">AI-assisted code that runs,</text>
<text x="630" y="188" text-anchor="middle" font-family="Source Serif 4, Georgia, serif" font-size="12" fill="#948880">passes tests, looks competent</text>
<!-- Arrow showing floor rising -->
<line x1="420" y1="180" x2="420" y2="140" stroke="#A0522D" stroke-width="1.5" marker-end="url(#arrowJ)"/>
<text x="420" y="198" text-anchor="middle" font-family="Inter, sans-serif" font-size="10" fill="#A0522D">floor rises</text>
<defs><marker id="arrowJ" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6 Z" fill="#A0522D"/></marker></defs>
</svg>
## The Dignity Problem (Most Underappreciated) ## The Dignity Problem (Most Underappreciated)
The threat to engineers isn't only economic. When expert judgment stops being consulted, something human is lost: the social recognition that hard-won expertise deserves. A doctor who loses clinical judgment to AI loses the acknowledgment that fifteen years of intuition was worth something. The income is secondary. The threat to engineers isn't only economic. When expert judgment stops being consulted, something human is lost: the social recognition that hard-won expertise deserves. A doctor who loses clinical judgment to AI loses the acknowledgment that fifteen years of intuition was worth something. The income is secondary.
@@ -58,6 +90,39 @@ The failure mode of cutting engineering judgment is **lagged**. It takes 12-18 m
This is structurally identical to cutting cybersecurity. You don't see the attacks that didn't happen. This is structurally identical to cutting cybersecurity. You don't see the attacks that didn't happen.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 840 160" role="img" aria-label="Diagram: The lagged failure timeline. Decision to cut engineering judgment leads to invisible degradation, then visible failure 12-18 months later, attributed to the wrong cause.">
<rect width="840" height="160" fill="#F5F0E8" rx="4"/>
<!-- Timeline line -->
<line x1="40" y1="80" x2="800" y2="80" stroke="#DDD7CD" stroke-width="1.5"/>
<!-- Event 1: Decision -->
<circle cx="100" cy="80" r="8" fill="#A0522D"/>
<text x="100" y="56" text-anchor="middle" font-family="Inter, sans-serif" font-size="11" font-weight="600" fill="#2B2421">DECISION</text>
<text x="100" y="110" text-anchor="middle" font-family="Source Serif 4, Georgia, serif" font-size="10" fill="#6B5F55">Cut engineering</text>
<text x="100" y="123" text-anchor="middle" font-family="Source Serif 4, Georgia, serif" font-size="10" fill="#6B5F55">judgment</text>
<!-- Event 2: Invisible degradation -->
<circle cx="340" cy="80" r="8" fill="#DDD7CD" stroke="#6B5F55" stroke-width="1.5" stroke-dasharray="3,2"/>
<text x="340" y="56" text-anchor="middle" font-family="Inter, sans-serif" font-size="11" font-weight="600" fill="#948880">INVISIBLE</text>
<text x="340" y="110" text-anchor="middle" font-family="Source Serif 4, Georgia, serif" font-size="10" fill="#948880">Coherence degrades.</text>
<text x="340" y="123" text-anchor="middle" font-family="Source Serif 4, Georgia, serif" font-size="10" fill="#948880">Nobody notices.</text>
<!-- Time label -->
<text x="220" y="75" text-anchor="middle" font-family="Inter, sans-serif" font-size="9" fill="#948880">12-18 months</text>
<!-- Event 3: Visible failure -->
<circle cx="560" cy="80" r="8" fill="#8B3A2A"/>
<text x="560" y="56" text-anchor="middle" font-family="Inter, sans-serif" font-size="11" font-weight="600" fill="#8B3A2A">FAILURE</text>
<text x="560" y="110" text-anchor="middle" font-family="Source Serif 4, Georgia, serif" font-size="10" fill="#6B5F55">System breaks at scale.</text>
<text x="560" y="123" text-anchor="middle" font-family="Source Serif 4, Georgia, serif" font-size="10" fill="#6B5F55">Outage. Data loss. Breach.</text>
<!-- Event 4: Misattribution -->
<circle cx="740" cy="80" r="8" fill="#6B5F55"/>
<text x="740" y="56" text-anchor="middle" font-family="Inter, sans-serif" font-size="11" font-weight="600" fill="#6B5F55">BLAMED ON</text>
<text x="740" y="110" text-anchor="middle" font-family="Source Serif 4, Georgia, serif" font-size="10" fill="#6B5F55">"Market conditions."</text>
<text x="740" y="123" text-anchor="middle" font-family="Source Serif 4, Georgia, serif" font-size="10" fill="#6B5F55">"Leadership changes."</text>
<!-- Arrows -->
<line x1="108" y1="80" x2="330" y2="80" stroke="#948880" stroke-width="1" stroke-dasharray="4,3"/>
<line x1="350" y1="80" x2="550" y2="80" stroke="#6B5F55" stroke-width="1.5" marker-end="url(#arrowL)"/>
<line x1="570" y1="80" x2="730" y2="80" stroke="#6B5F55" stroke-width="1" marker-end="url(#arrowL)"/>
<defs><marker id="arrowL" markerWidth="6" markerHeight="6" refX="5" refY="3" orient="auto"><path d="M0,0 L6,3 L0,6 Z" fill="#6B5F55"/></marker></defs>
</svg>
**What could change the incentive structure:** **What could change the incentive structure:**
- Liability: if organizations faced professional accountability for AI-generated software failures the way they face accountability for accounting fraud, you'd need engineers the way you need licensed accountants - Liability: if organizations faced professional accountability for AI-generated software failures the way they face accountability for accounting fraud, you'd need engineers the way you need licensed accountants
- Attributed failures: high-profile disasters clearly traced to "they fired engineers and replaced with AI" - Attributed failures: high-profile disasters clearly traced to "they fired engineers and replaced with AI"