Kapwa in an AI agent

BetterGov.ph volunteers built Kapwa so that Philippine government websites can share one look and one way of working, the way GOV.UK did for Britain. A resident who learns one site should be able to use the next.

The hard part has never been the design system. It is adoption: every agency would have to rebuild its own site by hand. RE:GOV tests the other way round. An agent reads the old site and rebuilds it on Kapwa in minutes, so adoption costs the agency nothing but a review.

Every rebuilt site loads Kapwa’s stylesheet: its colour scales, type and base styles. Everything a visitor sees is drawn with these colours.

On top, RE:GOV adds an editorial layer so a site reads like a public document: square corners, ruled sections, numbered indexes and a flat navy masthead. The components themselves, the header, navigation and all twelve content blocks, are RE:GOV’s own. Today no Kapwa React component is used. The rest of this page explains why, and what would change that.

Muse Spark sorts every piece of content on every page into one of twelve block types. Across all the sites RE:GOV has rebuilt, this is what Philippine government pages are made of, and whether Kapwa has a component for it:

• Card FitsTakes any children. A good base for the cards block, which appears on most sites.
• Banner PartlyRight for notices. Its call to action needs an onClick function, which a server-rendered or static page cannot pass, so only the text form works.
• Button PartlyRenders a <button> only. Most actions on a government site are links to another page or a PDF, and there is no href or link variant.
• ArticleCard, ArticleContent PartlyNews cards fit. Article content takes headings and paragraphs only, so lists, tables and links inside a page have nowhere to go.
• Input, Label FitsFine for the search box. RE:GOV's search form does not use them yet.
• Table Doesn't fitIts rows are fixed to id, name, email and status (Active, Pending, Inactive). A fee schedule or a list of barangays cannot be passed in.

1. 01Components shaped around sample data. Table and List take fixed fields, so they can show a demo but not a fee schedule. An agent needs components that accept any rows and any items of a known shape.
2. 02No machine-readable catalogue. To pick a component, a model needs to know which content each one is for, what it requires and what it does without JavaScript. RE:GOV had to write its own typed schema of twelve blocks for Muse Spark to fill in.
3. 03Required fields invite invention. If a component insists on a field the source never had, a model will fill it. On a government site that is the one thing it must never do. Everything except the core content should be optional, with a sensible fallback.
4. 04Pages must work without JavaScript. Agencies may host the result as plain HTML. Callbacks such as onClick cannot cross into a server-rendered or static page, so components need link and <details> forms.
5. 05Shape by override. Square corners took an !important rule over every element. A radius token would let a theme change shape cleanly.
6. 06Same parts, same layout. A Kapwa contributor who reviewed the showcase found the sites rigid and alike, and modern sites such as eGovPH looked downgraded. Consistent should not mean identical.

RE:GOV now runs a design check before rebuilding. Muse Spark rates the old homepage; if it is already modern, the site keeps its brand colour, its hero and its softer shapes, and gets Kapwa’s structure, accessibility and content work underneath. Of 120 sites checked so far, 6 were upgraded this way. eGovPH scored 8.5/10:

Next, homepages will be composed by kind of site and by what each one holds, so a town, a hospital and a university stop sharing one template while keeping the same parts.

These are the patterns government sites use most that Kapwa does not have. RE:GOV already renders each one; below, each is shown live with real content from a rebuilt site, with the props a Kapwa version would need. Every field an agent might not know is optional.

heading: string
rows: {
  label?: string
  value: string
  more?: string[]
}[]

1. 01A catalogue machines can read. One JSON file listing each component, the content it is for, its props as a schema and whether it needs JavaScript. An agent can then choose components the way a developer reads the docs.
2. 02Components for government content. Office contacts, step-by-step, officials, link directories, timelines, FAQs, service pages and hotlines: the patterns above cover most of what these sites hold.
3. 03Content-shaped props. Any rows for Table, any items for List, links as well as buttons, and every non-essential field optional.
4. 04Works without JavaScript. Links instead of callbacks, <details> for disclosure, so pages survive server rendering and static hosting.
5. 05Shape and density as tokens. Corner radius and spacing scales as tokens, so a theme such as RE:GOV's editorial one needs no overrides.

RE:GOV’s twelve block types and their renderers are open source at github.com/rockyru/regov (src/pipeline/schema.ts and src/components/site/Blocks.tsx) for anyone who wants to take them further.