← Neumo Design System docs

Demos — the design system in real apps

The same interface — the UnclaimedProperty.com waitlist page — rebuilt three ways, so you can see the Neumo design system used the way each stack expects. One design, one set of tokens, three idiomatic implementations.

Each demo has a step-by-step build write-up: the AI prompts, where the neumo MCP server and the Figma toolkit get used, the code, and the Playwright snapshots used to iterate toward pixel-parity with the Figma design.

Before you build: the demos read the design over a live Figma↔code link. Set it up once — Connect Figma to code.

Pick a demo

⚛︎ React — @kofile/gds-react

Uses the React component bundle — real React components (Input, Select, Button, …) styled via CSS Modules. The build write-up shows the pixel-match loop and how the MCP server's suggest-token turned hand-picked hexes into real design tokens.

→ ▶ View the live demo · Read the build log · code: examples/react-unclaimed-property

⬡ .NET (ASP.NET Core) — @kofile/gds-wc

Uses the framework-agnostic web components as drop-in HTML — tokens + custom elements + a mock REST API, with CDN and self-hosted modes and a Figma↔Playwright parity harness.

→ code: examples/dotnet-unclaimed-property (write-up coming)

▲ Vue — @kofile/gds-wc

The web-component consumption path in Vue 3 (<script setup> + TypeScript): isCustomElement config, binding array props with the .prop modifier (:options.prop), custom events (@neumo-button-click), and reading values off the elements. The build write-up covers the Vue integration plus the MCP color/spacing/typography alignment passes.

→ ▶ View the live demo · Read the build log · code: examples/vue-unclaimed-property

Bonus — audit an app for accessibility

Beyond building, the same MCP server audits an existing app. The Accessibility audit walk-through runs a WCAG 2.2 AA pass on the React demo using audit-a11y (structural) + check-contrast (color) — the exact prompts, which MCP tools are called, the real contrast failure it caught, the fix, and what to still verify live.

Why three?

New to the system? Start with the onboarding guide, and note that installing the (private) packages needs an npm access token.