// v5 — AI Design Fluency (split layout: Range vs Judgment)
// Two halves, each with a phrase as the header and a bullet list.
const AI_HELPS = [
"Gather and synthesize research signals",
"Generate broader creative range",
"Prototype visual and interface systems faster",
"Simulate users, edge cases, scenarios, objections",
"Pressure-test language and positioning",
"Scaffold code, components, and interaction models",
"Build bespoke visual systems",
"Draft strategy, decks, and prototypes",
"Translate concepts into production-ready systems with human review"];
const AI_NOTS = [
"Replace taste.",
"Replace judgment.",
"Understand context by default.",
"Absolve the designer from responsibility.",
"Decide what should be real."
// intentionally one fewer than AI_HELPS — the constraints are tighter
];
// Range marker — dots scattering outward as section enters viewport
const RangeMarker = () => {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
const el = ref.current;if (!el) return;
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) {setSeen(true);io.disconnect();}
}, { threshold: 0.2 });
io.observe(el);
return () => io.disconnect();
}, []);
const dots = Array.from({ length: 28 }).map((_, i) => {
const angle = -100 + i / 27 * 200;
const r = 60 + i * 37 % 90;
const x = Math.cos(angle * Math.PI / 180) * r;
const y = Math.sin(angle * Math.PI / 180) * r;
return { x, y, d: i * 35 };
});
return (
);
};
// Judgment marker — many dots condensing inward toward one accent point
const JudgmentMarker = () => {
const ref = useRef(null);
const [seen, setSeen] = useState(false);
useEffect(() => {
const el = ref.current;if (!el) return;
const io = new IntersectionObserver(([e]) => {
if (e.isIntersecting) {setSeen(true);io.disconnect();}
}, { threshold: 0.2 });
io.observe(el);
return () => io.disconnect();
}, []);
const dots = Array.from({ length: 22 }).map((_, i) => {
const angle = -180 + i / 21 * 360;
const r = 70 + i * 31 % 50;
const x = Math.cos(angle * Math.PI / 180) * r;
const y = Math.sin(angle * Math.PI / 180) * r;
return { x, y, d: i * 42 };
});
return (
);
};
const V5AIFluency = () => {
return (
02CAI design fluency · the new instrument
{" "}
Not a gimmick. Not a separate tool track. AI is now part of how the practice researches, explores, prototypes, critiques, writes, designs, and builds. The value is not that AI makes things. The value is knowing what to ask for, what to reject, what to refine, and what should exist at all.
{/* SPLIT — RANGE vs JUDGMENT */}
{/* LEFT — Range */}
— Side A · the expansion
The practice creates meaning.
— AI helps me ({String(AI_HELPS.length).padStart(2, "0")})