草，刚跟外包团队撕完逼回来，血压还没降下去。我特么花钱买了个“高端设计稿”，交付的切片包一打开，我差点把电脑砸了——所有图标全是位图，按钮状态没切，连个标注都没有，就一个PSD里十几个文件夹乱糟糟地堆着，这玩意儿给前端，他不用刀砍我已经是兄弟情深了。
真的，兄弟们，“切图”这个事，早就不是从PS里用切片工具划拉几下导出个HTML就完事的年代了，那都是十几年前的老黄历了。现在你那么干，做出来的站根本没法维护，一改需求全完蛋，加载慢得像回到拨号上网时代。我上个大项目就吃过这亏，设计师“像素级”还原，结果每个图标独立成一张小图，手机上首页加载了特么80多个HTTP请求，用户还没看见字呢流量先跑掉一半。那天半夜收到性能报警，我盯着瀑布图那条密密麻麻的请求线，抽了三根烟都没想明白问题在哪儿，最后前端兄弟幽幽地来了句：“哥，这图切的，我合并雪碧图合并到眼都快瞎了。”
说几个血泪换来的保命心得吧，别再埋头苦切了：
1. 工具早换了！ 别死磕PS了，真的。用Figma、Sketch或者Adobe XD，它们生来就是为了设计和协作。最关键的是，它们能生成CSS代码！阴影、圆角、渐变，属性直接复制粘贴，前端省多少事你知道么？这比你手动量像素然后写死数值强一万倍。而且标注是自动的，间距、尺寸、字体样式一目了然，杜绝“你猜这个margin是多少px”的弱智沟通。
2. 跟设计师做“婚前协议”！ 开工前，必须拉上设计师和前端开个会定规矩。图标必须用SVG格式，矢量！放大不失真，颜色还能用CSS改，体积小到可以忽略不计。那些复杂的装饰性大图，商量好压缩质量和格式（WebP请优先考虑）。最重要的是组件化思维，一个按钮，正常状态、Hover状态、禁用状态，要作为一套来设计和交付，别让前端自己去PSD里扒图层。
3. 你的刀，不是切片工具，是“导出”面板。 在Figma这些工具里，不是切，是“选中图层/画板 -> 设置导出参数 -> 导出”。可以一键导出多种尺寸（@1x, @2x, @3x）适配不同屏幕，还可以批量导出整个画板的所有资源。学会用自动化的切片插件，能按命名规则自动导出你需要的所有素材，效率提升不是一点半点。
4. 命名！命名！命名！ 这是项目管理的基本功，也是避免变成屎山代码的第一步。别用“未标题-1”、“图层2拷贝”这种天才命名。用英文、小写、用连字符，比如`btn-submit-primary.png`， `icon-search.svg`。保持整个团队命名规则一致，后期维护和替换的时候，你会回来感谢我的。
总之，切片的核心不是“切割”，而是“资产交付与规范”。你是在为后续的开发、维护、甚至SEO打地基（图片Alt属性、文件名都算轻微权重点）。图切得好，前端兄弟笑容多，项目进度快，网站性能优，用户体验好，老板给你发红包。图切得烂……就等着像我一样，凌晨三点还在和兄弟对喷“这个间距到底是不是18.5像素”吧。不说了，去给前端兄弟买奶茶赔罪了。
