Genesis UI Generator is a Visual Studio Code extension that helps developers work with the Genesis platform. It offers several features to enhance the speed and efficiency of developers.
Open your Genesis project (root folder) in VS Code, before starting using the extension features;
Check if the source folder path (src) is correctly configured in VS Code extension's settings;
Configure OpenAI key on VS Code extension's settings to use Genesis View and some other features of File Management.
Features
Genesis View: This feature uses generative AI to generate code from a screenshot/mockup UI. It saves developers time and effort by automating the process of creating code from a visual representation. Additionally, it can generate all necessary files to deploy the new UI created into an existing application, taking into consideration the design system colors, fonts, and other visual elements identified from the screenshot.
File Management: This feature simplifies the creation of new routes, components, grid components, and other Genesis features. With this tool, developers can create files quickly and easily, following the Genesis platform's guidelines.
HTML Catalog: This feature provides an extensive catalog of Genesis web components, making it easier for developers to find and use components. Additionally, it allows developers to click on the components in the catalog to insert them directly into the VS Code editor, speeding up the development process.
Design System Management: This feature helps developers define colors, fonts, sizes, margins, paddings, and other visual definitions of a UI implementation, utilizing the Genesis design system. It streamlines the process of creating consistent and cohesive visual styles throughout the application.
Code Snippets: This feature provides an extensive catalog of typeScript and HTML code snippets for commonly Genesis web components and boilerplate code.
