Sort UI 2.0:Figma 与 shadcn 设计系统
Sort UI 2.0 重建 Figma UI Kit,推出基于 shadcn/ui 的开源组件与 180+ 落地页区块。
来源摘录
This was harder than I thought it would be, but I finally did it. Sort UI 2.0 is here. ✓ Figma UI kit rebuilt from scratch ✓ Open-source components built on shadcn/ui ✓ 180+ premium landing page sections, by popular request ✓ Checkout moved from Lemon Squeezy to @polar_sh 👨💻 Work on the next updates is already underway. 🌎 https://t.co/kt4sg2O47s
深度解析
是什么:Sort UI 2.0 是一次以“设计与代码同源”为核心的升级:从零重建 Figma UI Kit,提供基于 shadcn/ui 的开源 React 组件,并扩充到 180+ 个营销落地页区块;同时把结账从 Lemon Squeezy 迁到 Polar。
核心设计:它把 Figma Variables 与 CSS 变量、明暗主题、圆角/间距/排版等令牌对齐,配合 Auto Layout,让组件在文案变化时仍能稳定伸缩。180+ sections 则把 Hero、Features、Pricing、Testimonials 等常见落地页模式产品化,开发者可用 shadcn CLI 安装后继续改。
关键洞察:真正的卖点不是“组件多”,而是降低设计与实现之间的翻译损耗:设计师在 Figma 里调整令牌,开发者复用同一套语义变量,减少手工同步与视觉漂移。截图中的推荐语区块也体现了其版式库的编辑感与品牌适配能力。
边界与风险:“production-ready”“180+”属于产品方表述,缺少独立质量评估;组件越多,越可能带来风格同质化与维护负担。Figma 与代码即便共享令牌,也可能在复杂交互、响应式细节和无障碍上继续分叉。结账迁移与设计价值关系较弱。