Turn Stitch designs into React and Vite dashboards with reusable components and asynchronous data fetching. It applies shared design settings from DESIGN.md, includes accessibility checks, and supports optional blockchain data reads.
中文简介正在准备中。当前显示英语简介。
Convert Stitch designs into production React + Vite dashboards with TanStack Query, accessible tokens from DESIGN.md, and Web3-ready patterns (ethers/viem).
安装前可以查看交给 AI 代理的指令内容。
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.
DESIGN.md (see the design-md skill) for token fidelitynpm 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.
还没有评价。欢迎分享你的使用感受。
无需登录即可发表。欢迎分享使用感受、提问，或说明在哪些环境下无法运行。
还没有评论。来写第一条吧。
Analyze existing Stitch screens and document their colors, typography, components, and layout in DESIGN.md. The resulting design reference combines plain visual descriptions with precise color values to guide requests for new screens.
中文简介正在准备中。当前显示英语简介。
Turn a rough interface idea into a structured prompt for Stitch, with clear page sections, colors, and component details. When available, existing design rules are included to guide consistent screens or focused edits.
中文简介正在准备中。当前显示英语简介。
Create walkthrough videos from Stitch app screens using Remotion. Arrange screenshots in sequence, add fades, slides, zoom effects, and explanatory text, then preview the timing and render a video such as an MP4.
中文简介正在准备中。当前显示英语简介。
Find, install, and customize shadcn/ui components for React applications. The skill guides project setup, theme changes, forms, dialogs, and dashboard layouts, with checks for keyboard access, screen reader support, and responsive behavior.
中文简介正在准备中。当前显示英语简介。
Turn site requirements or existing content into a SITE.md project guide for the Stitch Build Loop. It records the site's purpose, visual direction, navigation, file structure, and prioritized tasks to guide successive development rounds.
中文简介正在准备中。当前显示英语简介。
Build a website one page at a time with Stitch. Each round reads a task file, generates and integrates a page, updates the site plan, and leaves instructions for the next round.
中文简介正在准备中。当前显示英语简介。