Teken een app, krijg echte componenten

Je tekent zoals op een whiteboard. Een gesloten haal wordt een rechthoek, een zigzag of golf wordt tekst, een rondje een avatar. Vier losse lijnen of twee L's die samen een vak vormen, leest UIDraw ook als één rechthoek. Hoe het vak heet, raadt hij uit plek en maat: smal en hoog aan de zijkant is een zijmenu, breed en laag bovenin een navigatiebalk, onderin een footer, klein en breed een knop, en de rest een paneel. Dat voorstel staat als label met een vraagteken op de vorm.

Met een rechtsklik kies je het echte onderdeel, of je neemt het voorstel over. Ligt een vak voor het grootste deel in een ander vak, dan wordt het daar een kind van, zoals een knop in een paneel. Dat staat nergens opgeslagen: UIDraw leidt het elke keer opnieuw af uit de tekening, dus als je een vak verschuift, verhuist het kind vanzelf mee of los. Tekst wordt ingevuld uit een paar zinnen over het tekenen zelf, zodat er nergens nep-Latijn als opvulling staat.

Er zijn acht kits: shadcn/ui, Tailwind, daisyUI, Bootstrap, Radix Themes, Mantine, Material Web en Ant Design. Wissel je van kit, dan blijft je tekening staan en kleedt UIDraw hetzelfde scherm opnieuw aan, met de iconen die bij die kit horen: Heroicons bij Tailwind, Material Symbols bij Material, lucide bij shadcn.

Elk onderdeel draait in een eigen iframe met de echte stylesheet van de kit erin. Ant Design gaat nog een stap verder: dat is React, dus draait in het frame hun eigen React. Wie wil zien wat een kit echt anders doet, tekent één keer en klikt door de lijst.

De motor komt uit UIcockpit, ons open-source gereedschap dat negen design systems naast elkaar zet (zie de case op /projecten/ui-cockpit/). UIDraw draagt daar een vaste kopie van: de lijst met onderdelen, de vertaling per kit naar echte markup, en het bouwen van de echte stylesheet. Alleen de tekenlaag is nieuw.

De regel is dat er niets verzonnen wordt. Elke class, elk icoon en elk component komt uit het gepubliceerde pakket van de kit, en waar een kit iets niet heeft, zegt UIDraw dat hardop in plaats van het na te bouwen. Material Web heeft bijvoorbeeld geen navigatiebalk, geen tabel en geen footer, en shadcn/ui geen grafiek, want die zit daar in React en niet in een class.

Drie poorten bewaken dat bij elke build. De eerste kijkt of elke class echt in de stylesheet van de kit staat, en breekt de build af als er één is bedacht. De tweede opent de app in een echte headless Chrome en kijkt of elke class op de plek waar hij staat ook iets raakt. De derde pakt de export uit, bouwt hem met het eigen gereedschap van de kit (de Tailwind-CLI, Sass of esbuild) en kijkt of er daarna nog steeds niets verzonnen is.

Een app is meer dan één scherm, dus werk je in pagina's met tabs erboven. Het overzicht (toets G) zet ze als potloodschetsjes naast elkaar, en de volgorde waarin je ze sleept is de volgorde in de export. Vier voorbeelden staan klaar: App shell, Login, Site page en Settings. Je tekening blijft in je browser staan, je bewaart hem als bestand, of je deelt hem als link waarin de hele tekening ingepakt zit. Er is geen account en geen server.

Export geeft een zip met werkende code in de kit die je koos: de eerste pagina als index.html, de rest ernaast, het bestand om hem te bouwen, en een handvol papieren met de ontwerpkeuzes, de tokens en uitleg voor wie er met een AI-assistent verder aan werkt. Vakken die je nooit vulde gaan niet mee; die staan alleen als telling in een regel commentaar. Bij Ant Design komen er nog geen pagina's uit, en dat staat in de README van de zip.