---
title: 搞了个 AI 涂鸦板
author: 休言
date: 2026-10-15
url: https://www.fechuck.com/notes/2026-10-15-react-whiteboard-ai.html
---

# 搞了个 AI 涂鸦板

前阵子把涂鸦画板重写成了一个 [React 白板组件](/2026/react-whiteboard)，写完总觉得少点什么。白板能画、能改、能撤销，但终究还是得自己一笔一笔去画。于是顺手在上面接了个大模型：右边一个对话框，说一句「画一只坐着的小猫」，它就自己在白板上动笔。

![AI 涂鸦板](/2026/react-whiteboard-ai/board.png){data-zoomable}

体验地址：<https://inchill.github.io/react-whiteboard-ai/>

## 画出来什么样

目前接的是 DeepSeek，随便画了一圈，效果比我预想的好。小猫、小兔子、帆船日落、灯塔、冒热气的咖啡杯，都是一句话出来的，线条带点手绘的笨拙感，反而挺可爱。

最让我意外的是那块黑板。我说「画一个几个算术公式构成的画，像黑板写的那样」，它思考了二十来秒，摆了 20 个图形：深绿底、棕色边框、粉笔槽、两列算式，左上角还写了个「今日算术」，右下角画了个笑脸。这种东西它不是在「画」，而是在「排版」，反而是它最擅长的。

当然也有翻车的时候。「画一只大象」那次思考了 45 秒，出来的大象就……比较抽象，像是谁家孩子画的。不过放在一个涂鸦板里，这种稚拙感好像也说得过去。

## 几个小设计

- **AI 画的每一笔都是真的图形**，不是一张贴图。画完你可以选中、拖动、改颜色、擦掉一部分，跟自己画的没有区别。
- **AI 每轮修改算一步**，不满意就 ⌘Z 一次性撤回，不用一笔一笔往回退。
- 下面分了手绘、结构图、布局、编辑几种模式，也放了几个预设的点子（小老鼠头像、仙人掌盆栽、热气球……），不知道画什么的时候点一下就行。

## 给小孩玩挺合适

做着做着我意识到，这东西最合适的用户可能不是我，而是家里的小朋友。小孩脑子里画面多，手上功夫跟不上，现在说一句就能看到它画出来，画完还能自己上手涂改、添几笔。一个出主意，一个动手，挺好玩的。

问题是小孩不太会打字。所以下一步想加上**语音转文字**：按住说话，松手就开画。这样三四岁的孩子也能玩起来。

先这样，等语音做好了再来更新。