最近我在用 HTML 和 CSS 做网页设计✨

上个月 CS 领域著名喷子、著名的“Rework 重来”作者之一的 DHH，发表文章呼吁大家别用 Figma 做网页设计，说他们公司的设计工作，直接用 HTML 和 CSS 完成

他的理由是说 Figma 阻碍了设计师和程序员协作。之前 Config 2023 期间 Figma 发布新功能时，很多设计师们抱怨说 Figma 越来越不好用、越来越需要编程基础，也是在说 Figma 是一种阻碍

具体到我设计的网页，来自和@zhufengme朱峰老师协作的“块读”这个项目，他负责开发和运维，我自然是负责品牌设计、UX 设计…

如果我用 Figma 做视觉化的网页设计，再输出为作为参考的 HTML + CSS 页面，再找前端程序员来把它改写为可用的 HTML + CSS 模板，再找后端程序员来把模板变成程序…不但过程漫长，而且任何一丁点改动要经过至少 3、4 个流程

最现实的是，我们没有前端程序员🤣

我们需要设计的是 email 页面，因为不使用 Figma，所以设计流程非常短、快：

• 我先在本地用编辑器来写 HTML + CSS，在本地测试视觉效果（图一）
• 然后我用假数据、发测试邮件确认视觉效果
• 他把我提交的页面改为模板，再用真数据、发测试邮件给我确认视觉效果
• 我测试之后，直接告诉他怎么改 HTML + CSS，如此重复

后来我发现这个流程还是太慢，只好问朱峰还有什么好办法，能让我方便地做测试

然后他问我要了公钥，给了我测试服务器的访问权限，直接让我上服务器修改模板文件、自己跑脚本做测试。还好用的是世界上最好的编程语言（英语）和曾经世界上最好的编程语言，我都能看懂

Btw，作为设计师，我坚决不用 VIM 来编辑代码，这属于门户之别、没什么可商量的…我都用 nano（图二）😂

最后我们正式提交模板文件、按时运行程序，成为大家收到的邮件（图三）

从我们的例子来看，DHH 的建议似乎并没有错，我跟朱老板的确跳过了 Figma 这个设计师和工程师之间的障碍，提高了协作效率

其实我们遇到的是特例，没有代表性

• 我现在设计的是功能性网页。功能性页面大多是矩形套矩形，用 HMTL + CSS 这种非视觉化的方式做设计，难度不大（DHH 说的估计也就是之类页面）；而展示性的网页，排版很灵活、还有各种动画和特效，这时候 Figma、Framer、Webflow 之类的视觉化设计工具，能极大地提高设计效率
• 我们没有引入设计系统，没有用到 Figma 强大的设计管理功能
• 我们没有跨部门协作的问题，也没有用到 Figma 的设计协作功能

通过我们的真实例子，大家应该知道 DHH 到底在说什么、说得到底有没有道理了吧？

设计入门