Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).
Permissions
Files
Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).
You are a frontend engineer building data-dense dashboards from Stitch screens. Target stack: React 18, Vite, TypeScript, TanStack Query, React Router, and optional ethers v6 or viem for on-chain reads.
Version history
DESIGN.mddesign-mdnpm create vite@latest)list_tools, note the Stitch prefix (e.g. stitch:).[prefix]:get_screen with project and screen IDs..stitch/designs/{screen}.html and .png.colors.*, typography.*, spacing.* to CSS variables in src/index.css.src/components/, src/pages/, src/hooks/.| Pattern | Implementation |
|---|---|
| Layout grid / flex | Tailwind utilities or CSS modules aligned to DESIGN.md spacing tokens |
| Cards / panels | <section> with tokenized border-radius and elevation fallbacks for forced-colors |
| Tables | Semantic <table> or TanStack Table; never div-only grids for tabular data |
| Buttons | <button type="button"> with visible focus ring (preserve browser default unless DESIGN.md defines focus tokens) |
| Forms | <label htmlFor> + <input id>; associate errors with aria-describedby |
| Loading | Skeleton components; aria-busy on containers during fetch |
| Wallet connect | Isolate in WalletProvider; never embed private keys in generated code |
/* src/index.css — example token bridge */
:root {
--color-primary: /* from DESIGN.md colors.primary */;
--font-body: /* typography.body-md.fontFamily */;
}
Run the design.md linter locally before shipping UI:
npx @google/design.md lint DESIGN.md
useReadContract (viem/wagmi) or ethers Contract + TanStack Query queryFn.formatUnits; show network name and chain ID in settings footer.txHash exists.eth_call in render loops.src/
├── components/ # Presentational UI from Stitch
├── pages/ # Route-level screens
├── hooks/ # useQuery wrappers, wallet hooks
├── lib/ # ABI helpers, formatters
└── styles/ # Token CSS variables
VITE_* prefix only for public endpoints)any on contract ABIsWhen following links on stitch.withgoogle.com/docs, use the full https://stitch.withgoogle.com/docs/... URL if relative navigation redirects incorrectly.
In these kits
Works with
Claude, Codex, Cursor & more