A landing page disproved my claim that the component bugs were behind me

⁠Build log series⁠: I hand a real screen to an AI that has never seen Gunjo (@gunjo/ui) and let it build. This round covered a ⁠SaaS marketing landing page⁠.

I shared the shipped npm package and docs site, but not the source. The assignment called for a complete landing page with navigation, a hero (h1 and CTA), a logo strip, feature grid, metrics band, testimonials, three pricing plans, FAQ, final CTA, and footer.

Round #21 showed that accessibility inside individual components had stabilized. This time I tested ⁠a different dimension⁠ for the first time: composing a marketing page.

Result: 3.5/5, the series low but a useful one

tsc and build passed, the console stayed clear, the server and browser output matched with no hydration errors, ⁠the page had exactly one h1 and skipped no heading levels⁠, nothing overflowed at 375px, and all 36 interactive elements were real <a> or <button> elements. ⁠The foundation was strong:⁠ Card, Grid with its wrapping minItemWidth, Button with asChild, Accordion, Statistic, and Container all worked individually.

The score was low because ⁠the library was designed around apps and dashboards, not marketing pages⁠, not because those foundations were poor. The cold agent also found ⁠two real component bugs⁠.

The claim did not hold: two bugs inside components

I wrote in #21 that the components had stopped producing new classes of defect. ⁠Round #22 revised that conclusion.⁠

⁠1. LandingTemplate used a raw .container, a major defect.⁠ The only marketing template rendered each section with Tailwind's .container, which sets breakpoint-based maximum widths but provides neither mx-auto centering nor horizontal padding. In the measured output, ⁠the content hugged the left edge while 64px of unusable space remained on the right.⁠ Gunjo already had a real Container component, but its own template did not use it. I logged issue #111.

⁠2. Img was fixed at 256 by 256, a minor defect.⁠ Its wrapper used h-[256px] w-[256px] in every state. Even when the consumer supplied aspectRatio, the explicit height won, forcing every hero image into a square. I logged issue #113. ⁠This continued the fixed-dimension family from issues #47, #58, #66, #72, #78, and #100.⁠

What I fixed this round: issue #111 through the single source of truth

I replaced the raw wrapper in LandingTemplate with <Container size="2xl">. The visual dimensions in .pen did not change because Container is the React-layer glue that centers the content. ⁠The source change and drift checks covered the whole fix:⁠

+ <Container as="section" size="2xl" className="py-12 ...">  // previously className="container ..."
+ assertMatch(landingSource, /<Container\b/, ...)             // require the template to use Container
+ assertNoMatch(landingSource, /className="container\b/, ...) // prevent the raw .container from returning

I verified the result in /embed/landing: the inner sticky header used mx-auto ... max-w-screen-2xl, and the logo and CTA sat within the intended margins. design:verify passed with no exclusions. ⁠Issue #113 belonged to the .pen work because it was another fixed-dimension defect.⁠

The largest gap was still typography

No new accessibility bug appeared. Instead, the cold agent identified ⁠the biggest missing piece⁠: ⁠a landing page is mostly typography, yet Gunjo has no established composition for headings and body copy.⁠ The agent hand-rolled every h1, h2, eyebrow, and paragraph. Outside CardTitle, which is fixed to h3, and MarkdownRenderer, ⁠there is no heading or body-copy component.⁠

That is issue #110, the missing typography layer first identified by the blog in #21. ⁠Two different screen types, a blog and a landing page, converged on the same underlying gap in consecutive rounds.⁠ The signal was clear.

What I took away: a cold test exposes mismatched design assumptions

Quality (bugs, accessibility, types, and responsive behavior): individual components are nearly done
Composition (marketing-page structure and heading patterns): gaps remain because the library is still app-oriented

Good components were not enough to earn more than 3.5/5 without ⁠a reliable way to compose a landing page.⁠ The cold agent bypassed LandingTemplate and rebuilt the page by hand because it did not trust the template. That was the central finding. ⁠Gaps remained,⁠ so the series continued.

Next up: build log #23

• ⁠A docs home, pricing comparison, or error page⁠, continuing to test composition and heading patterns.

The run

• ⁠gunjo.jp⁠ / npm @gunjo/ui / ⁠GitHub⁠
• Earlier rounds: #1 through #21
• Overview: Gunjo (@gunjo/ui) / Why it exists: Design systems in the age of AI
• ⁠GunjoUI by UIXHERO⁠

Gunjo was still in early alpha at the time; issues are welcome.