Open-source alternatives to Code Connect

Builder is a visual content management system and design-to-code tool that transforms visual layouts into functional code for frontend frameworks. It operates as a headless visual editor, allowing for the creation and modification of site layouts through a drag-and-drop interface. The system enables the conversion of design mockups into components for React, Vue, Svelte, and Qwik applications. It decouples layout and design management from the frontend rendering engine, allowing users to update and publish content changes to live applications without redeploying the entire codebase. The plat

This project is a design-to-development handoff guide and UI design audit framework. It provides a structured collection of requirements and checklists to verify that visual assets, component architectures, and technical specifications are ready for implementation. The framework focuses on standardizing web asset management through naming conventions and format verification for images, icons, and fonts. It includes specifications for responsive web design, ensuring that mobile and tablet layouts and fluid grid systems are defined for cross-device consistency. The guide covers quality assuran

sketch-measure is a design specification tool and design-to-code annotation utility for Sketch. It functions as an HTML design spec generator and asset export manager, creating technical handoff documentation and measurement annotations directly from design files. The tool generates interactive web viewers and standalone offline HTML pages that allow for the inspection of dimensions, styles, and design details. It includes capabilities for managing color palettes via XML export and capturing influence rectangles to ensure exported image dimensions account for shadows and borders. The system

Figma-Context-MCP is a design-to-code automation tool that functions as a server for the Model Context Protocol. It acts as a bridge between visual design platforms and development environments, enabling large language models to access design file metadata and component properties directly. The project distinguishes itself by providing a standard-compliant interface that translates design specifications into structured data. By extracting layout and styling information, it facilitates the programmatic conversion of design tokens and component requirements into actionable code structures. Thi

Alva is a code-based prototyping tool and living prototype framework used to build interactive interfaces. It functions as a component-driven design system where application concepts are realized as functional code components rather than static mockups. The project facilitates a design-to-code workflow, enabling the creation of living component documentation and the validation of frontend concepts. It allows for rapid UI prototyping by composing reusable code building blocks to test design ideas and technical implementations. The environment supports component-based UI composition and declar

Semi Design is a React UI component library and design token system used to build web application frontends. It provides a collection of pre-built interface elements and a framework of visual constants to maintain consistent branding across a product. The project features a design-to-code workflow that converts visual design drafts into production-ready React code and stylesheets. It includes an internationalization framework for adapting interfaces to different languages and text layouts, as well as a web component wrapper to isolate UI elements for use in SDKs and browser plugins. The libr

Onlook is an integrated development environment designed for building user interfaces through a combination of visual manipulation and direct code synchronization. It provides a unified workspace where developers can modify application components, layouts, and styles within a graphical interface, with all changes automatically reflected in the underlying source code. By maintaining a live, bidirectional link between the rendered interface and the codebase, the platform ensures that visual edits are accurately translated into production-ready syntax. The platform distinguishes itself through i

This project is a plugin framework and agentic workflow library designed to connect large language models to professional toolstacks. It provides a system for integrating language models with external data warehouses, CRMs, and other enterprise software to retrieve and manipulate real-time business data. The framework enables the automation of specialized professional tasks through a file-based plugin definition system. It allows for the customization of domain expertise and plugin behavior to align with internal company processes, supported by an enterprise data connector that links models t

Style Dictionary is a cross-platform style generator and design token build system. It converts a single source of design variables into multiple output formats and platform-specific files to maintain a consistent source of truth across different interfaces. The system functions as a multi-format style orchestrator that merges modular token sources and transforms them based on target platform requirements. It uses a scriptable transform interface to modify token values and names, allowing for the automation of design system styles for web, iOS, and Android applications. The build process is

react-sketchapp is a design system automation tool that translates React components into native Sketch design layers. It functions as a custom renderer that maps a virtual component tree to a design canvas, allowing for the programmatic generation and updating of design files from source code. The project provides a framework for building custom design utilities and automation scripts by treating the visual canvas as a programmable target. It includes a system for fetching external data to populate design components, enabling the creation of high-fidelity mockups and data-driven prototypes.

Made-With-ML is an automated documentation generator and developer experience platform designed to transform source code into structured, searchable reference websites. It functions as a codebase intelligence tool that parses implementation details to provide clear explanations of logic and data requirements. The system distinguishes itself by leveraging language-level type annotations and structured code comments to generate interface specifications. By utilizing static analysis to extract metadata, it automates the transformation of docstrings into web-ready documentation, ensuring that tec

scss-lint is a static analysis tool and configurable style validator for SCSS stylesheets. It identifies syntax errors and enforces coding style consistency in CSS preprocessor files before they are compiled. The project provides an extensibility system for loading custom linting rules from local directories or external libraries. It allows for the definition of project-specific style standards and supports the creation of baseline configurations to facilitate incremental code cleanup. The tool includes capabilities for source control management hook integration and source preprocessing via

Brick Design is a low-code page builder framework used to create drag-and-drop visual editors that generate production-ready layout and styling code for user interfaces. It functions as a visual layout engine and UI component orchestrator, providing the tools necessary to manage component constraints, nesting rules, and visual property configurations. The framework includes a dynamic template generator that utilizes logic rendering and expression variables to create reusable, data-driven page templates. It also operates as a multi-device design tool, offering viewport switching and adaptive s

This project provides a collection of coding standard specifications, style guides, and configuration assets used to define automated rules for static code analysis in Ruby. It serves as a centralized set of RuboCop configurations and static analysis rules to ensure consistent syntax and idiomatic usage across a codebase. The project establishes a comprehensive Ruby style guide that defines naming conventions, indentation, and structural requirements. It utilizes a pluggable linting engine to enforce these standards through a defined set of patterns and constraints. The capability surface co

