Aug 2026
UI/UX knowledge base for AI agents
A design guide, build playbook and rule log that coding agents read before they build an interface
- AI
- Knowledge base
- Duration
- 1 month
- Role
- Owner and author, with Claude Code as co-author
Overview
A structured design knowledge base that Claude Code, or any coding agent, reads while building websites, dashboards and apps. It holds a 21-chapter design guide based on Kole Jain’s UI/UX videos, a build playbook with six checkpoints, a log of settled rules and checked build resources.
Tools
- Claude Code
- Markdown
- Next.js
- Tailwind CSS
- shadcn/ui
Why agent-built interfaces look generic
AI coding agents produce competent but generic interfaces: a vague prompt gets the statistical average, the model never sees its own render, and without a design system values drift from page to page. Design advice from videos is scattered, sometimes contradictory and sometimes out of date for a real Next.js and Tailwind 4 build.
What it holds
The core is a 21-chapter guide distilled from about 50 of Kole Jain’s UI/UX videos, with concrete values for typography, colour, layout, spacing, components, dashboards, mobile, forms, tables, checkout, animation and anti-patterns. Beside it sits a synthesis of 201 videos on why AI-built frontends fail and what fixes them, analysed by 10 parallel Opus agents. Resource catalogs list about 76 shadcn repositories with their licenses and 18 photo and video APIs with a license cheat sheet.
How an agent uses it
The build playbook takes a project through phases 0 to 8 with six gates: approved references before code, a design file before scaffolding, real copy and assets, hero variants, screenshot checks on desktop and mobile, and an anti-pattern audit with build and lint. A decisions log settles 14 conflicts between sources, such as animation timing and Lucide as the default icon set. A routing file sends each kind of task to only the files it needs.