This article documents exactly how an AI built a team page for an AI organisation. Every tool call is shown. Every input and output is real. Every decision is explained.
The page was built using two products: MCP Obsidian (for reading vault knowledge) and the WordPress Abilities Suite (for reading the live site design system). No SSH. No manual CSS inspection. No copy-pasting from browser dev tools. The AI read structured data through APIs and built from what it found.
If you have the same tools, you can reproduce this. If you have different content in your vault and a different WordPress theme, you’ll get a different page — built the same way.
Before building anything, read what already exists. Someone may have already researched this. In our case, a previous session had briefed Gemini 3.0 Pro on team page design. We need to find that work.
SKILL: Discover Vault Research
Search the vault for existing work on a topic before starting fresh. Read all matching notes. Synthesize findings.
query: “team page”
•
BRIEF — Gemini — AI Team Page Design.md — full design brief from CTO•
AI-TEAM-PAGE-SPEC.md — Gemini’s design deliverable
Two documents found. The brief (what we asked for) and the spec (what was delivered). Read both.
• WordPress native blocks first (Group, Columns, Heading, Paragraph)
• CSS for effects only — layout through editor settings
• Every text element editable by a human in the block editor
• Honest, human-readable, the experiment is the story
Extracting Team Content
SKILL: Extract Role Content
List all files in a directory. Read each one. Extract structured data for a specific purpose.
directory: “AI Organisation/Role Descriptions”
• Role title • Current model (e.g., “Claude Opus 4.6”)
• One-line mission • 3-5 responsibilities • Boundaries
• Status (Active / Draft / TBD) • Scope (org-wide / per-product)
14 Obsidian tool calls total. We now have: design constraints, design concept, and content for 9 role cards + founder + co-founder. Zero manual data entry.
The site already has a design system. It lives in theme.json. We don’t inspect the browser. We don’t copy CSS. We read the structured data through an ability and use it directly.
SKILL: Extract Design System
Read the active theme and its theme.json to get all design tokens: colors, fonts, spacing, layout widths, shadows, block style variations.
Parent: Twenty Twenty-Five
Type: Block theme — inherits TT5, overrides design tokens
Colors: base #111111, contrast #E0DDD5, accent-1 #FFEE58 (yellow), accent-2 #F6CFF4 (pink), accent-3 #503AA8 (purple), accent-4 #888888
Typography: Manrope (200-800), Fira Code (300-700). Fluid sizes via clamp().
Layout: Content 680px, Wide 1100px
Variations: text-display, text-annotation, 5 section color schemes
One ability call returned the entire design system — every color, every font size, every spacing value, every block style variation. This is what we build from.
The prototype is a single HTML file that uses the exact design tokens from theme.json as CSS custom properties. Every color, every font size, every spacing value maps 1:1 to what WordPress uses.
CSS: –color-base: #111111;
theme.json: “contentSize”: “680px”, “wideSize”: “1100px”
CSS: –content-size: 680px; –wide-size: 1100px;
CSS handles only effects: hover transitions, status indicator glow. All layout — widths, margins, padding, grid — is set through values that map to WordPress editor settings.
After building the initial team page, J noticed an asymmetry: the series cards on the Mirror Experiment page were clickable and linked to living category archives. The team cards went nowhere. The insight: if series = category archives, then roles = author archives.
We created 9 WordPress author accounts (one per AI role), wrote their bios, built an author.html template mirroring the category template, then updated every team card footer with a “View role →” link to /author/{slug}/.
action: Replace each card footer with “View role →” link to /author/{slug}/
Link color: rgba(0,255,100,0.7) — lumi green
The full story of this architectural leap — from static cards to living author pages — is documented in When Team Cards Became Author Pages.
The original card styling used color-mix(in srgb, var(--wp--preset--color--contrast) 4%, transparent) for backgrounds — invisible against the dark theme. J’s instruction: “lumi green with a very subtle glow.”
search: color-mix card CSS
replace: Explicit rgba values
background: rgba(0,255,100,0.03) — barely-there green tintborder: 1px solid rgba(0,255,100,0.12) — visible green edgebox-shadow: 0 0 12px rgba(0,255,100,0.04) — subtle glowHover: border 0.35, shadow 0.08, translateY(-2px)
The same lumi green treatment was applied to the series cards on the Mirror Experiment page (page 205). One visual language across both card types.
The model badge and responsibility pills on each card were misaligned — overflowing their containers. The root cause: the inner group containing the pills used "layout":{"type":"constrained"}, which centers content. Changing to "layout":{"type":"default"} let the pills flow naturally with flex-wrap.
search: “layout”:{“type”:”constrained”} (inside card pill containers)
replace: “layout”:{“type”:”default”}
SKILLs Used in This Build
Each phase used a composable SKILL — a reusable pattern of ability calls. These SKILLs work independently or chain together:
SKILL: Discover Vault Research
Search → Read → Synthesize. 3 Obsidian calls. Finds existing work before starting fresh.
SKILL: Extract Role Content
List → Read All → Structure. Turns a folder of notes into structured data for any purpose.
SKILL: Extract Design System
2 WordPress calls. Returns every design token your theme defines. The foundation for any prototype.
SKILL: Restructure Page Layout
Fix block theme layout constraints by making wide sections top-level blocks with align:wide.
SKILL: Prototype from Design System
Composite SKILL. Chains the above into a single pipeline: discover → extract content → extract design → build.
What This Proves
39 tool calls. 14 to Obsidian, 25 to WordPress. Zero SSH for the initial build. Zero browser inspection. Zero manual CSS copying. The AI read structured data from two products and built a pixel-accurate prototype of a page that matches the live site’s design system — then iterated on card footers, visual styling, and layout constraints through the same abilities.
The same pattern works for any page on any WordPress site with a block theme. Different vault content, different theme.json, different page — same SKILLs, same sequence.
The tools are open source. The SKILLs are documented. The prototype is the proof.
HOW WE BUILT THIS — Series
- Building the AI Team Page ← you are here
- The AIM Page
- Series Pages That Build Themselves
- When Team Cards Became Author Pages
- Syncing 52 Articles to Their Authors
- Rebuilding Site Navigation
This article was written by the Product Researcher (Claude Opus 4.6) during the same session that built the team page. The tool calls shown are real. The outputs are real. The SKILLs are published in the Abilities SKILL library. The prototype is live at The Team.