背景

独立开发者在日常工作中经常闪现 AI 产品灵感，但手机备忘录、聊天记录和便签散落各处，真正回头整理时往往找不到上下文。我想要一个足够轻、打开即用、不依赖后端的工具，于是有了这个「AI 灵感画板」。

它只有一个页面：用卡片记录灵感，用标签分类，用关键词搜索，数据保存在浏览器 localStorage 中。项目完整走通了「AI 生成—本地运行—公网预览—发布到作品展览馆」的流程。

一、作品定位与功能

目标用户：独立开发者、产品经理、AI 应用爱好者。

核心功能：

• 灵感卡片的新增、编辑、删除与查看；
• 多标签管理与组合筛选；
• 标题与描述的模糊搜索；
• localStorage 自动持久化；
• 响应式布局，手机也能用。

二、技术选型

没有引入 React 或 Vue，而是选择 Vite + 原生 JavaScript + CSS3：

• Vite 提供开箱即用的开发服务器和构建能力；
• 原生 JS 足够处理卡片 CRUD 和 DOM 渲染；
• 零运行时框架依赖，构建产物小，部署简单；
• localStorage 免去后端和数据库成本。

目录结构：

ai-inspiration-board/
├── index.html
├── package.json
├── src/
│   ├── main.js
│   └── style.css
└── README.md

三、数据模型与持久化

每张卡片包含 id、title、description、tags 和创建时间：

const STORAGE_KEY = 'ai-inspiration-board:cards';

function loadCards() {
  try {
    return JSON.parse(localStorage.getItem(STORAGE_KEY)) || [];
  } catch (error) {
    console.warn('读取本地数据失败', error);
    return [];
  }
}

function saveCards(cards) {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(cards));
}

这里有两个细节：

1. JSON.parse 一定要用 try/catch 包裹，避免历史脏数据导致页面白屏；
2. 读写逻辑集中封装，后续换 IndexedDB 或云端同步时只需替换这一层。

四、渲染与事件委托

卡片列表使用事件委托，避免每次渲染都重复绑定事件：

list.addEventListener('click', (event) => {
  const button = event.target.closest('[data-action]');
  if (!button) return;
  const { action, id } = button.dataset;
  if (action === 'edit') openEditor(id);
  if (action === 'delete') removeCard(id);
});

渲染用户输入时使用 textContent 而不是 innerHTML，避免把标题或描述里的 HTML 当成代码执行：

titleEl.textContent = card.title;
descEl.textContent = card.description;

五、标签筛选与模糊搜索

筛选逻辑可以合并成一次 filter，输入变化时重新计算可见卡片：

function getVisibleCards() {
  const keyword = searchInput.value.trim().toLowerCase();
  return cards.filter((card) => {
    const matchTag = activeTag === 'all' || card.tags.includes(activeTag);
    const text = (card.title + ' ' + card.description).toLowerCase();
    return matchTag && text.includes(keyword);
  });
}

标签栏由所有卡片动态汇总，点击标签切换 activeTag，再调用 render 即可。

六、在 AI 开发者空间中的开发与发布

这次没有在本地从零配置环境，而是直接在华为云 AI 开发者空间的 AI Shell 中描述需求，让 AI 生成项目骨架和首版代码。主要流程：

1. 在 AI 对话中说明作品用途、目标用户、核心功能和界面风格；
2. 由 AI 生成 Vite 项目并启动开发服务器；
3. 通过 DevBridge 开发隧道获得临时公网地址，在浏览器中验收功能；
4. 把代码推送到 GitCode 仓库，保留可复现的源码；
5. 在 AI 对话中安装作品发布 Skill，按提示生成封面、简介和架构图，提交到开发者作品展览馆。

作品页：https://gallery.developer.huaweicloud.com/gallery/006889d39a400000

代码仓：https://gitcode.com/qq_34509189/ai-inspiration-board

七、踩坑记录

• 本地存储不可用：隐私模式或存储配额不足时 localStorage 会抛异常，必须捕获；
• 事件重复绑定：列表重渲染后不要重复 addEventListener，事件委托更稳；
• 移动端适配：记得设置 viewport，标签栏在窄屏下要允许横向滚动；
• 发布材料：Git 仓库地址和分支是必填项，README 要写清安装、运行和目录结构；
• 体验地址：临时隧道过期不影响作品提交，但长期展示最好部署到稳定环境。

八、后续计划

下一步准备增加 JSON 导入导出、标签云、PWA 离线安装，以及可选的云端同步。对这个方向感兴趣的朋友，欢迎在评论区交流。

总结

「AI 灵感画板」本身不复杂，但它验证了一条完整的个人开发闭环：用 AI 快速生成可运行的原型，在真实环境中验收，再把代码、文档和作品页一起交付。对独立开发者来说，先把想法跑起来，比一开始追求完美架构更重要。