ken/crashtestdev
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add inline SVG diagrams to judgment essay

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
src/content/posts/ai-commoditizes-features-but-judgment-compounds.md
+65
View File
@@ -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.
<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 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.
<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:**
- 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"