Open Design is an AI design orchestration platform and LLM agent workspace designed for generating prototypes, presentations, and motion graphics. It functions as a local-first environment that integrates various command-line AI agents and coding tools into a unified design workflow, allowing users to migrate design specifications into brand-compliant source code. The project is distinguished by its ability to enforce visual consistency through a design system manager that defines brand contracts and tokens using Markdown. It features a specialized motion graphics generator that converts HTML

Polymer is a custom element framework and web component library used to build reusable, encapsulated custom elements that function as native browser components. It serves as a system for defining public properties and attributes that trigger automatic state observation and updates within the DOM. The project functions as a data binding library, providing a mechanism to synchronize state between internal component properties and external models via two-way data binding. It covers the development of frontend component libraries and web component architecture, enabling the creation of modular u

Screenshot-to-code is an AI visual frontend generator that translates images, design mockups, and screenshots into structured HTML, CSS, and Tailwind markup. It functions as a design-to-code converter that uses large language models and neural networks to transform visual elements into functional web page layouts. The tool automates the frontend design process by converting static mockups into website code, facilitating rapid UI prototyping and the generation of static website structures. It bridges the gap between visual design assets and frontend development by translating image-based layou

Vizro is a low-code Python framework for building production-ready data visualization applications. It functions as a UI orchestrator that allows users to define multi-page analytical dashboards through structured configurations in Python, YAML, or JSON, reducing the need for extensive frontend engineering. The project distinguishes itself through generative AI integration, utilizing a model context protocol server to translate natural language descriptions into validated dashboard configurations, charts, and layouts. It also features a decoupled data cataloging system that separates data sou

MPX is a cross-platform framework designed to build applications for multiple mini-program ecosystems and the web from a single codebase. It utilizes a static transpilation pipeline to transform source code into platform-specific bundles, employing a single-file component system that encapsulates templates, logic, and styles. The framework provides a reactive state management system that automatically synchronizes application data with the user interface through computed properties and watchers. The project distinguishes itself through a robust build-time toolchain that supports sub-package p

FigmaToCode is a design-to-code converter and frontend code generator that transforms Figma design files into responsive source code. It functions as a multi-platform UI compiler, mapping visual design elements to structural constraints for web and mobile environments. The system supports multi-target syntax emission to produce code for HTML, Tailwind CSS, Flutter, and SwiftUI. It automates frontend styling by converting design system variables and visual effects into theme-consistent code across these different frameworks. The tool handles responsive UI implementation by translating design

This project is a backend service that implements the Language Server Protocol to provide IDE-integrated intelligence for PHP development. It functions as a static analysis tool that parses source code to enable advanced editor features, including autocompletion, symbol navigation, and definition resolution. The server distinguishes itself through its ability to operate within isolated containers and remote development environments. By utilizing a virtual file system abstraction and flexible communication protocols, it maintains project-wide symbol indexing and code analysis even when files a

Puck is a visual page editor and layout tool for React. It functions as a CMS page builder and component orchestrator, allowing for the design and arrangement of structured content pages through a drag-and-drop interface. The system utilizes a pluggable component registry to integrate external React components into the visual canvas. It employs schema-driven mapping and JSON-based serialization to store and persist page structures as portable data objects. The platform covers the domain of no-code page building and CMS content management, providing a visual reconciliation system to synchroni

The Kotlin Language Server is a static code analysis tool that provides real-time intelligence for Kotlin projects. By implementing the Language Server Protocol, it enables developers to access professional-grade development features, such as code completion, diagnostics, and navigation, within any compatible text editor. The project distinguishes itself through an architecture that maintains persistent, in-memory compiler instances to facilitate rapid, incremental recompilation during active development. It supports remote hosting via TCP, allowing editors to connect to centralized analysis

Panel is a Python data application framework used to build interactive dashboards and reactive user interfaces by connecting data visualizations, widgets, and callbacks. It functions as a reactive UI library that synchronizes application state with interface updates based on user interactions. The project distinguishes itself by offering multiple execution models, including a FastAPI-based web application server for scalable session management and a WebAssembly compiler that enables Python applications to run directly in the browser without a backend server. It also includes a specialized too

lua-language-server is a static analysis tool and type checker for the Lua language that implements the Language Server Protocol. It provides a system for detecting type mismatches, unused code, and logic errors in source files. The project features an inference-based type system that deduces variable types and supports optional annotations and meta files to enforce type safety. It allows for the definition of custom types and function signatures, including support for overloads and member visibility controls. The server provides a broad set of IDE capabilities, including real-time code auto

This project is a static analysis tool and linter for Elixir designed to enforce a unified visual structure across codebases. It serves as a specification for code formatting, naming conventions, and documentation standards. The tool provides a standardized system for casing and prefixes used in files, functions, and variables. It also establishes guidelines for formatting module and function descriptions to ensure consistent technical documentation. The project covers a broad range of code quality areas, including the organization of module layouts, the implementation of commenting patterns

This toolkit provides a suite of tools, templates, and guidelines for preparing software copyright registration documents required by Chinese authorities. It automates the creation of necessary legal filings and technical documentation to facilitate software copyright registration within the Chinese regulatory system. The system includes a code metric calculator to extract quantitative data and line counts from source files for application forms. It also features a legal compliance checklist and verification utilities to ensure submission materials adhere to official formatting, pagination, a