讨论

构建单文件互动愿景板与情绪板应用

来自 Wikiprompt,自由的提示词百科全书

Eyisha Zyer

2026年7月22日

构建单文件互动愿景板与情绪板应用 一个编程提示词,构建单文件HTML5愿景板/情绪板应用,包含可编辑的便当格布局、图片上传、习惯追踪器和localStorage数据持久化。

相关媒体

提示词内容收藏

🌐
概述:使用现代 HTML5、CSS3 和内嵌 JavaScript(含 Google Fonts:Playfair Display 和 Plus Jakarta Sans)在单个文件 moodboard.html 中构建一个生产就绪的交互式愿景板和情绪板 Web 应用。 关键规格: - 布局与设计:居中 bento 网格布局,采用编辑美学和暖中性色调(--bg: #f5f2eb, --card-bg: #ffffff, --text-main: #2b2623, --accent: #b88651)。顶部包含一个可编辑的看板标签、标题和副标题的标题栏,以及一个实用工具栏。 - 交互组件:使用 contenteditable 实现完全可编辑的文本元素,支持即时自定义。动态图片卡片,既支持通过文件读取器从本地设备上传图片,也支持粘贴自定义 URL,并带有交互式照片叠加层。每日意图清单,内置习惯追踪器和删除切换。可自定义的交互式调色板块,带有实时颜色选择器输入。使用 localStorage 持久保存本地状态,并提供重置功能以恢复默认设置,所有代码返回在单个文件中。

登录以查看完整提示词

继续使用:

登录即表示你同意我们的 使用条款 和 隐私政策

用法

此提示词专为 coding 设计。复制上方内容并粘贴到你常用的 AI 工具中。

为获得最佳效果,可将占位符(方括号或大写字母标示)替换为你的具体需求。

参考资料

分类:coding| twitter| mood-board| bento-grid

讨论