Frontier Creatives Vol. 04 · Designing with AI · October 2026
The OpenID Foundation gets a UI Factory
How we redesigned the Conformance Test Suite without touching a line of code.
Title, up while you're introduced. The clock starts on the first click.
“Writing code by hand is no longer an economically viable skill for most programmers at most companies.”
DHH · Rails World 2026
"DHH created Ruby on Rails. At Rails World this year, he said this." Read it. Beat. "Now read it again. Put 'pixels' where it says 'code'." Let it sit. Don't reassure anyone yet. Slide 19 answers it.
I love code.
My book, about clean CSS and design/dev collaboration
On stage at Schema by Figma, 2025
"That's my book, about clean CSS. This spring I redesigned a whole app, from the research to production, and wrote maybe a few lines of code. I worked like a designer with a dev team: describe, review, say no. Here's what broke." Don't stress "from the research to production". It pays off on 19.
The OpenID Foundation · since 2007
"Earlier this year I was lucky to be able to volunteer for a foundation I hold in particularly high esteem." Then: "Quick question. Who used 'Sign in with Google' this week? Or Apple?" Hands. Click.
The OpenID Foundation
You use their standards every day.
Sign in with Google You click.
who is this?
Google Is it really you? signed ID token
The app Checks the signature. You’re in. Securely.
Sign in with Google, Apple, Microsoft… It all runs on OpenID Connect, their standard.
"Then you used the OpenID Foundation's work. Look." The animation plays by itself when the slide comes up, about 4 seconds: "You click. Google checks it's really you. It sends the app a signed ID token. The app checks the signature. You're in. Securely. You never see any of it. That's OpenID Connect, their standard. And somebody has to check it's built right." Then click to the tool. Q&A: Facebook is off the screen on purpose. Facebook Login is mostly plain OAuth, not full OpenID Connect. Timing: this slide adds about 20 seconds, so every start time after it moves by about 0:20. Take the first two cut checkpoints every time.
Built by experts, for experts.
Banks and governments around the world now need it.
“They see this whole list with maybe 50 test plans… you basically have no idea which one to pick. ”
Principal engineer
"When a bank adds 'Sign in with…', this tool checks they built it right. Now banks in the UK, Brazil, Australia and more need it, each with its own rules. A principal engineer told the researchers…" Point at the quote. Read only the end: "…no idea which one to pick." The screenshot is the old Create Test page: nine dropdowns before a single field. This is the only "before" until slide 17.
The research found the problems.
Super User Studio. 10 interviews, 10 usability tests. 64 findings.
"Super User Studio ran the research: interviews and usability tests. That's design work too. 64 findings, 14 of them high." Click: the page. "I gave their report and workshop video to an agent: an AI you give a job, not a question. Here's the one that comes back at the end: choosing a test. A dropdown of fifty names that all look the same. High severity." Optional, spoken only: "One finding was only in the video: banks keep their own private wikis on how to use this tool. Shadow docs. Remember those." Don't stress "That's design work too".
Five busy Java maintainers.
About 10 seconds. "The team was five busy Java maintainers. No designer." Let the picture sit. Not a joke at their expense: this is the reality. They were busy shipping protocol work (VCI, VP, Federation), and the UI was nobody's job. The coffee mugs are the only Java joke. Click: the empty lot. PROPOSED: "My job: build a UI factory they could run while I'm away. My rule: I don't write the code. A maintainer reviews every change."
Agents copy the kitchen they walk into.
“I’m the one most afraid of introducing a regression.”
A maintainer, in a demo
April 22. Storybook, tests on the old pages, the old widgets turned into a library. Nothing redesigned yet.
"Agents copy the kitchen they walk into. So first, mise en place." The tiles drop in: Storybook and its MCP server, Playwright, ESLint, Prettier, TypeScript, lit-analyzer, axe, Vitest, Chromatic, lint:icons, Compound Engineering. "Clean components, and tests on the old pages." Click. "The maintainer who merged the first tests said it in a demo: 'I'm the one most afraid of introducing a regression.' That's who I was designing for."
Build, check, fix. Repeat.
fix Rec #17
Prompt
Checks run
a tiny program
close-md exists, x does not
The error tells the agent the fix. Again and again, until it passes.
Pass
Prompt engineering is dead.
Four clicks. "I wrote 'use the icon set' in perfect English. The agents made up their own icons anyway." Click: the check. "So I had an agent write a check: a tiny program that runs after every change." Click: the loop. "When it fails, it tells the agent the fix: 'close-md exists, x does not.' The agent fixes it, and the check runs again. Again and again, until it passes. No person in that loop." Click: the review. "Only then does a maintainer review it. That loop is what let agents take on a whole refactor, not just one button." Click. "You write error messages for people. Now write them for agents. Don't write a better prompt. Write a better error." Spare, if asked why errors beat prompts: "A prompt talks before the mistake. An error talks during it."
Tool-specific tokens, with notes.
The 2022 brand guide: Arial, and an orange that “should never cover a large area”
“--oidf-orange-pure is reserved for the logo and Certified mark only.”
"The brand guide: Arial, and an orange you must never spread over a large area. An early Claude Design turned it, loosely, into tokens. They went into the code with notes, like this one: 'orange-pure is reserved for the logo and Certified mark only.'" Click: status colours. Click: circle. "And remember this grey." Say "note", not "reason": slide 16 pays it off.
Dozens of unmonitored agents.
Spot the bug · 1 Spot the bug · 2 Spot the bug · 3 Spot the bug · 4 Spot the bug · 5
The 46 agents tick in by themselves, about 3 seconds. "Then agents repainted every component. 46 at once, most in about two minutes. Here's what they shipped when nobody was looking. Spot the bug." Click through the five bugs, about 3 seconds each: the same news many times, a badge on top of text, a URL wrapped one letter per line, a raw login ID in the menu, columns out of line. A red circle lands on the bug 2.5 seconds after each one appears. Let them call it out. "I caught every one of these by eye." Only if very late: run the montage at 2 seconds each, silent (−12 s).
“Writing code drawing pixels by hand is no longer an economically viable skill for most programmers designers at most companies.”
DHH · Rails World 2026
Takeaway: agents pushed the pixels. They didn't see what was wrong. The quote comes back untouched. "Remember DHH?" Click: "Writing code" is struck, "drawing pixels" written in. "Put 'pixels' back in." Click: "programmers" is struck, "designers" written in. "And it's not only about programmers. Agents pushed these pixels. They didn't see what was wrong. I saw it in a second, with eyes I trained doing the work by hand, for years. You may not get those years. Ask your teachers, ask your managers: how will I learn to see? Make them answer. Don't wait. Spot the bug every day, and say why." Don't stress "how will I learn to see?". Cut checkpoint: past 4:56 here, drop "Don't wait. Spot the bug every day, and say why." (−4 s).
My design tool: a screenshot, a red arrow, one sentence.
"My design tool became a screenshot, a red arrow, and one sentence. But look at my sentence." Click: the sentence alone. "'Move this thing.' A what. Not a why. Each arrow fixed one screen, once. The why stayed in my head." Don't stress "A what. Not a why." The orange isn't fixed, on purpose, so add: "And those orange buttons? White on orange fails contrast. My eyes missed that one."
A week after we merged, someone’s agent made this.
CONFORMANCE SUITE Test Plans Test Logs Tokens API Docs Plans › oidcc-basic-certification-test-plan › oidcc-login-hint
▷ Continue Plan
Module 24 of 38
oidcc-login-hint PASSED FINISHED
⊙ Test passed
ABOUT THIS TEST (always visible)
This test calls the authorization endpoint with a login_hint (provided in configuration, or buffy@ if not), which must at a minimum not result in errors. Please remove any cookies you may have received from the OpenID Provider before proceeding.
TEST STRUCTURE
Make request to authorization endpoint
✓ 6
Verify authorization endpoint response
✓ 21
Userinfo endpoint tests
✓ 2
Marcus’s change, redrawn: the “About this test” box stays on screen during a test. Styled off-system.
"In June the redesign merged. A week later, Marcus, a maintainer, asked his agent to keep the 'About this test' box on screen during a test. Great product call. His agent had never seen my design rules. It styled the box its own way. Nobody could have told it otherwise: the rules were not written anywhere it could read." [Sylvia bridge, if she spoke before: "Sylvia just told you agents walk past the gates we design. This is the day it happened to me."]
My laptop: 300+ skills for my AI. Only I had them.
I was building a UI factory for the team.
"My note, afterwards: 'The root cause is information placement, not skill.' Marcus wasn't bad at design. My why was in the wrong place. Half in a file only one brand of AI reads. Half on my laptop: 300+ skills for my AI, that only I had. The banks had shadow docs. So did I." Wait for the laugh to end. Click, then slowly: PROPOSED: "I was building a UI factory for the team. It only ran from my laptop." Pause. "Where does your why live right now? Your Figma? Your head? Your AI's memory?" Five seconds. "Leaders: how many of your factories run from one laptop?" Only if very late: drop the leaders line (−5 s).
Joseph was able to ship a design fix.
Skipped
Violet: skipped. Grey: never ran.
AGENTS.md: “skip is the SKIPPED verdict only, neutral the grey for never-run/pending/unknown”
"Remember the grey? It meant both 'skipped' and 'never ran'. In a tool that proves banks follow the rules, that's two verdicts in one colour. The ugly 2016 screen kept them apart. My redesign forgot." Click: the swatch turns violet. "Joseph, a maintainer, put it back with his own agent, and wrote the rule down." Violet is the real token in the code: --status-skipped #6A5AA8.
The team can now throw anything at their agents and great UI comes out.
The factory, re-plugged: the laptop cable cut, a new cable to AGENTS.md, two maintainers feeding it with their own agents. No clicks. "They kept going without me. Alan, another engineer, gave the error page the new look with his own agent. I wasn't involved. That was the goal. And the why? Joseph renamed the file AGENTS.md, and wrote rules I never could: the tool fakes bad signatures on purpose, 'because that is the test.' The why stayed, because they made it theirs." [Sylvia bridge, if she speaks after: "Joseph's fix stayed inside the system. Often, a fix won't. Sylvia Ding's talk is about what that does to a team, and to our job."]
September: they switched it on.
A tour of the new UI plays full screen, 72 seconds at normal speed, no sound, no clicks: the new sign-in, then guided mode ("Which ecosystem are you certifying for?", "What is your role?"), the test plans list, a test log. Talk over it. "In production since September 17. 'No idea which one to pick'? Now guided mode asks one question first. This UI was a collab with one of the maintainers, who wrote the decision tree. I prototyped three versions, picked what I liked from each. The team previewed the three and gave feedback." Beat. "Your CEO will call this more with less. It's about 100,000 lines they now look after. Better for users? No data yet. The real test is whether banks still need their private wikis. A person has to go ask." If the sign-in is on screen: "And look: still Google or GitLab only. A participant called that a showstopper for regulated banks." Move on whenever you're done; the video can keep playing behind you or stop on its last frame. Cut checkpoint: if the clock is past 8:22 here, skip the collab story and go to the next beat.
Your why finally
"We were always told to write down the why. Most of us didn't, because nobody read it. Now something does. Not always, so back it with a check. Monday: ask for your team's AGENTS.md, or open your last design. Search for 'because'. No 'because'? Probably no why. Write one. Then let the team change it, and be in the review." Click straight to 19, no pause. Cut checkpoint: past 9:07, drop "Not always, so back it with a check." (−3 s).
Design
What do people need?
Design got bigger.
AGENTS.md on gitlab.com/openid/conformance-suite
"Back to DHH. About pixels by hand, maybe he's right." On screen: the camera pulls back from the agents' factory, alone and small. Slow down: "There was a second talk inside this one." Beat. "AI let me own this app end to end." Click: the left hall rises, "What do people need?" — "The research found the problems, and someone still has to go ask." Click: the belt feeds the machine, "Agents build." — "Agents did the middle." Click: the right hall rises, "Did they get it?" — "Eyes caught the bugs. That's design, and the more your team builds, the more you need it." Beat. Click: "Design got bigger. Just not in the pixels." Stop. Click: QR. The QR points to AGENTS.md on master in gitlab.com/openid/conformance-suite. Never cut anything on this slide.
CONFORMANCE SUITETest PlansTest LogsTokensAPI Docs