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

该项目是一个 CSS 网格布局生成器和可视化布局编辑器。它作为一个前端开发工具，允许设计网格结构并为动态 Web 布局生成相应的 CSS 代码。 该工具通过允许用户通过交互式界面定义行、列和项目位置来实现可视化网格原型设计。此过程生成有效的样式表规则，无需手动计算网格坐标或跟踪尺寸。 该软件涵盖了 CSS 网格布局设计和响应式 Web 布局，提供了定义网格项目放置并为灵活页面排列生成必要样式代码的方法。

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