Hi all, I wanted to share a quick update on the approach I described earlier.
Over the past few days, I've been using the AI skills I shared in my previous email to create the first set of UI designs for the Manufacturing Production Run screens. I already shared the initial Figma designs in another email thread, I'm sharing them again for quick reference: https://www.figma.com/design/1wantteXXUlzPRYev1X5gr/Ionic-8-Material-UI-Kit--Community---Community-?node-id=35232-110282&t=LnujI8PPjWjq4Mwz-1 What's been particularly interesting is that these designs were created with the assistance of an AI coding agent (OpenAI Codex) using the reusable skill files and design guidelines that I shared previously. Rather than designing every screen manually from scratch, the agent follows the established design patterns and the Ionic Material UI Kit available in Figma <https://www.figma.com/community/file/885791511781717756/ionic-8-material-ui-kit-community> and generates layouts that can then be refined iteratively. The next step is even more exciting: using the same skills, the AI agent can read the Figma designs and generate the corresponding Ionic/Vue implementation, which helps bridge the gap between design and production-ready code. My goal is to reduce the effort required to build consistent enterprise user interfaces while keeping both the design and implementation aligned. For this experimentation, I'm using a paid Figma plan because it provides sufficient API access for AI-driven workflows. The free plan has fairly limited API usage, which makes iterative agent interactions difficult. I'm continuing to test this approach while building the headless Manufacturing PWA on top of OFBiz. If it proves effective, I believe it could significantly lower the barrier for contributors to create modern, consistent user interfaces and accelerate front-end development for future Apache OFBiz applications. As always, feedback on both the designs and the overall workflow is very welcome. Thanks -- Divesh Dutta www.hotwaxsystems.com On Mon, Jun 1, 2026 at 2:45 PM Divesh Dutta <[email protected]> wrote: > > Hello all, > > I would like to share an idea for feedback and discussion. > > As part of modernizing the manufacturing component within OFBiz by building the application headless and making services API-driven, I have also started building a front-end for manufacturing that can run effectively on mobile devices, tablets, and desktops. For this work, I considered using the Ionic framework with Vue to create a progressive web application that can serve enterprise users across multiple form factors. > > While working through the design and implementation process, I identified an opportunity to make enterprise UI development more consistent, reusable, and accessible for the wider community. In many projects, UI design and front-end implementation are still approached as isolated efforts, which often leads to duplication, inconsistent patterns, and a steeper learning curve for contributors. > > To help address this, I started using a shared set of open-source assets that can support both design and development: > > > The Ionic 8 Material UI Kit in Figma > > > https://www.figma.com/community/file/885791511781717756/ionic-8-material-ui-kit-community > > This open-source enterprise UI Kit already provides prebuilt Ionic components and enterprise-oriented UI patterns. It makes it much easier to design new application screens using established building blocks rather than starting from a blank canvas every time. > > > The HotWax Commerce open-source PWA applications > > > https://github.com/hotwax > > > Public applications listed here provide real, working Ionic/Vue implementation examples for enterprise workflows such as receiving, cycle count, fulfillment, and related operational use cases. > > > Together, these two open-source resources create a practical bridge from design to implementation: the Ionic 8 Material UI Kit helps teams design enterprise screens using proven Ionic patterns, and the HotWax Commerce PWA apps show how those designs can be translated into real Ionic/Vue code. > > My proposal is that the OFBiz community consider adopting these resources as a shared design-and-development reference base for modern enterprise applications. > > > The benefits would be significant: > > Designers could create new enterprise UI in Figma using established Ionic component patterns. > Developers could implement those designs using proven Ionic/Vue coding patterns from real open-source applications. > As we build more UI for other components, the community could benefit from more consistent UI, code structure, and a lower barrier to building polished enterprise PWAs. > > This is especially relevant as OFBiz continues evolving toward headless and API-based architectures. If services are exposed cleanly and can be consumed as APIs, then the front-end becomes an equally important part of the user experience. Having a shared design and implementation system for enterprise PWAs can help us build modern applications on top of OFBiz APIs in a way that feels coherent and maintainable. > > To support this direction, I have started creating a first draft of skills for AI coding agents that can: > > design enterprise UI in Figma using established Ionic patterns > interpret Figma designs and generate Ionic/Vue code from them > apply reusable coding patterns from open-source enterprise PWA applications > help ensure consistency in both UI design and front-end implementation > > The initial draft is here: https://github.com/diveshdut/enterprise-ui-ionic-vue-skills > > > I am currently testing these skills while working on a manufacturing PWA application. If the community finds this approach useful, I would be interested in contributing it more broadly back to OFBiz, potentially as a plugin or shared resource for designing and implementing enterprise UI applications. > > One of the biggest benefits of using these skills is that contributors without formal design backgrounds or front-end coding experience (like me) , could still produce predictable and usable enterprise UI (both design and code) with the help of coding agents. > > I would appreciate feedback on the following questions: > > Would the community find value in standardizing on the Ionic 8 Material UI Kit for Figma-based enterprise UI design? > Would a shared enterprise Ionic/Vue code pattern be useful for OFBiz contributors? > Would there be interest in turning this into a shared community resource or plugin for enterprise UI design and development? > > If there is interest, I am happy to share examples and details. > > Thanks > > -- > > Divesh Dutta > > www.hotwaxsystems.com >
