设计稿转看板先核数据的Skill

将Stitch设计稿转换为React + Vite数据密集型仪表板。

react-vite-dashboard 是把 Stitch 设计转成 React、Vite 数据看板的 Skill。它读取屏幕素材和项目 DESIGN.md,将样式令牌接到组件,再单独安排异步数据。

令牌是颜色、字体、间距等可复用设计值,不能只从截图猜。表格用语义表格,表单有标签,按钮留焦点,加载状态也要让使用辅助工具的人知道。

主文还给可选链上读取模式,钱包连接与展示组件分开,金额按单位格式化。前端环境变量会进入客户端,VITE 前缀不把秘密变安全;这里只应用公开端点,不放私钥。

交付前查窄屏、宽屏、键盘顺序与真实数据。设计文档检查器通过不等于整个应用已达到 WCAG 2.2 AA;本文未连接 Stitch 或生成代码,主文 React 18 等栈约定还需核项目版本。

分类:编程开发

来源仓库:google-labs-code/stitch-skills

适合用来做什么

  • 请将 Stitch 设计转换为 React + Vite 仪表板。
  • 如何在 React Vite 仪表板中集成 TanStack Query?

安装 react-vite-dashboard

npx skills add https://www.iskills.cc/skills/google-labs-code/stitch-skills/react-vite-dashboard/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 react-vite-dashboard 的用途与原始说明

浏览全部 Skill 指南