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

Dieses Projekt ist ein CSS-Grid-Layout-Generator und visueller Layout-Editor. Es dient als Frontend-Entwicklungstool, das den Entwurf von Grid-Strukturen und die Generierung des entsprechenden CSS-Codes für dynamische Web-Layouts ermöglicht. Das Tool ermöglicht visuelles Grid-Prototyping, indem Benutzer Zeilen, Spalten und Elementpositionen über ein interaktives Interface definieren können. Dieser Prozess erzeugt gültige Stylesheet-Regeln, wodurch die Notwendigkeit entfällt, Grid-Koordinaten manuell zu berechnen oder Größen nachzuverfolgen. Die Software deckt CSS-Grid-Layout-Design und responsives Web-Layouting ab und bietet die Möglichkeit, die Platzierung von Grid-Elementen zu definieren und den notwendigen Style-Code für flexible Seitenanordnungen zu generieren.

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