前端切图仔实测:让龙虾帮我写CSS,三天的活四小时搞完

说出来你们可能不信,我上周接了一个企业官网改版的私活,页面不算复杂但量大,22个页面要做响应式适配。

正常来说,光CSS适配这块我怎么也得写三天。但这次我试着用OpenClaw来做,结果四个小时就搞定了。

我是怎么用的

我没有直接让它从零写CSS。那样出来的东西惨不忍睹,别问我怎么知道的。

我的做法是:先自己把第一个页面的适配写好,然后让OpenClaw读我的代码,学我的命名规范和断点设置。接着我把剩下21个页面的HTML文件一个个丢给它,让它参照第一个页面的写法来生成CSS。

关键指令大概是这样的:“读取index-responsive.css的代码风格和断点规则,按照同样的规范为about.html生成响应式CSS,断点统一用768px和1200px。”

效果怎么样

说实话,生成的CSS大概有85%可以直接用。剩下15%需要我手动调,主要是一些flex布局的细节和特殊元素的定位。

但就算加上调试的时间,整体效率也比自己从头写快了四五倍。

几个坑

  1. 它偶尔会自作主张加一些我没要求的动画效果,得反复强调"不要加额外样式"
  2. 复杂的grid布局它处理得不太好,嵌套多了就开始乱
  3. 偶尔生成的class名跟我的规范不一致,得检查一遍
  4. 它对移动端的touch事件相关样式基本不懂

总结

适合做:大量重复性的CSS适配、批量改颜色改字号这种体力活
不适合做:复杂交互、精细动画、设计稿精确还原

反正我以后接私活肯定继续用。省出来的时间打游戏不香吗?

不过有一点——别让甲方知道你用了AI,不然他会觉得这活本来就不值那么多钱。

实测下来确实能提效 但前提是使用场景要足够标准化 边界情况多的任务AI处理不了

这个思路不错 但要注意检查AI输出的质量 不能直接拿来用 人工审核是必须的

我也试过类似的做法 效果取决于你给的示例质量 示例越规范AI学得越好

效率提升的数据很具体 比那些笼统说’效率翻倍’的帖子有说服力多了

省下来的时间拿去做什么很重要 如果省了时间去摸鱼 那跟没省一样

@zklab 使用场景标准化这点对前端尤其重要 UI组件化之后AI生成的CSS复用率高 但自定义设计就需要人工调整了

@strmx 人工审核是必须的 AI写的CSS可能有兼容性问题 特别是Safari和IE的怪异模式 上线前一定要cross-browser测试

前端同行来了,CSS让AI写真的快

响应式布局它写得比我好

三天活四小时我信

写CSS确实快,但响应式得自己调

三天的活四小时是有点夸张了吧