Real build artifact — not a mockup

A real output — D365 Vendor Self-Service Portal

Below is one build, end to end: the plain-English spec it was generated from, the file tree it produced, one of its components in full, and the scorecard the compiler emitted before signing off. Nothing on this page is hand-edited.

Input — plain English

Build a vendor self-service portal for Microsoft Dynamics 365.

Vendors sign in, see a dashboard with KPI cards and recent activity, manage
their purchase orders, invoices, payments, disputes, audit log, notifications,
and vendor profile. Use React, TypeScript, and Tailwind. Mock data is fine
for the first build — the data layer abstracts behind a service module so
the live D365 API can drop in later.

Quality bar: full type coverage, semantic HTML, accessibility-audited,
loading/empty/error states for every async surface, zero TypeScript errors.
76
Project files
src/ + config + tooling
62
Files in src/
shown literally below
51
.tsx components
every page + component
0
Hand-edits
what the compiler emitted

Output — src/ tree (literal, all 62 files)

src/
├── App.tsx
├── components/
│   ├── DataTable.tsx
│   ├── EmptyState.tsx
│   ├── ErrorState.tsx
│   ├── FilterBar.tsx
│   ├── layout/
│   │   ├── PageHeader.tsx
│   │   ├── PortalLayout.tsx
│   │   └── Sidebar.tsx
│   ├── LoadingState.tsx
│   ├── RecentActivity.tsx
│   ├── Topbar.tsx
│   └── ui/
│       ├── KpiCards.tsx
│       └── StatusBadge.tsx
├── context/
│   └── AuthContext.tsx
├── data/
│   ├── mockOrders.ts
│   └── mockUsers.ts
├── features/
│   ├── audit-log/
│   │   ├── AuditLogContainer.tsx
│   │   └── AuditLogPage.tsx
│   ├── auth/
│   │   ├── LoginContainer.tsx
│   │   └── LoginPage.tsx
│   ├── commerce/
│   │   ├── PurchaseOrdersContainer.tsx
│   │   ├── PurchaseOrdersDetailContainer.tsx
│   │   ├── PurchaseOrdersDetailPage.tsx
│   │   └── PurchaseOrdersPage.tsx
│   ├── dashboard/
│   │   ├── DashboardContainer.tsx
│   │   └── DashboardPage.tsx
│   ├── disputes/
│   │   ├── CreateDisputesContainer.tsx
│   │   ├── CreateDisputesPage.tsx
│   │   ├── DisputesContainer.tsx
│   │   └── DisputesPage.tsx
│   ├── invoices/
│   │   ├── InvoicesContainer.tsx
│   │   ├── InvoicesDetailContainer.tsx
│   │   ├── InvoicesDetailPage.tsx
│   │   └── InvoicesPage.tsx
│   ├── notifications/
│   │   ├── NotificationsContainer.tsx
│   │   └── NotificationsPage.tsx
│   ├── payments/
│   │   ├── PaymentsContainer.tsx
│   │   └── PaymentsPage.tsx
│   └── vendor-profile/
│       ├── VendorProfileContainer.tsx
│       └── VendorProfilePage.tsx
├── index.css
├── lib/
│   ├── queryClient.ts
│   └── utils.ts
├── main.tsx
├── pages/
│   ├── AuditLog.tsx
│   ├── CreateDisputes.tsx
│   ├── Disputes.tsx
│   ├── Home.tsx
│   ├── Invoices.tsx
│   ├── InvoicesDetail.tsx
│   ├── Login.tsx
│   ├── Notifications.tsx
│   ├── Payments.tsx
│   ├── PurchaseOrders.tsx
│   ├── PurchaseOrdersDetail.tsx
│   └── VendorProfile.tsx
├── services/
│   ├── api.ts
│   ├── auth.ts
│   └── notifications.ts
└── types/
    ├── api.ts
    ├── commerce.ts
    └── index.ts

Each feature folder splits Container (data + state) from Page (typed presentation). Same pattern, every feature, no exceptions — that consistency is the compiler, not a style guide.

Output — src/features/dashboard/DashboardPage.tsx

DashboardPage.tsx · 42 lines
import React from 'react';
import { cn } from '@/lib/utils';

import PageHeader from '@/components/layout/PageHeader';
import KpiCards from '@/components/ui/KpiCards';
import RecentActivity from '@/components/RecentActivity';

interface DashboardPageProps {
  className?: string;
  children?: React.ReactNode;
}

/**
 * Generated DashboardPage component
 * @element main
 * @children PageHeader, KpiCards, RecentActivity
 */
export const DashboardPage: React.FC<DashboardPageProps> = ({
  className,
  children,
}: DashboardPageProps) => {
  return (
    <main
      className={cn(
        "flex flex-col w-full gap-8 flex-1",
        className
      )}
      data-testid="dashboardpage"
      aria-label="dashboardpage"
    >
      {children ?? (
        <>
          <PageHeader />
          <KpiCards />
          <RecentActivity />
        </>
      )}
    </main>
  );
};

export default DashboardPage;

Notice what's not here: no 500-line monolith, no inline data fetching, no untyped props, no missing a11y attributes. The compiler favors small composed components over clever ones — that's the scoring loop pushing back during generation.

Compiler scorecard — emitted before sign-off

Quality score
93 / 100
Composite of type coverage, a11y audit, semantic HTML, lint, and contract coverage.
TypeScript errors
0
Strict mode, no `any` escapes, no `@ts-ignore` in committed output.
Files generated
76
51 .tsx components and pages, 11 .ts modules, plus config and types.
CI readiness
Ready
`npm run check` (typecheck + lint) passes on first commit. Vitest configured.
Accessibility
Audited
Every interactive surface has aria labels, data-testid, and semantic landmarks.
State coverage
Complete
Loading, empty, and error states wired for every async data surface.

Want one of these for your project?

Bring a plain-English spec. We'll walk through the compiler, the scoring loop, and what your first build artifact would look like.

Prefer to watch first?

The Loom recording of this exact project being generated from the plain-English spec above.