This is the README for Genesis UI Generator, 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 vscode, before starting using the extension features;
Check if the source folder path (src) is correctly configured in vscode extension's settings.
Configure OpenAI key on vscode extension's settings to use Genesis View;
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.
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.
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.
PS: You need to install literally-html to ensure proper functionality of snippets and html catalog.
