第11天。我让它做一个Trello克隆。看板、拖拽、卡片详情，全套的。
提示词#
“Build a Trello-style kanban board app with boards, lists, cards, and drag-and-drop”
我给它取名叫Treelo，因为我的起名能力实在是太强了。
怎么做出来的#
Watchfire把这个拆分成了18个任务。核心部分先来：看板、列表、卡片和拖拽。然后它继续往下做。标签。截止日期。卡片详情弹窗。自定义看板背景。搜索和筛选。卡片归档。带批量操作的多选。活动动态。日历视图。最后还有一轮性能优化，保证一切运行流畅。
对于一个提示词来说，这功能也太多了。大部分我都没有明确要求。最初的提示词只是看板、列表、卡片和拖拽。其他所有东西都是Watchfire自己判断"看板应用还应该有这些功能"然后直接做出来的。
我得到了什么#
它看起来就像Trello。 布局、卡片样式、蓝色背景、列表列。眯起眼睛看的话，能以假乱真。顶部栏有搜索、活动、日历和筛选按钮。列表显示卡片数量。卡片上显示标签和截止日期徽标。
支持多个看板。 主页上有最近浏览的看板和一个"Create new board"按钮。它会追踪你最近访问过哪些看板。简单但实用。
卡片详情弹窗的完成度高得出人意料。 点击任意卡片，会弹出一个完整的弹窗，包含标签、截止日期选择器、带进度追踪的清单、描述字段、评论和活动日志。右侧有一组操作：移动、复制、归档。这种东西如果纯手工做，得花好几天才能做好。
标签真的能用。 你可以给卡片分配带颜色的标签，然后按标签筛选。筛选面板从右侧滑出。看板上的卡片顶部会显示小的彩色条带来表示标签颜色。
有活动动态。 每个操作都会被记录。卡片创建、卡片移动、标签添加、清单完成。显示时间戳和发生了什么。这是区分玩具和真正可用工具的功能之一。你能实实在在地追踪看板上发生了什么。
日历视图。 从看板视图切换到日历，就能看到所有有截止日期的卡片排列在月度网格上。没有截止日期的卡片显示在侧边栏。这是查看接下来有什么安排的一种非常实用的方式。
从日历也能打开卡片弹窗。 在日历上点击卡片，同样的详情弹窗就会打开。截止日期、标签，所有内容都可以从任一视图访问。
自定义看板背景。 你可以把看板背景改成不同的颜色和渐变。深色模式也完全支持。整个应用会尊重你的主题偏好。
还有什么#
有些东西在截图里看不太出来，但值得一提：
- 拖拽使用@dnd-kit。你可以在列表内重新排序卡片，在列表之间移动卡片，还可以重新排序列表本身。
- 多选。 按住Shift或Ctrl选择多张卡片，然后批量移动、归档或添加标签。
- 撤销/重做。 用Ctrl+Z和Ctrl+Shift+Z实现完整的历史记录支持。
- 键盘快捷键。 按N添加卡片，F搜索，B返回看板列表，Q按截止日期筛选，?查看所有快捷键。
- 清单在卡片内带有进度条。
- 归档和恢复。 卡片和列表可以归档而不是删除。
- 本地存储持久化。 所有数据都保存在浏览器中。关掉标签页再回来，你的看板还在。
Bug报告#
说实话，这个项目相当干净。主要问题是拖拽的边界情况（把卡片拖到列表最底部有时不会被识别）以及日历视图最初在弹窗中修改截止日期后不会更新。都是小问题，没有结构性的毛病。
数据一览#
- 18个Watchfire任务 从核心看板到性能优化
- Next.js + TypeScript + Tailwind CSS 技术栈
- @dnd-kit 实现拖拽
- 完整的键盘导航 带快捷键提示覆盖层
- 两种视图： 看板和日历
- 所有数据存在localStorage 不需要后端
试试看#
创建一个看板，加几个列表，拖拽一些卡片。比你想象的要好玩。
第11天总结#
看板听起来表面上很简单，但有太多小交互需要正确运作：拖拽目标、弹窗状态、筛选、撤销历史、跨视图一致性。这一切都来自一个提示词和18个自动化任务，这件事到现在我还觉得不可思议。
我一直在想同一件事：靠我自己，一天之内根本做不出来这个。光是拖拽就得花一整天跟各种库和边界情况较劲。结果我得到了一个带日历视图、活动动态、批量操作和键盘快捷键的可用Trello克隆。而我的时间花在了测试和提交几个bug报告上。
从"我想要一个看板"到"给你一个看板"之间的距离，越来越短了。
这是30 Days of Vibe Coding的第11天。跟着我一起看如何用AI辅助编程在30天内交付30个项目。
