在我从事网页设计和开发行业的时间里，有一个对话一直在酝酿。它的中心是设计工具和开发工具之间的冲突。网页设计的最终产品往往是一个模拟模型。以前的笑话是，网站开发人员制作网站，而网站设计师制作网站的画。这种脱节是一个巨大的摩擦的来源。哪一个才是真理的来源？
如果真的能有一个单一的真理之源呢。如果设计工具是在与生产网站相同的代码上工作呢？这个史诗般的对话的最新章节是UXPin。
让我们摆出事实，让你看到这一切的发生。
UXPin是一个浏览器内的设计工具。
UXPin是一个强大的设计工具，具有你所期望的所有功能，特别是专注于基于数字屏幕的设计。
在这里，它是浏览器内的事实就显得格外重要。在网站上设计网站......是一个明显而自然的选择。这意味着你所看到的就是它将会是什么样子。这一点对排版尤其重要!这个卡片组件的实施者可以看到正在使用的确切颜色（正确的格式），以及确切的像素尺寸等。
Ania Kubów在一段关于UXPin的视频中对此做了很好的阐述。
十多年前，Jason Santa Maria想了很多关于下一代设计工具会是什么样子。我们可以直接使用浏览器吗？
我认为浏览器是不够的。一个网页设计师在解决创意和信息传递问题之前就跳进浏览器，就好比建筑师把木头敲在一起，然后再去测量。想象力的过程被手头的工具缩短了；而正是这种想象力--或者说是火花--在设计之初就为接下来的一切奠定了基础。
Jason Santa Maria,"一个真正的网页设计应用"
也许不是直接使用浏览器，而是在浏览器中使用一个设计工具，这可能是两个世界的最佳选择。
像这样的应用程序可以大大地改变网页设计的过程。最重要的是，它不会是一个我们用来模拟网页外观的代理应用程序--它已经说了网络的语言。这将是真正的在浏览器中设计。
看到这种方式与伟大的设计师在可能之前的设想相一致，并与今天的技术可能性相融合的新方面，真是太酷了。
你可以在UXPin中处理你自己的React组件。
这就是真理之源的神奇之处。如果一个设计工具可以输出一个React（或任何其他框架）组件，那是一回事。那是一个很好的技巧。但这很可能是一次单程旅行。现实世界项目中的组件充满了其他的东西，这些东西并不完全是设计的范畴。也许一个组件使用一个钩子来返回当前用户的权限，并在他们没有权限的情况下禁用一个按钮。被禁用的按钮有设计的因素，但大部分的代码却没有。
有一个设计工具不能尊重该组件中的其他代码，而基本上只是让它静止，这是不现实的。从本质上讲，如果它导出组件但不能导入，那就不是真正的设计工具。
这就是UXPin Merge的作用。
现在，公平归公平，这需要花点功夫来设置。可能只需要几个小时，也可能需要几天时间来建立一个完整的设计系统。UXPin只适用于React，并使用webpack配置来整合它。
一旦你开始工作，你在UXPin中使用的组件实际上就是你在建立生产网站时使用的组件。
看到一个设计工具能够消化预先建立的组件，并允许它们在一个全新的画布上进行原型设计，这真的是令人印象深刻。
他们在你的项目中得到了很多帮助，包括。
- 关于整合你自己的组件的文档
- 例子 repo:uxpin-merge-boilerplate
正如它应该的那样，它可能会影响你构建组件的方式。
组件往往有道具，而道具控制着里面的设计和内容等东西。UXPin给你提供了一个道具的用户界面，这意味着你可以完全控制这个组件。
<LineChart
barColor="green"
height="200"
width="500"
showXAxis="false"
showYAxis="true"
data={[ ... ]}
/>
知道了这一点，你可能会给自己的组件提供一个道具界面，为你提供大量的设计控制。比如说，整合主题切换。
有了Storybook，这一切就更快了。
在JavaScript-组件领域，另一个非常流行的查看组件的工具是Storybook。它不是一个像UXPin那样的设计工具，它更像是一个组件的动物园。你可能已经设置了它，或者你也可能发现使用Storybook的价值。
好消息是什么？UXPin Merge与Storybook配合得非常好。它使整合变得超级快速和简单。此外，它还支持任何框架，如Angular、Svelte、Vue等，以及React。
看看有多快。
UXPin的CEO Marcin Treder有一个强烈的愿景。
如果设计师可以使用工程师使用的同样的组件，而且它们都存储在一个共享的设计系统中（有准确的文档和测试），那会怎么样？设计师和工程师之间许多令人沮丧和昂贵的误解将不再发生。
还有一个计划：
- 连接到任何Git repo。
- 了解该版本中的所有组件。
- 让这些组件在 UXPin 视觉编辑器中可用。
- 观察回购的任何变化，并在可视化编辑器中反映这些变化。
- 让设计师设计并向开发人员提供使用这些组件的准确规格。
这就是他们在这里完成的工作。
