EDEN
MUSEBOX · DESIGN MEMORY FOR AI

让设计灵感真正用于创作。

Musebox 帮助创作者采集喜欢的网页界面,理解其背后的设计规则,并将这些洞察转化为可供 AI Coding 使用的结构化上下文。

返回 AI Playground
✓采集视觉参考✓理解与保存设计意图✓用于 AI Coding

我的身份:产品 Owner & Builder

Musebox Design Memory Library 真实原型界面
✓
Design Memory
From inspiration to AI context
01用户问题

你知道自己喜欢什么,但能向 AI 说清楚吗?

你收藏了许多喜欢的界面,却很难准确描述它们背后的设计逻辑。AI 生成的页面看似接近,却常常在布局、信息层级和视觉细节上偏离预期。

而每开始一个新页面,你又得重新解释自己的设计偏好。

◉
我想做一个像这个参考页面一样的界面……
生成结果偏差示意
⊗ 布局关系没有准确表达
⊗ 信息层级与参考设计不一致
⊗ 视觉细节反复调整
看起来接近, 却总差一点……
02 产品洞察

连接设计灵感与实际实现之间缺失的一层。

截图能够保存一个设计的样子,却无法充分解释它背后的设计决策,更难以将这些信息带入下一次开发。

基于这一问题,我构建了 Musebox:让视觉灵感不再停留于图片收藏,而是转化为结构化、可复用的 Design Memory。

通过连接人类视觉偏好与 AI 实现的 Design Intent Layer,让设计能够被理解,并真正用于后续创作。

视觉参考设计记忆AI 编程
▧
视觉灵感网页 / 区块 / 组件
⌘
AI 实现结构化上下文
设计意图层 · 概念结构示意
03设计记忆库

不只是截图收藏。

采集启发你的设计界面,从完整网页到独立区块与组件,将值得借鉴的设计保存下来。

通过可搜索的 Design Memory Library,将零散的视觉参考有序沉淀,让它们能够在后续创作中继续发挥作用。

Musebox Design Memory Library 真实原型界面,包含演示数据

从网页采集

保存完整网页、区块及组件,保留值得参考的设计来源。

有序组织

通过搜索、分类和筛选,建立可回访的个人设计记忆库。

持续复用

让参考不止停留在收藏,成为下一次创作可使用的设计信息。

04设计记忆详情

看见设计背后的思考。

不止于看到一个页面的视觉效果。Musebox 将原始视觉参考与设计检查器结合起来,把页面区块与对应的字体、色彩、布局、间距、组件结构及设计规则关联起来

Musebox 真实 Design Memory Detail 原型截图:左侧 Visual Reference,右侧 Design Inspector

当你看得见设计规则从何而来,就更容易真正理解它。

通过真实视觉和设计规则之间的联系,让结构化的信息保留原始视觉语境。

VISUAL REFERENCE原始设计参考 · 局部放大
真实 Detail 界面左侧原始网页参考的局部截图
保留网页原貌,使每条设计信息都能追溯到具体的视觉上下文。
DESIGN INSPECTOR结构化设计信息 · 局部放大
真实 Detail 界面右侧设计属性检查器局部截图
整理色彩、字体、布局与区块相关信息,帮助用户理解设计语言。

让设计规则始终与视觉语境保持联系。

我在设计详情页面时坚持一个原则:设计规则不应该脱离其原始视觉语境。因此,我采用并列的双栏结构,将选中的页面区块与对应规则关联起来,让用户更直观地理解所看到的设计,以及其中哪些信息值得复用。

05AI 上下文生成器

让设计理解,转化为实际行动。

选择已保存的设计参考,以及准备使用的 AI 编程工具。

Musebox 将提取的设计信息组织为结构化的 AI 上下文,使参考设计背后的设计判断能够进入实际开发流程。

设计参考→AI 编程工具→结构化上下文
Musebox AI Context Generator 参考级配置和结构化输出的真实原型 UI
参考与工具参考级配置 · 局部放大
真实 Generator 界面中的参考和目标工具选择局部
选择设计参考和 AI Coding 工具,让下一步操作尽可能直接。
可直接用于 AI 的上下文结构化输出 · 局部放大
真实 Generator 界面右侧结构化设计上下文预览局部
设计规则需要上下文才能发挥价值;输出不只是更多孤立的属性。
06未来规划

让设计意图,持续发挥作用。

Musebox 希望重新建立设计灵感与 AI 创作之间更有效的联系:让设计参考能够被理解、有序沉淀,并在未来的项目中持续复用,而不是每次创作都从头开始。