首页

面试白板题怕了？这6个互动学习平台让面试官以为你工作10年

第二灵感库

2026-07-31

导读：哈喽，我是大鹏，这里是第二灵感库。给大家推荐了各种设计工具、资源网站、灵感平台，但说句实话——工具再多，基本功不扎实，照样做不出好设计。

哈喽，我是大鹏，这里是第二灵感库。

给大家推荐了各种设计工具、资源网站、灵感平台，但说句实话——工具再多，基本功不扎实，照样做不出好设计。

今天换个思路，推荐6个设计游戏和互动学习平台。

不是那种看完就忘的视频教程，而是你真的上手玩、边玩边练的那种。每天花15分钟，钢笔工具、配色、排版、CSS布局、设计思维……全都能练到。

而且最重要的是——玩的时候不觉得在学习，但技能确实在涨。

来，一个一个说。

01. The Bezier Game

🔗 bezier.method.ac

一句话：专治钢笔工具手残党。

钢笔工具是设计师的"基本功中的基本功"，但说实话，很多人用了三四年Figma/Illustrator，画贝塞尔曲线还是在"猜"——猜控制点往哪拉、拉多长、什么角度。

这个游戏直接把你丢进一个个形状里，要求你用最少的锚点把形状轮廓画出来。画完会告诉你"你用了X个点，最佳方案是Y个点"。

刚开始你会觉得"这也太难了吧"，但玩个几关之后，你会突然开窍——原来控制点应该这么放，原来手柄应该这么拉。

游戏还贴心地提供了快捷键提示（⌘Z撤销、⇧⌘Z重做），跟你平时用设计软件的操作一模一样，肌肉记忆直接迁移。

适合谁：钢笔工具用不利索的、刚入行的设计师、想提升路径绘制效率的人。

大鹏碎碎念：我第一次玩的时候前几关就卡住了，画个心形用了12个点，最佳方案只要4个。那一刻我深刻理解了什么叫"less is more"。

02. Can't Unsee

🔗 cantunsee.space

一句话：训练你的"设计之眼"，看完再也回不去了。

这个游戏的核心玩法特别简单：给你两个UI界面，让你选"哪个设计更正确"。

听起来容易？等你真的玩起来就知道了——两个界面看起来差不多，但间距差了2px、字号差了1号、颜色差了一个色阶，哪个才是对的设计？

随着关卡推进，难度逐渐加大，从"明显差异"到"肉眼几乎看不出"。

玩完之后最大的收获不是"我答对了多少题"，而是一种后遗效果——你再看自己做的设计稿，会不自觉地注意到"这个间距是不是大了""这个对齐是不是歪了""这个字重是不是太重了"。

这就是审美训练。不是看教程能学会的，得自己"看"出来。

适合谁：觉得自己审美不够好的、看不出设计稿哪里有问题的、想提升设计细节敏感度的人。

大鹏碎碎念：玩完之后看自己以前的设计稿，差点没把自己尴尬死。但这也说明——进步了。

03. Flexbox Froggy

🔗 flexboxfroggy.com

一句话：把CSS Flexbox玩成通关游戏。

设计师要不要学CSS？我的答案是：不用会写，但得懂原理。不然你跟前端沟通的时候，只能靠"往左挪一点""居中一下"这种模糊描述。

Flexbox Froggy 是一个24关的通关游戏，每一关给你一只（或多只）青蛙和一片荷叶，你需要写一行CSS Flexbox代码把青蛙送到荷叶上。

比如第一关，你只需要写 justify-content: flex-end; 青蛙就跳到右边了。

随着关卡推进，你会学到 align-items、flex-direction、order、flex-wrap……所有Flexbox核心属性，全部通过游戏关卡的方式学会。

支持中文界面，目前有25+种语言可选，零英语门槛。

适合谁：想学CSS布局的设计师、跟前端沟通费劲的、想做响应式设计但搞不懂布局逻辑的人。

大鹏碎碎念：这个游戏我在面试候选人的时候都会推荐，因为能把Flexbox玩通关的人，至少说明他有主动学习的意愿。

04. CSS Diner

🔗 flukeout.github.io

一句话：CSS选择器，从入门到精通，全靠"吃"。

CSS Diner 跟 Froggy 是一个思路——把学习变成游戏。但这次不是青蛙，而是一张餐桌上的盘子和食物。

