挑一个页面，下载一张灰色底稿，在 Procreate 上想画哪儿画哪儿。 画过的地方自动换成你的笔迹，没画的保持原样。
彩色方框是可以被替换的地方。不用现在选 —— 你在底稿上画到哪里，哪里才会换。
这就是页面本来的样子，淡成灰色。导进 Procreate，在它上面画。
把 PSD 拖进作品库。别用画布里的 Insert a file，那样会把分层压平。
锁住灰色的 _GUIDE 层，在上面新建图层随便画。用纯黑、透明底。
先隐藏 _GUIDE 和背景层，再导出 PSD 或 PNG。
PSD、PNG、一堆 PNG、整个 zip 都行。
一张张的素材没有页面坐标，得告诉它放哪儿。
下次让 AI 按元素 ID 命名文件（比如 icn-01.png）就能自动对上。
先挑画布，再往里加组件。顶部和底部会自动吸附，弹窗、抽屉这类浮层会叠在页面上。
丢几张喜欢的参考图进来，提取出配色、字号层级、间距节奏和图标风格， 导出成可以直接用的 tokens。
底稿里只有两层：_GUIDE 和一张空图层。
图层随便加，回收时会自动合并。
_GUIDE 就导出时的保护。下面这些是工具里每个默认值的出处。日常用不到，出问题时查。
画布有两个独立上限：总像素数与最长边。最长边现役机型基本都是 16,384 px（iPad 第 5 代是 8,192）；总像素按机型分档：
图层上限由 iPad 的 RAM 和画布像素共同决定，硬顶 999。官方只给计算器不给公式，但公开数据点高度一致：
反推出的经验式：图层数 ≈ 110 × RAM(GB) ÷ 画布兆像素，上限 999。
四个数据点代回去是 109 / 113 / 103 / 115 / 117。
底稿只占两层，剩下的全是你的。
Procreate 新建画布默认 Display P3，色域比 sRGB 宽约 25%。在 P3 下画的东西导出直接上网页， 浏览器按 sRGB 解读 → 整体偏色。
建画布时把 Color Profile 选成 sRGB IEC61966-2.1。
或者照这套流程的默认来：只用纯黑 + 透明底，颜色交给 CSS 变量，色域问题从根上消失。
可导入：.procreate / PSD / JPEG / PNG / TIFF / GIF。HTML 不在其中，这就是为什么要先编译成底稿。
Actions → Add → Insert a file 导入 PSD 会被压平成一张图，
灰底图和你画的就分不开了。必须从作品库（Gallery）导入。这套流程靠笔迹的位置认元素，不靠图层名或序号，所以这三条都能用：
_ 开头的层会被自动跳过。_GUIDE。工具有自动减底图的保护，
但减法在笔触和底图重叠处会吃掉一点浓度，隐藏掉最干净。另外 Procreate 是纯栅格、没有矢量导出，所以会伸缩的元素靠 CSS border-image 九宫格，
分隔线靠 repeat-x 平铺。