Components / AIWorkflows
<AIWorkflows />
Design systems for the agentic era: AI agents as first-class consumers.
prompt “Create a product card with price & rating.”
<RgProductCard>
<RgProductImage :src="img" :alt="name" />
<RgRating :value="4" :max="5" :label="`${name}: 4 out of 5`" />
<RgPrice :amount="1290" currency="EUR" />
<RgButton variant="primary">Add to cart</RgButton>
</RgProductCard>✓ real components · a11y built in · ships without edits
AI assistants generate generic code because proprietary design systems don’t exist in their training data. At Carrefour, Romain led the development of an MCP (Model Context Protocol) server living inside the design system monorepo: it reads the real component code, Storybook stories and playground examples, so assistants generate production-ready Marcel code — correct components, BEM conventions, WCAG rules built in.
Now at Atos in the Samourai enabling team, he helps product squads adopt agentic AI: auditing AI maturity, designing skills, MCP servers and playbooks, coaching teams on agent workflows, and doing R&D on design systems where agents are the primary consumers. This site practices what it preaches: see the "For AI agents" page — it exposes a real MCP endpoint.
Props
| Prop | Type | Value | Description |
|---|---|---|---|
protocol | MCP | streamable-http & stdio | Built MCP servers for Marcel (Carrefour) and for this very website. |
tooling | string[] | ['claude-code','opencode','skills','hooks'] | Daily driver: agentic CLIs with custom skills and MCP servers. |
thesis | string | agent-first design systems | If agents write most UI code, the design system must be documented for agents. |
guardrails | string[] | ['a11y-rules','bem','real-components-only'] | The point is not speed — it’s speed without losing the craft. |
Do
- Feed agents your real component code — never a stale doc site.
- Encode conventions (a11y, naming, patterns) as rules the agent can’t skip.
- Measure output quality: does the generated code pass review without edits?
Don’t
- Let assistants ship generic Tailwind soup into a branded product.
- Confuse "AI adoption" with licenses purchased.
- Automate a workflow you haven’t understood manually first.
AI guardrails include WCAG rules, so generated code is accessible by default.
Agent-generated UI is reviewed with the same accessibility bar as human code.