展开本页目录
开始前准备什么
- 本地练习资料可免费编辑与检查;执行Stitch需要可访问账号和已配置的官方MCP或SDK,云端额度/计划以账户页面为准。
- 在隔离练习项目操作,保留projectId、screenId和版本;本稿未调用目标云端,不能据此声称生成完成。
- 校验设计文件
- 核对目标项目
- 上传规范文件
- 创建设计系统资产
- 查回资产身份
- 检查新页面消费
- 保存两阶段证据
1. 校验设计文件
用官方alpha schema准备主色、排版和组件规范,记录摘要。
先在本地lint,不把无效规范上传后交给云端猜测。
2. 核对目标项目
查看projectId和项目现有设计系统清单。
已有同用途系统时先确定更新对象,不连续创建同名资产。
3. 上传规范文件
按官方upload-to-stitch流程上传DESIGN.md并保存返回。
小文件可按当前工具schema使用upload_design_md,较大文件读取官方脚本流程。
官方界面与功能位置
以下为官方文档配图,具体版本与账号入口以当前产品为准。本课练习输入与验收对照见相邻步骤。
4. 创建设计系统资产
将上传返回的selectedScreenInstance交给create_design_system_from_design_md。
上传成功不代替这一步,失败时保留文件与错误供重试判断。
5. 查回资产身份
读取设计系统清单,记录assets/{assetId}中的实际assetId。
文件screen身份和设计资产身份分开,不互相替代。
6. 检查新页面消费
在隔离项目生成一张简单卡片或选择目标页面应用规范。
比较实际色值和字体,规范存在并不保证每个像素都已遵守。
7. 保存两阶段证据
交付本地规范、上传回执、设计系统回执和消费页面。
尚未执行的云端步骤标not_run,避免只交作者预览当官方结果。
下载本课材料并开始操作
练习包包含本课的具体输入、可编辑数据、正反样例与七步说明。index.html 可离线查看原件和验收参考,actual-results.csv 用于记录你实际操作后的结果。
怎样确认已经完成
- 上传回执与设计系统回执两项分开。
- 设计资产ID来源于实际list结果。
- 消费页面至少核对主色/正文/按钮三处。
常见问题
DESIGN.md拖进去后就建好设计系统了吗?
先验证 DESIGN.md 与目标项目,按官方流程上传并保存真实返回,再用对应 screen instance 创建设计系统资产。分别回读两阶段产物;文件出现在画布不代表已有页面已受规范控制。
文件不大,能不能直接用工具上传?
官方说明小于约5KB的文件可以按工具schema使用upload_design_md。仍需随后创建设计系统,并保留真实回执;不要绕过schema自己拼未知字段。




