6 مستودعات
Engines that translate visual canvas layouts and style configurations into production-ready HTML and CSS code.
Distinct from Visual-to-Code Navigators: Distinct from visual navigators or generic translation tools; specifically focuses on converting a design canvas to frontend code.
Explore 6 awesome GitHub repositories matching web development · Visual-to-Code Compilers. Refine with filters or upvote what's useful.
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
Implements an engine that translates visual canvas layouts and sketches into production-ready HTML and CSS code.
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
Converts drag-and-drop canvas arrangements and style configurations into production-ready HTML and CSS.
Ships a visual-to-code compiler that translates canvas layouts into production-ready React code.
This project is a CSS grid layout generator and visual layout editor. It serves as a frontend development tool that allows for the design of grid structures and the generation of corresponding CSS code for dynamic web layouts. The tool enables visual grid prototyping by allowing users to define rows, columns, and item positions through an interactive interface. This process produces valid stylesheet rules, removing the need to manually calculate grid coordinates or track sizes. The software covers CSS grid layout design and responsive web layouting, providing the means to define grid item pl
Translates a visual 2D grid representation into production-ready CSS stylesheet code for export.
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
Converts drag-and-drop interface states into static or dynamic production-ready source code.
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
Translates manipulations on a visual canvas directly into corresponding updates in the underlying HTML and CSS files.