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).
설치하기 전에 에이전트에게 전달되는 지시 내용을 확인할 수 있습니다.
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.
한국어 요약은 준비 중입니다. 영어 요약을 표시하고 있습니다.