如何使用ChatGPT快速创建一个项目看板工具-人工智能-PHP中文网

chatgpt可5分钟生成纯前端本地看板：单文件html含三列拖拽、双击编辑、右键删除，数据仅存浏览器内存；需确保含draggable和drag事件逻辑，并手动注入localstorage实时保存及样式定制。

☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜

如何使用chatgpt快速创建一个项目看板工具

你需要一个轻量级项目看板工具，但不想花时间搭服务器、写前端、配数据库，也不想被SaaS平台的订阅费和协作限制卡住——ChatGPT能帮你用纯文本+浏览器原生能力，在5分钟内生成一个可拖拽、带状态分类、支持增删卡片的本地HTML看板。

生成基础看板HTML结构

打开ChatGPT（推荐使用GPT-4或支持代码执行的版本），输入提示词：“生成一个单文件HTML看板工具，包含To Do / In Progress / Done三列，每列可拖放卡片，卡片支持双击编辑、右键删除，所有数据仅存在浏览器内存中，不联网、不依赖外部CDN。”

复制它返回的完整HTML代码，保存为kanban.html，双击用Chrome/Firefox打开即可运行。

这一步不能跳过：必须确保ChatGPT输出的代码包含draggable="true"和ondragstart事件绑定，否则拖拽失效。如果它返回的代码里没有这两项，立刻追加提问：“请补全drag-and-drop事件逻辑，包括dragstart、dragover、drop三个事件处理函数。”

手动注入实时保存功能

方法一：在生成的HTML中定位到<script></script>标签末尾，插入以下代码：

window.addEventListener('beforeunload', () => localStorage.setItem('kanbanData', JSON.stringify([...document.querySelectorAll('.card')].map(el => ({text: el.innerText, column: el.parentElement.id}))));

ChatGPT Atlas (macOS)

ChatGPT Atlas（macOS）可在浏览网页时提供即时回复、内容总结与任务辅助。它支持智能建议、信息整理及多场景交互，同时配备可控隐私设置，让用户在使用过程中更加安全安心。针对 macOS 平台优化后，带来流畅自然的浏览体验，适用于办公、学习、创作及日常信息查询等多种场景。

下载

document.addEventListener('DOMContentLoaded', () => { const saved = localStorage.getItem('kanbanData'); if (saved) { JSON.parse(saved).forEach(({text, column}) => { const card = document.createElement('div'); card.className = 'card'; card.contentEditable = true; card.innerText = text; document.getElementById(column).appendChild(card); }); } });

方法二：如果ChatGPT生成的代码已含初始化逻辑，直接搜索function init()或DOMContentLoaded，把上面两段分别塞进对应位置——【注意：init()里必须先渲染卡片再绑定drag事件，否则新载入的卡片无法拖拽】。