Two AI agents received identical instructions to build a luxury fashion website. One had the polanyi-design skill loaded. See the difference below.
Both pages rendered from AI-generated code. Same prompt: "NOIR ATELIER luxury fashion brand website."
| Aspect | Without Skill | With Skill |
|---|---|---|
| Spacing System | Powers-of-two scale (8, 16, 24, 32, 48, 64px) — mechanical, predictable | Fibonacci scale (8, 13, 21, 34, 55, 89, 144, 233px) — organic tension, varied rhythm |
| Typography | Cormorant Garamond + Inter + Playfair Display (3 fonts — conventional luxury pairing) | Cormorant Garamond + Outfit (serif + geometric sans — actual contrast). Modular scale at 1.333 ratio with 5 named type classes |
| Color System | 10 warm neutrals + #8b7355 accent. Named by appearance (ivory, cream, parchment...) |
9 warm neutrals + #8B4513 oxide accent. Two-tier token system: raw values → semantic aliases (--surface-primary, --accent) |
| Hero Treatment | Ken Burns zoom on background image, gradient overlays, staggered text reveal | "NOIR" at ~22vw as architectural outline — 1px transparent stroke, animated from expanded to compressed letter-spacing. Reversed the typical "spread out" cliché. |
| Grid Strategy | 12-column asymmetric grid with varied aspect ratios | 2-column layout with Fibonacci stagger offsets on alternating items — organic asymmetry, not mechanical column math |
| Accessibility | Custom cursor hidden on touch. No mention of focus states or reduced motion. | focus-visible outlines at 2px/4px offset. prefers-reduced-motion zeroes all animation durations. Custom cursor disabled on touch/small screens. |
| Design Thesis | Not stated — decisions are implicit | Explicitly declared: Voice = "Austere." Rhythm = Fibonacci. Signature = architectural outlined type. Anti-convergence list of what to deliberately avoid. |
Blind A/B evaluation across 5 design prompts, scored 0-10 per dimension