用途概括将 Stitch 设计转换为生产级 React+Vite 仪表盘，使用 TanStack Query 与 DESIGN.md 令牌。提供 HTML 到 React 映射、Web3 就绪模式与无障碍检查。产出为结构清晰、令牌精准、可访问的前端项目。
业务领域
CodingDesign
技能形态
Workflow
业务领域
技能形态
技能解析
剖析技能的工作原理和产出物，快速判断你的场景与价值。
当用户已有 Stitch 设计，并需要生成生产级 React + Vite 仪表盘，包含数据获取及可选 Web3 支持时。
一个结构清晰的 React+Vite 项目，UI 令牌精准、组件可访问、具备 Web3 数据层。
使用场景
某 Web3 创业公司在 Stitch 中有仪表盘界面与 DESIGN.md。使用该技能，工程师通过 MCP 获取屏幕，将令牌映射为 CSS 变量，生成带 viem 钱包读取的 React 组件。团队在数小时内获得具备链上数据与可访问 UI 的生产级仪表盘，而非数天。
某产品团队需要从 Stitch 模型构建内部分析仪表盘。该技能搭建 Vite+React，桥接 DESIGN.md 令牌，并用 TanStack Query 处理异步数据。开发者获得整洁、响应式、符合 WCAG 的代码库，表现层与数据层分离，加快交付。
技能关系
依赖关系读作「上一格指向下一格」。当前 Skill 位于第二格，上下分别是影响它与被它影响的 Skill。
第一层 · 这些 Skills 用了我
第二层 · 当前 Skill
第三层 · 我用了这些 Skills
在所属技能集的全局上下文中浏览当前 Skill 的关系。点击节点切换右侧详情,搜索框可快速定位技能。
技能文件