Now vibe coding, so learning hammer FE ?https://channel.meo-ai.comhttps://channel.meo-ai.com/posts/650https://channel.meo-ai.com/posts/650Sat, 30 May 2026 00:08:24 GMT<span class="post-title-source">《用 Web Components 构建框架无关的设计系统（实践指南）》</span><br /><br />标签：<a href="/search/result?q=%23%E5%89%8D%E7%AB%AF" title="#前端">#前端</a> <a href="/search/result?q=%23WebComponents" title="#WebComponents">#WebComponents</a> <a href="/search/result?q=%23%E8%AE%BE%E8%AE%A1%E7%B3%BB%E7%BB%9F" title="#设计系统">#设计系统</a> <a href="/search/result?q=%23Elena" title="#Elena">#Elena</a> <a href="/search/result?q=%23VitePress" title="#VitePress">#VitePress</a> <a href="/search/result?q=%23CSS" title="#CSS">#CSS</a> <a href="/search/result?q=%23%E6%97%A0%E9%9A%9C%E7%A2%8D" title="#无障碍">#无障碍</a><br /><br />总结：<br />本文是一份超详细的实战教程，手把手教你用 Web Components（通过 <mark class="highlight">Elena</mark> 库）和 VitePress 搭建一个框架无关、可发布的设计系统。核心思路是"最低可行层级"——用 web 标准直接写原子组件，避免框架锁定；组件保持"最笨"状态，把复杂业务逻辑留给应用层。文章涵盖 monorepo 结构搭建、<mark class="highlight">Elena</mark> 组件脚手架、条件渲染、<a href="https://t.me/scope" target="_blank" title="@scope">@scope</a> 样式隔离、CSS 自定义属性主题化，以及通过 JSDoc + Custom Elements Manifest 自动生成 Props 表格的文档工作流。最终产出的是一个可独立发布的组件包 + 可部署的静态文档站。<br /><br />文章要点：<br />1. 设计系统从第一天就绑定特定框架（如 React）是"令人费解的"——web 标准组件才是可移植、可组合、经得起时间考验的选择<br />2. <mark class="highlight">Elena</mark> 是"刚好够用的抽象"：处理跨框架的 prop/attribute 同步、事件委托等脏活，但不掩盖 web 标准本质<br />3. 组件应保持"最笨"——被告知显式状态和内容的声明式组件，比内置复杂状态管理的"聪明"组件更健康<br />4. 设计决策应该在代码中而非 Figma 中完成：现代色彩空间、相对单位、对数排版比例等，设计工具只能模拟浏览器的很小一部分能力<br />5. 用 <a href="https://t.me/scope" target="_blank" title="@scope">@scope</a> 实现样式隔离 + 组件级 CSS 自定义属性作为"最终层 token"，既保证封装又有主题化回退<br />6. JSDoc 注释即文档：<mark class="highlight">Elena</mark> 自动生成 custom-elements.json，VitePress 通过 data loader 直接渲染 PropsTable 和 ComponentHeader<br />7. 文档即测试场：在 VitePress 中实时预览组件，确保跨框架可移植性；开发时 concurrent 运行 watch + docs:dev 实现热更新<br />8. 条件渲染示例：同一个组件通过 href prop 自动切换 button/a 标签，CTA 链接按钮的常见需求也能语义化实现<br /><br />URL：<a href="https://piccalil.li/blog/framework-agnostic-design-systems-part-1/" target="_blank" rel="noopener" title="https://piccalil.li/blog/framework-agnostic-design-systems-part-1/">https://piccalil.li/blog/framework-agnostic-design-systems-part-1/</a><a class="tgme_widget_message_link_preview" href="https://piccalil.li/blog/framework-agnostic-design-systems-part-1" target="_blank" rel="noopener" title="Baking framework lock-in into your design system from day one is a recipe for obsolescence. Component documentation is often tedious and out-of-sync with development. Let’s build a documentation-first, framework-agnostic component library using web standards…"> <div class="link_preview_site_name accent_color">Piccalilli</div> <img class="link_preview_image" alt="Framework-agnostic design systems: a practical approach to web components" src="/static/https://cdn4.telesco.pe/file/c5MKnRW_4RxCmUAd723zvjHh4L-nLO0G5lNM1Rh-VVrBb9er230bEw9ZYF4VsuuvxN0BVi0YyOXkUFWq_AH9w49QAI6VMwvxXkDpdbB0gIDD7JCyX5AuJ-Ny1v7brQ_shLRPNX7gf8Ay5l_SATf0p3zFlSNh8IGQdLmviOU5QsWPjJRhu8kA0x5HjeMOkTFPFRTGasUhlk6IDbOVvfbHOqbHmEPWU6n08YbW6SS-PHyBD2nmeqUrbZ2UZL9gZQztNv7Dn7GUuYzet9bvQl3-ds-AwqZZkw1-Bv37QOg9VeUCezZYVhY90R8b3s7XeNV8n08Fs1UfIk9tOVbATrIxUQ.jpg" width="1200" height="630" loading="eager" /> <div class="link_preview_title">Framework-agnostic design systems: a practical approach to web components</div> <div class="link_preview_description">Baking framework lock-in into your design system from day one is a recipe for obsolescence. Component documentation is often tedious and out-of-sync with development. Let’s build a documentation-first, framework-agnostic component library using web standards…</div> </a>