Awesome GitHub RepositoriesVisual-to-Code Compilers

draw-a-ui is an AI vision UI generator and sketch-to-code tool that transforms hand-drawn sketches and digital wireframes into functional HTML and CSS. It serves as a mockup-to-HTML converter that interprets user interface layouts from images to produce corresponding web markup. The system utilizes vision-capable language models to automate the transition from visual design to web code. It employs a multimodal inference loop to process canvas snapshots and natural language instructions, generating structural layouts and responsive grid systems without the need for pre-defined component templa

Webstudio is a visual CMS and website builder that provides a visual development environment for designing and publishing websites. It functions as an AI-powered design tool, a REST and GraphQL API client, and an atomic CSS compiler. The platform distinguishes itself through generative AI capabilities for creating layout variants and refining visual styles from text prompts. It integrates a headless CMS workflow that maps external data sources to visual components and utilizes a specialized compiler to convert design tokens into deduplicated atomic CSS for optimized page load speeds. The sys

Ce projet est un générateur de mise en page CSS grid et un éditeur de mise en page visuel. Il sert d'outil de développement frontend qui permet la conception de structures de grille et la génération du code CSS correspondant pour des mises en page web dynamiques. L'outil permet le prototypage visuel de grille en permettant aux utilisateurs de définir des lignes, colonnes et positions d'éléments via une interface interactive. Ce processus produit des règles de feuille de style valides, supprimant le besoin de calculer manuellement les coordonnées de grille ou de suivre les tailles. Le logiciel couvre le design de mise en page CSS grid et le layout web responsive, fournissant les moyens de définir le placement des éléments de grille et de générer le code de style nécessaire pour des arrangements de page flexibles.

Blocks is a no-code website builder and component-based UI framework designed to create production-ready websites through a visual interface. It functions as a visual page builder that assembles layouts using pre-designed JSX component blocks. The system includes a visual theme engine used to manage brand identity through the definition of global colors and layout presets. This allows for the application of consistent visual themes across all pages of a site. The platform covers visual website building, JSX page construction, and brand identity management. It utilizes a schema-driven layout

Phoenix is a comprehensive web development suite that provides a browser-based code editor, an AI-powered coding assistant, and a live web previewer. It integrates a visual Markdown document editor and a web-based Git client, allowing users to write and manage HTML, CSS, and JavaScript across different devices and platforms. The environment features a visual UI design system that maps canvas manipulations directly to code and enables in-place CSS editing. It supports real-time change previews and responsive layout testing across multiple device breakpoints to verify rendering on phones, table