从组件实值归纳语义角色,保留局部例外
本页展示随包原生输入和验收参考。目标产品运行状态:未运行。表格与图片不代表产品已经生成的结果。
input.csv / practice-data.json
本课实际输入字段
| file | background | padding | color |
|---|---|---|---|
| InfoCard.tsx | #F7F4EC | 16px | |
| AlertCard.tsx | 12px | #A74718 | |
| ActionButton.tsx | #184A45 | 16px |
归并重复实值
reference.csv:作者验收映射,不是目标API回包
| token | source | value | scope |
|---|---|---|---|
| colors.primary | ActionButton.tsx | #184A45 | |
| spacing.md | InfoCard.tsx | 16px | |
| alert padding | 12px | AlertCard only |
规则与输入文件原文
{
"inputRows": [
{
"file": "InfoCard.tsx",
"background": "#F7F4EC",
"padding": "16px"
},
{
"file": "AlertCard.tsx",
"color": "#A74718",
"padding": "12px"
},
{
"file": "ActionButton.tsx",
"background": "#184A45",
"padding": "16px"
}
],
"referenceRows": [
{
"token": "colors.primary",
"source": "ActionButton.tsx",
"value": "#184A45"
},
{
"token": "spacing.md",
"source": "InfoCard.tsx",
"value": "16px"
},
{
"token": "alert padding",
"value": "12px",
"scope": "AlertCard only"
}
],
"invalidRows": [
{
"change": "all paddings=16px",
"error": "lost alert exception"
},
{
"token": "primary",
"value": "#A74718",
"error": "wrong semantic grouping"
}
],
"notes": [
"全部输入为作者自制教学资料,不含真实客户或账号。",
"referenceRows是校验基准,不是目标模型预测或识别结果;targetProduct=not_run。"
],
"files": {
"input.json": "[\n {\n \"file\": \"InfoCard.tsx\",\n \"background\": \"#F7F4EC\",\n \"padding\": \"16px\"\n },\n {\n \"file\": \"AlertCard.tsx\",\n \"color\": \"#A74718\",\n \"padding\": \"12px\"\n },\n {\n \"file\": \"ActionButton.tsx\",\n \"background\": \"#184A45\",\n \"padding\": \"16px\"\n }\n]\n",
"reference.json": "{\n \"identity\": \"作者验收参考,非模型返回\",\n \"rows\": [\n {\n \"token\": \"colors.primary\",\n \"source\": \"ActionButton.tsx\",\n \"value\": \"#184A45\"\n },\n {\n \"token\": \"spacing.md\",\n \"source\": \"InfoCard.tsx\",\n \"value\": \"16px\"\n },\n {\n \"token\": \"alert padding\",\n \"value\": \"12px\",\n \"scope\": \"AlertCard only\"\n }\n ]\n}\n",
"invalid.json": "{\n \"identity\": \"作者构造负例,非实际错误回包\",\n \"rows\": [\n {\n \"change\": \"all paddings=16px\",\n \"error\": \"lost alert exception\"\n },\n {\n \"token\": \"primary\",\n \"value\": \"#A74718\",\n \"error\": \"wrong semantic grouping\"\n }\n ]\n}\n",
"case.md": "# Stitch代码提取DESIGN.md:从组件实值归纳语义角色,保留局部例外\n\nStitch代码提取DESIGN.md用已有的三种卡片反推设计规范。重点是把重复实值与业务例外分开,输出规范后仍能解释每个token来自哪段代码。\n\n## 列出采样组件\n\n准备InfoCard、AlertCard与ActionButton的源码,各保留颜色和间距实值。\n\n先列出文件路径,避免代理只读根样式漏掉组件覆盖。\n\n## 运行官方提取工作流\n\n按extract-design-md读取组件、主题配置和样式文件,再形成.stitch/DESIGN.md。\n\n这是分析源码,不需要先重新生成整个应用。\n\n## 归并重复实值\n\n把InfoCard与按钮共用的16px归到常规间距;primary=#184A45仅溯源ActionButton,InfoCard的#F7F4EC归为surface,记录各自使用位置。\n\nAlertCard的橙色是业务警示,不按出现次数强行归入主色。\n\n## 保留组件例外\n\n为AlertCard的12px间距写明适用范围,常规卡片仍为16px。\n\n不要为追求整齐把所有组件padding一律改成同一值。\n\n## 校验规范结构\n\n使用当前DESIGN.md schema校验颜色、尺寸和引用。\n\nprose里的例外说明不等于已生成可消费token,必要时补对应条目。\n\n## 做反向追溯\n\n随机选一个token,从规范找回原文件和属性位置。\n\n找不到来源的值先标推断,不写成源代码本来如此。\n\n## 交付来源矩阵\n\n保存规范、组件路径和例外清单,交给下一个设计任务。\n\n源码未修改,不把提取报告称作组件迁移完成。\n\n身份:输入与参考为作者材料;localCli有实测记录时仅证明对应CLI运行,目标云端与模型推理未执行。\n",
"InfoCard.tsx": "export function InfoCard(){return <article style={{background:\"#F7F4EC\",padding:\"16px\"}}>活动说明</article>}\n",
"AlertCard.tsx": "export function AlertCard(){return <aside style={{color:\"#A74718\",padding:\"12px\"}}>请提前24小时取消</aside>}\n",
"ActionButton.tsx": "export function ActionButton(){return <button style={{background:\"#184A45\",padding:\"16px\"}}>确认预约</button>}\n"
}
}应当保留的约束
| token | source | value | scope |
|---|---|---|---|
| colors.primary | ActionButton.tsx | #184A45 | |
| spacing.md | InfoCard.tsx | 16px | |
| alert padding | 12px | AlertCard only |
故意构造的错误样例
| change | error | token | value |
|---|---|---|---|
| all paddings=16px | lost alert exception | ||
| wrong semantic grouping | primary | #A74718 |
先保存真实产品输出,再逐项对照。actualOutput / actualResult 在未执行时保持 not_run,不能把这里的期望值复制成已测结果。