A docs home had the shell but none of the content system
/docs-homeCaptured at a 375px viewport. Long pages scroll inside the frame.
The screenshots stay in Japanese. Every round is a real screen for a real Japanese industry, so an English re-render would no longer be the screen the agent actually produced.
Write-up
A docs home had the shell but none of the content system
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 documentation-site home page.
The agent had the public npm build and docs site, with the source withheld. The assignment called for top navigation and search (Command-K), a grouped left sidebar that becomes a drawer on mobile, breadcrumbs, main content (an h1, a quick-start CodeBlock, a callout, and a feature list), an "On this page" table of contents on the right, previous and next links, and a footer.
Gunjo's own site, gunjo.jp, is a documentation site. Asking a cold agent to build a docs home was therefore the most direct test of whether the product could build on its home turf. A failure here would be especially revealing.
Result: 3.5/5, with a strong shell and an empty content layer
The entire outer shell was available: Breadcrumb with the correct aria-current, a complete CodeBlock, DocumentPager for previous and next links, CommandPalette for Command-K, Sheet for the mobile drawer, Header, Footer, and dark mode. Every check passed: zero tsc, build, and console errors; exactly one h1; no skipped heading levels; a real <nav aria-current> in the sidebar; and no overflow at 375px.
The score was low because Gunjo had no component for the substance of a docs page: long-form copy plus a table of contents. The cold agent also found more real bugs inside components.
The claim failed again: this round's component bugs
1. CardTitle hard-coded an <h3>, an accessibility defect. Placing a card beside the page's <h1> created a jump from heading level 1 to 3, violating WCAG. I added an as prop while keeping h3 as the backward-compatible default, letting consumers choose the correct level. I logged issue #116.
2. PageAside inserted an extra <h3> before the h1, another accessibility defect. The mobile "On this page" toggle used Accordion, whose Radix header rendered an <h3> before the page title. I replaced it with native <details> and <summary>, where the summary is not a heading. I logged issue #117.
3. DocsTemplate broke on mobile. Its default grid-cols-[200px_...] reserved a fixed 200px sidebar even at 375px and crushed the content. I changed mobile to one column, where the sidebar belongs in a drawer, and enabled multicolumn layouts at lg and xl. I logged issue #118. This belonged to the same template-responsibility class as issues #66 and #111.
I fixed all three in the source and added drift checks in this session. In parallel, I fixed the 256 by 256 constraint in Img from issue #113, another fixed-dimension defect, by changing the .pen source to fill its parent. I also repaired a drift guard that had silently stopped checking the component when its width was no longer exactly 256.
What I took away: the shell and the content system are different layers
The two new accessibility defects had the same underlying cause: Gunjo had no typography or Heading component at the time (issue #110). CardTitle and PageAside assembled headings locally, which let the hierarchy break. Gunjo had no TableOfContents component at the time (issue #120), leaving the contents list, active-heading tracking, and every heading ID to be hand-rolled.
Outer shell (Header, Sidebar, Breadcrumb, Pager, and CodeBlock): complete and strong
Content system (Heading, Prose, and TableOfContents): missing, even though this is the core of a docs page
The blog in #21, landing page in #22, and docs home here all identified the missing typography layer as the biggest gap. Gunjo's outer components worked even when the agent composed them from scratch, but the design system had nothing for long-form copy, heading hierarchy, and a table of contents. Three consecutive screen types made the next area of work clear.
(I fixed issues #116 and #117 immediately because they were local symptoms of the missing typography layer. The underlying Heading, Prose, and table-of-contents design work went to the beta gate.)
Next up: build log #24
- A pricing comparison, error page, or admin dashboard, continuing to test the content layer and higher-level composition.
The run
- gunjo.jp / npm
@gunjo/ui/ GitHub - Earlier rounds: #1 through #22
- 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.
This series is co-created with AI (Claude and Codex). A human designs the experiments, makes the calls, and fact-checks before publishing; the AI does the hands-on work and drafting.
Components from @gunjo/ui
The components this screen's source imports directly.
The code the agent actually wrote
Click a file to expand its source.