Tags
code-generation

Threads and library pages tagged with

code-generation

EfficientUICoder: Efficient MLLM-based UI Code Generation via Input and Output Token Compression

Multimodal Large Language Models have demonstrated exceptional performance in UI2Code tasks, significantly enhancing website development efficiency. However, these tasks incur substantially higher computational overhead than traditional code generation due to the large number of input image tokens and extensive output code tokens required. Our comprehensive study identifies significant redundancies in both image and code tokens that exacerbate computational complexity and hinder focus on key UI elements, resulting in excessively lengthy and often invalid HTML files. We propose EfficientUICoder, a compression framework for efficient UI code generation with three key components. First, Element and Layout-aware Token Compression preserves essential UI information by detecting element regions and constructing UI element trees. Second, Region-aware Token Refinement leverages attention scores to discard low-attention tokens from selected regions while integrating high-attention tokens from unselected regions. Third, Adaptive Duplicate Token Suppression dynamically reduces repetitive generation by tracking HTML/CSS structure frequencies and applying exponential penalties. Extensive experiments show EfficientUICoderachieves a 55%-60% compression ratio without compromising webpage quality and delivers superior efficiency improvements: reducing computational cost by 44.9%, generated tokens by 41.4%, prefill time by 46.6%, and inference time by 48.8% on 34B-level MLLMs. Code is available at https://github.com/WebPAI/EfficientUICoder.

discord-link-aggregator-cpl0's avatar

Discord Link Aggregator

@discord-link-aggregator-cpl0


View profile
Copy link
  Report member
9d
Library

Figma2Code: Automating Multimodal Design to Code in the Wild

Front-end development constitutes a substantial portion of software engineering, yet converting design mockups into production-ready User Interface (UI) code remains tedious and costly. While recent work has explored automating this process with Multimodal Large Language Models (MLLMs), existing approaches typically rely solely on design images. As a result, they must infer complex UI details from images alone, often leading to degraded results. In real-world development workflows, however, design mockups are usually delivered as Figma files, a widely used tool for front-end design, that embed rich multimodal information (e.g., metadata and assets) essential for generating high-quality UI. To bridge this gap, we introduce Figma2Code, a new task that advances design-to-code into a multimodal setting and aims to automate design-to-code in the wild. Specifically, we collect paired design images and their corresponding metadata files from the Figma community. We then apply a series of processing operations, including rule-based filtering, human- and MLLM-based annotation and screening, and metadata refinement. This process yields 3,055 samples, from which designers curate a balanced dataset of 213 high-quality cases. Using this dataset, we benchmark ten state-of-the-art open-source and proprietary MLLMs. Our results show that while proprietary models achieve superior visual fidelity, they remain limited in layout responsiveness and code maintainability. Further experiments across modalities and ablation studies corroborate this limitation, partly due to models' tendency to directly map primitive visual attributes from Figma metadata.

discord-link-aggregator-cpl0's avatar

Discord Link Aggregator

@discord-link-aggregator-cpl0


View profile
Copy link
  Report member
9d
Library

UICoder: Finetuning Large Language Models to Generate User Interface Code through Automated Feedback

Large language models (LLMs) struggle to consistently generate UI code that compiles and produces visually relevant designs. Existing…

discord-link-aggregator-cpl0's avatar

Discord Link Aggregator

@discord-link-aggregator-cpl0


View profile
Copy link
  Report member
9d
Library

Design2Code: Benchmarking Multimodal Code Generation for Automated Front-End Engineering

Design2Code is the first real-world benchmark for automated front-end engineering from visual designs. Researchers manually...

discord-link-aggregator-cpl0's avatar

Discord Link Aggregator

@discord-link-aggregator-cpl0


View profile
Copy link
  Report member
9d
Library

Locofy: Design to Code with AI

Locofy is an AI tool that converts your Figma and Penpot designs into production-ready code. It streamlines frontend development...

discord-link-aggregator-cpl0's avatar

Discord Link Aggregator

@discord-link-aggregator-cpl0


View profile
Copy link
  Report member
7d
Library
 Search Ask

Makeroom

RegisterLogin

Discussion

General
Tech

Library

Chevron Right Icon
Design
Resources
Websites
Articles
Chevron Right Icon
Web development
Cool Libraries
Tools
Resources
Papers and Studies
Articles
Language Models
Tech and Systems
Chevron Right Icon
Computers
Chevron Right Icon
Windows Tools and Modding
Windhawk
Raycast for Windows
Rainmeter
Plasma 6.7
Haiku: BeOS-Inspired Open-Source OS
Chevron Right Icon
Random fun stuff
Esoteric File Systems
Cool websites
Chevron Right Icon
Friends
Unity - Cheaterman's Bar
Chevron Right Icon
Storyden
Selfh.st
OpenAlternative
Microlaunch
Peerlist
Glama.ai
AlternativeTo
Brandfetch
Dokploy
PitchHut
Piefed Social
 Collections Links Members Roles

Makeroom

Icon

A small rag-tag assortment of makers, engineers and designers sharing mentoring, support and projects to work on at any stage in their career.

Join our Discord server!


Welcome to the Makeroom installation of Storyden!

This acts as a live demo of Storyden's forum and library software. On this site you'll find a curated collection of web and design resources as well as anything our members share.

Feel free to participate, this may be a demo but it's never wiped. That being said, Storyden is in active development and we encourage you to experiment respectfully as well as report any security issues you find to @Southclaws or by opening an issue.

Have an amazing day!

powered by storyden

Login