AI can build an app in minutes.
Then you spend a week cleaning it up.
So I built an agent that writes every screen through a design-system MCP: real components, real tokens.
3 apps: 0 design-system errors, 0 accessibility violations π§΅
#MetaAIHackathon#MetaAI#AI
AI can build an app in minutes.
Then you spend a week cleaning it up.
So I built an agent that writes every screen through a design-system MCP: real components, real tokens.
3 apps: 0 design-system errors, 0 accessibility violations π§΅
#MetaAIHackathon#MetaAI#AI
Thanks! No real screen reader pass yet, a virtual one is specced but not built.
Every route gets axe, contrast, target size, control names, heading structure, keyboard reachability, focus visibility, focus trap, tab order checks etc;
For focus visible, yes the keyboard walk caught what axe passed.
Needed a visual bug for an annotation task I am working on, so I tried grabbing one from the apps generated by the WeaveWithAI agent.
It wasn't easy.
- 4 apps, every screen
- 3 resolutions
- every menu and popup opened
- text and buttons checked for overlap
Nothing overlapping. Nothing clipped. Nothing hiding behind anything.
Found exactly one: the sidebar doesn't highlight the page you're on. The code swears it's highlighted. Screen readers agree. Your eyes don't.
Proud and slightly annoyed.
@VibTayal Accessibility, by far. In the 8 runs I still have logs for, our accessibility checks caught 69 errors. The design-system check (MCP validate) caught 15 issues in coding sessions, 6 of them hand-built copies of components the design system already has. Only 3 were tokens.
@diarm10 Every verdict is logged with its reason. Across 5 runs there were 4 refusals. The reviewer upheld 1 and overruled 2. Those 2 were the backend findings, and the reviewer was right: the fixer then built both without a backend. The last refusal came in round 3, too late to judge.
@diarm10 Nothing stops it by design yet: the same model that raised the finding judges the refusal. Two things limit it. It must accept a refusal that cites a rule the fix breaks, a conflicting finding, or a new error the fix causes. And it gets one verdict, then the round cap ends it.
@diarm10 No tiebreaker mid-run. Hard cap of 3 rounds: review, fix + re-review, final fix. The fixer can refuse a finding only by citing a rule it'd break, a conflicting finding, or a new error, and the reviewer judges that. Still open after round 3? Logged as a known issue for a person.
@oggieplenor Mostly, yes. But lookup alone didn't stop it. With the MCP right there, the agent still hand-built its own copies now and then. So the MCP also validates every file and flags a copy of anything the system already has. Lookup gives it the real pieces, validation makes it use them.
@Just_Ryun validate is the fun one: it checks a file against the design system and names the fix.
Hand-built <button> β use Button
padding: 13 β tokens.spacing["3"]
A hook runs it on every file the agent writes, so mistakes come back before the session even ends.
@Just_Ryun Neither π 7 generic tools: list/search components, get_component (props, variants, defaults), get_recipe (real usage per case), list/search tokens, and validate.
The agent picks the components and writes the code itself. The MCP is its reference before and its reviewer after.
Honest bits: the apps run on a mock backend for now, and what the final round didn't recheck is listed, not hidden.
Open source. Write your idea in a markdown file and run it:
https://t.co/lryGR1u2iC
Full run data: https://t.co/M4rZx8hAXb
What would you build first?
Every model call runs on Meta Muse.
Muse Wonder sets the direction, Muse Spark does the rest, Muse Code writes the app.
Flip one setting and the whole run moves to open-weight Muse Spark Open.
Built for @AIatMeta's Global AI Developer Hackathon with @cerebral_valley.
I have made a chrome plugin that tells which of your cards are the best cards based on average points.
Try it at https://t.co/npDHubrLSs
Uses data from... https://t.co/ItehTwG2DD