每一关，桌子上摆着不同的盘子和食物（HTML元素），你需要写一个CSS选择器把"正确的食物"选中。

从最基础的 p 选择器，到 > 子元素选择器，到 + 相邻兄弟选择器，到 :nth-child() 伪类选择器……32关下来，CSS选择器你基本就通了。

为什么设计师需要学CSS选择器？因为Figma的Auto Layout和CSS的Flexbox/Grid本质上是同一套逻辑，理解了CSS选择器，你对组件结构的理解会上一个台阶。

而且这个游戏完全免费、开源、无广告。

适合谁：想理解HTML/CSS结构的设计师、做设计转代码的、想跟前端更好协作的人。

大鹏碎碎念：32关不多，但有些关卡真的会卡你。卡住的时候别急着看答案，多想想——这种"想通了"的瞬间才是真正学到东西的时候。

05. Designercize

🔗 designercize.com

一句话：设计思维白板练习，每天15分钟。

前面4个游戏练的都是"硬技能"（钢笔工具、配色、CSS），这个练的是**"软技能"——设计思维。**

Designercize 的玩法是：随机给你一个设计挑战，比如"设计一个宠物领养流程""为一款新咖啡App设计首页""重新设计超市收银小票"。

每个挑战都有时间限制（通常15分钟），要求你在白板（或纸上、Figma里）快速画出方案。

这个练习模拟的是真实面试中的白板题和工作中的快速方案推演，练的不是"画得好看"，而是"快速思考、快速决策、快速表达"。

网站还提供双人模式——一个人出题，一个人画，互相给反馈。非常适合团队内部的设计练习活动。

适合谁：准备设计面试的、想提升快速思考能力的、团队想做设计练习活动的Leader。

大鹏碎碎念：这个练习我跟团队做过几次，效果出奇的好。你会发现平时做设计很慢的同事，在时间压力下反而能蹦出意想不到的想法。

06. Color Game

🔗 color.method.ac

一句话：配色理论不是看会的，是练会的。

method.ac 出品，跟 Bezier Game 是同一个团队。但这次练的不是钢笔工具，而是配色。

游戏会给你一个色环和一组挑战，比如"找到这个颜色的互补色""调出与目标最接近的色相""匹配这个饱和度"。

你需要通过拖动色环上的滑块来匹配目标颜色，系统会根据你的准确度打分。

看似简单，但玩起来你会发现——你以为自己认识的颜色，实际调出来差了十万八千里。特别是在饱和度和明度的细微差别上，没有经过训练的人很难精确匹配。

这个游戏最大的价值是让你建立"色彩感知"——不是记住"互补色是色环对面的颜色"这种理论知识，而是真的能用眼睛判断出来。

适合谁：配色总是"差一口气"的、对色彩理论有概念但实际操作不准的、想提升色彩敏感度的设计师。

大鹏碎碎念：配色的理论网上一搜一大把，但理论再好，眼睛不行也是白搭。这个游戏就是练"眼睛"的。

总结一下

游戏	练什么	时长/关	免费?	难度
Bezier Game	钢笔工具/贝塞尔曲线	~14关	完全免费	★★★☆☆
Can't Unsee	设计审美/UI细节	~30关	完全免费	★★☆☆☆
Flexbox Froggy	CSS Flexbox布局	24关	完全免费	★★☆☆☆
CSS Diner	CSS选择器	32关	完全免费	★★★☆☆
Designercize	设计思维/白板练习	随机出题	完全免费	★★★★☆
Color Game	配色理论/色彩感知	多轮挑战	完全免费	★★★☆☆

6个游戏全部免费，全部浏览器直接打开就能玩，不用注册、不用下载。

我的建议是：不要一口气全玩完，每天挑一个，花15分钟，坚持两周。你会发现基本功悄悄上了一个台阶。

如果只能选一个开始，我推荐Can't Unsee——门槛最低，但"后劲"最大，玩完之后看什么设计稿都能挑出毛病来（这可能是个好事也可能不是😂）。

以上是第二灵感库第35期的全部内容。

这些游戏你玩过几个？还有哪些设计游戏是你觉得值得推荐的？评论区告诉我，下期可能就用你推荐的。

我们下期见。

【声明】内容源于网络

第二灵感库

1234

内容 99

粉丝 0

第二灵感库 1234

总阅读270

粉丝0

内容99