stitch::react-components · 把设计页面转成 React 组件

作者提供的示例，实际效果取决于你的输入和使用工具。

输入

编辑构造材料（未运行）：
设计给出“本周订单”标签和数值 128；同一页面需重复这种卡片。要求用 React、只读 props 和项目已有 stat-card 类。

输出

编辑示例 · 未运行

type StatCardProps = Readonly<{ label: string; value: number }>;

export function StatCard({ label, value }: StatCardProps) {
  return (
    <section className="stat-card" aria-label={label}>
      <h2>{label}</h2>
      <strong>{value}</strong>
    </section>
  );
}

// 使用处
<StatCard label="本周订单" value={128} />;

读取 Stitch 设计与资源，生成或同步 React/Vite 组件。

具体任务

把设计中的统计卡片拆成 React 组件：读取 Stitch 设计与资源，生成或同步 React/Vite 组件。

必需材料

Stitch project/screen ID 或获准同步的设计资产

现有 React/Vite 项目和样式约定

可选材料

已有 .stitch 目录

需要保留的交互

使用门槛

会运行 React/TypeScript 项目，已连接 Stitch MCP。

这个 Skill 额外提供的方法

按设计下载、样式提取、组件拆分、逻辑隔离组织实现，复用只读 props 并保留同步元数据。

编辑示例（未运行）

把设计中的统计卡片拆成 React 组件

任务：把设计中的统计卡片拆成 React 组件

输入：
编辑构造材料（未运行）：
设计给出“本周订单”标签和数值 128；同一页面需重复这种卡片。要求用 React、只读 props 和项目已有 stat-card 类。

结果片段：
```tsx
type StatCardProps = Readonly<{ label: string; value: number }>;

export function StatCard({ label, value }: StatCardProps) {
  return (
    <section className="stat-card" aria-label={label}>
      <h2>{label}</h2>
      <strong>{value}</strong>
    </section>
  );
}

// 使用处
<StatCard label="本周订单" value={128} />;
```

这是依据固定入口方法撰写的编辑示例，没有运行上游 Skill 或访问真实账号。按设计下载、样式提取、组件拆分、逻辑隔离组织实现，复用只读 props 并保留同步元数据。

首次任务

请使用已安装的 stitch::react-components Skill。
任务：把设计中的统计卡片拆成 React 组件。

我的必需材料：
- Stitch project/screen ID 或获准同步的设计资产：[粘贴我的实际材料或路径；缺少时写明]
- 现有 React/Vite 项目和样式约定：[粘贴我的实际材料或路径；缺少时写明]

可选补充：
- 已有 .stitch 目录：[可选，未提供时不要假定存在]
- 需要保留的交互：[可选，未提供时不要假定存在]

请先确认材料是否足够，只处理我提供的范围。先核对下载截图与当次设计令牌；已有设计文件应确认复用或刷新。代码生成不等于视觉验证已完成。交付可直接审阅的代码或查询片段，明确尚未执行或验证的部分。不要代入页面例子的虚构数据。
验收：
1. 下载截图与目标 screen 一致。
2. 当前项目 style-guide 与设计颜色/字体一致。
3. 组件通过类型检查并在目标视口对照设计。

验收方法

下载截图与目标 screen 一致。

当前项目 style-guide 与设计颜色/字体一致。

组件通过类型检查并在目标视口对照设计。

依赖与准备

需要完整 Skill 目录，保留 scripts/fetch-stitch.sh、resources/style-guide.json、resources/component-template.tsx、resources/architecture-checklist.md 等引用。需要 Stitch MCP、React/Vite/TypeScript、fetch-stitch.sh、组件模板和验证脚本；安装工具应固定版本，参考里的 HTTP 版权链接与业务网络访问分开处理。

使用边界

先核对下载截图与当次设计令牌；已有设计文件应确认复用或刷新。代码生成不等于视觉验证已完成。

需要 Stitch MCP 与设计访问权限；源流程将验证执行设为需确认步骤。

页面中的例子为编辑撰写，未运行上游 Skill；不代表平台兼容认证或生产实测。

排错

组件看起来像旧项目：检查 style-guide.json 是否从当前 HTML 重新提取。

下载链接工具无法获取：按源 fetch-stitch.sh 路径核查来源与下载结果，不跳过截图确认。

固定来源

https://github.com/google-labs-code/stitch-skills/blob/0337446dadde6f8c94210444e2aa9d546126480f/plugins/stitch-build/skills/react-components/SKILL.md

许可

Apache-2.0。许可原文：https://github.com/google-labs-code/stitch-skills/blob/0337446dadde6f8c94210444e2aa9d546126480f/LICENSE

仓库热度

google-labs-code/stitch-skills 仓库 8,400 Stars（2026-09-30 核验）；这是父仓库指标，不是单个 Skill 的评分。

先看看示例

输入

输出

方法说明