Optimizing Retrieval-Augmented Generation-Assisted User Interface Generation: A Comparative Study on Data Standardization for Brand Visual Consistency ^†

Abstract

The advancement of large language models (LLMs) has facilitated the generation of user interface (UI) code from natural language prompts, thereby supporting low-code development paradigms. Despite these capabilities, ensuring brand consistency remains a significant challenge, particularly when style data is unstructured. We investigated the impact of three data formats—plain text, structured cascading style sheets (CSS), and structured natural language (NL) guide—on the effectiveness of retrieval-augmented generation (RAG) in producing brand-consistent UI components, with No-RAG serving as the baseline for comparison. The findings indicate that RAG substantially enhances brand alignment. Although the structured NL guide yielded the highest CSS recall rate, participants expressed a preference for outputs derived from plain text, suggesting that the optimal data format may depend on specific design contexts and evaluative criteria.

1. Introduction

With the rapid advancement of generative AI technologies, the use of large language models (LLMs) for front-end code generation has attracted increasing attention and presents new opportunities for low-code/no-code (LCNC) interface development [1]. Current automated user interface (UI) code generation techniques generally fall into two categories: image-to-code methods [2,3,4] and text-to-code methods [5,6]. These approaches offer greater flexibility in interface design and development, gradually facilitating the integration between design and engineering fields.

However, maintaining brand visual consistency throughout the generation process remains a critical challenge. Inconsistent visual outputs not only undermine the professional image of a product but also increase the collaborative burden between designers and engineers. Although retrieval-augmented generation (RAG) assists LLMs by providing external style references, its effectiveness heavily depends on the quality of the input data. Therefore, standardizing the input data to enable LLMs to reliably generate brand-consistent interfaces has become a key factor in improving the visual consistency of generated outputs.

Based on the previous study results, this study aims to investigate how data standardization strategies can optimize RAG-assisted UI code generation. We compared the effects of different standardized data formats on brand visual consistency and proposes a retrieval-augmented, standardized data structure as a reference framework for brand-oriented UI generation tasks.

2. Related Work

2.1. Data Structure and Applications of RAG

Compared to image-to-code methods, text-based input offers a lower entry barrier, making it particularly appropriate for LCNC applications. However, LLMs still have limited capability in capturing individual brand styles. RAG has thus emerged as a promising solution. Patel et al. [6] integrated Figma with a retrieval mechanism to construct a design knowledge base that supports LLMs in UI code generation, demonstrating the potential of this approach.

Recent studies have explored how the structure of retrieved data affects RAG performance [7]. For example, they demonstrated that using the original HTML structure, rather than converting it to plain text, significantly enhances the semantic understanding and response accuracy of RAG-based question-answering systems. Although their study focused on quality assurance (QA) tasks, their findings offer valuable theoretical insights for data format design in other RAG applications, including this study.

2.2. Brand Visual Consistency

Visual consistency is critical in digital products, as it effectively enhances users’ trust in websites, improves learning efficiency, and contributes to overall user experience [8,9]. For example, SAP, a German-based multinational software company, has implemented Pattern-Based UI and a model-based development environment to translate internal interface guidelines into programmable verification rules [10]. This approach enables systematic interface consistency checks, significantly reducing manual effort and correction costs in later quality control stages. This practice demonstrates that the integration of standardized data plays a crucial role in maintaining large-scale interface consistency within enterprise environments.

2.3. Style Verification

In information security, CSS style properties have been used as a quantitative basis for assessing visual similarity, particularly in distinguishing phishing websites from legitimate ones [11]. Although these applications differ from the context of UI generation, relevant studies have confirmed that CSS properties possess the ability to identify visual styles and can serve as a reliable foundation for detecting visual consistency.

We adopted this extended application by using style property matching as a quantitative basis for evaluating visual consistency and further analyzes the impact of data standardization formats on the consistency between the generated results and brand styles.

3. Materials and Methods

3.1. Experimental Setup

We investigated the impact of different data formats on brand visual consistency in RAG-assisted UI code generation. Therefore, the experiment focuses on variations in data formats rather than differences in the performance of the generation model itself. To control for model-related variables, we used bolt.new (v1 Agent) [12] as the generation platform and selects the official Starbucks website [13] as the experimental material. The website was chosen due to its strong brand identity and clear structural design, which facilitates subsequent analysis and comparison of visual style consistency.

The experiment is designed with the No-RAG condition as the baseline, and three data formats are set as independent variables.

• No-RAG (baseline): No external knowledge documents are provided. The model generates UI code based solely on the prompt.
• Plain text: Brand style descriptions are generated by a GPT model based on screenshots of the official website. The content is neither manually revised nor structured with explicit attribute mappings.
• Structured CSS: Brand styles are categorized by UI components and organized into JSON-formatted structured data using CSS properties, as shown in

  Table 1. Generated JSON metadata for button styling.

  UI Component	Attribute	Value
  	background-color	rgb(255, 0, 0)
  button	font-size	14 px
  	border-radius	8 px

  .
• Structured NL guide: Brand style descriptions are written in natural language. For example: “The button background color is rgb(255, 0, 0), the font size is 14 px, and the border radius is 8 px.” These descriptions are stored in JSON format.

3.2. CSS Recall Rate

To evaluate whether the generated code aligns with the brand’s visual style specifications, we calculated the CSS recall rate based on specific UI components. This metric is used to measure the proportion of overlapping CSS properties between the generated code and the brand-defined styles. In this context, true positives (TP) represent the number of CSS properties correctly matching the brand specifications, while false negatives (FN) refer to the properties defined in the brand styles but missing from the generated code. The recall rate is calculated using the following formula:

$$\mathrm{R}\mathrm{e}\mathrm{c}\mathrm{a}\mathrm{l}\mathrm{l}={\displaystyle \frac{\mathrm{T}\mathrm{P}}{\mathrm{T}\mathrm{P}+\mathrm{F}\mathrm{N}}}$$

(1)

The reference data used were manually compiled by the researchers based on the official brand website’s code. Six common UI components, namely, A, B, C, D, E, and F, were selected, and their visual properties were defined for comparison. The property definitions specifically focus on visual styles and exclude functional attributes such as z-index and cursor. For example, for the button component, the following data were used.

• background-color;
• border-radius;
• color;
• font-weight;
• font-family;
• font-size;
• text-align.

If the generated result successfully reproduces only five out of the seven defined properties, the recall rate is calculated accordingly.

$$\mathrm{R}\mathrm{e}\mathrm{c}\mathrm{a}\mathrm{l}\mathrm{l}={\displaystyle \frac{5}{5+2}}=0.714$$

(2)

Other UI components follow the same principle, with their respective sets of style properties defined for comparison. To improve matching accuracy, standardization processes were applied, including unit unification (e.g., pixel and root em) and color conversion between RGB and Hex formats. To minimize misjudgments caused by different expression formats, no tolerance thresholds were set for color code discrepancies, and visual proximity was not considered, so exact matches of both property names and values were accepted.

3.3. Interview-Based Evaluation

To address the limitations of quantitative metrics in capturing users’ subjective judgments and visual perceptions, four participants with relevant professional backgrounds were invited to join the study. The participants included two UI/user experience designers and two front-end engineers with practical experience. Each participant completed the following two tasks.

• Similarity ranking: The participants ranked the four generated versions based on their perceived similarity to the brand style. All versions were presented under blind conditions to prevent potential bias.
• Semi-structured interview [14]: After completing the ranking task, each participant participated in a semi-structured interview lasting approximately 15–20 min. The interview aimed to explore their evaluation criteria, key considerations, and areas of disagreement. Example questions included the following.
  • “Which version do you think best aligns with the brand style? Why?”
  • “Were you hesitant when ranking the middle two versions? What were the differences between them?”
  • “What design elements do you primarily focus on when evaluating style consistency?”

In this exploratory study, the small sample size (n = 4) was used primarily to complement the quantitative evaluation, and no inferential statistics were conducted.

4. Results

4.1. Weighted Recall of CSS Styles

We took into account the different occurrence counts of UI components on the page. To account for this, the weighted recall of CSS styles was calculated for each data format, using the component occurrence counts as weights. The calculation formula is as follows.

$$\mathrm{W}\mathrm{e}\mathrm{i}\mathrm{g}\mathrm{h}\mathrm{t}\mathrm{e}\mathrm{d}\mathrm{R}\mathrm{e}\mathrm{c}\mathrm{a}\mathrm{l}\mathrm{l}={\displaystyle \frac{{\sum }_{i=1}^n\left({\mathrm{C}\mathrm{o}\mathrm{u}\mathrm{n}\mathrm{t}}_i\times {\mathrm{R}\mathrm{e}\mathrm{c}\mathrm{a}\mathrm{l}\mathrm{l}}_i\right)}{\sum _{i=1}^n{\mathrm{C}\mathrm{o}\mathrm{u}\mathrm{n}\mathrm{t}}_i}}$$

(3)

Here, ${\mathrm{R}\mathrm{e}\mathrm{c}\mathrm{a}\mathrm{l}\mathrm{l}}_i$represents the CSS recall rate of the i-th type of component, and ${\mathrm{C}\mathrm{o}\mathrm{u}\mathrm{n}\mathrm{t}}_i$ refers to the number of occurrences of that component on the page. This weighted approach provides a more accurate reflection of the model’s overall ability to reproduce the visual styles of the interface.

Table 2. Weighted recall results for each data format.

Data Format	Weighted Recall
No-RAG	0.29
Plain text	0.31
Structured CSS	0.48
Structured NL guide	0.75

summarizes the weighted recall results for the four data formats.

Overall, providing brand-related style references significantly improves the consistency of the generated UI code. Under the No-RAG condition, where no reference materials were provided, the weighted recall was the lowest (0.29). The generated outputs in this condition often defaulted to generic styles and lacked brand distinctiveness. Although the plain text condition (0.31) achieved a slightly higher recall than No-RAG, it was insufficient to consistently guide the model toward stable brand styling. The structured CSS condition (0.48), while not achieving a high score, demonstrated a noticeable alignment with the brand’s visual style, particularly in components such as buttons, navigation bars, and typography, where style reproduction was more stable. The structured NL guide condition achieved the best performance (0.75), indicating that semantic brand style descriptions can effectively assist the model in generating visually consistent results aligned with brand expectations.

4.2. Interview Results

The subjective ranking results of the four generated versions are presented in

Table 3. Subjective ranking of the generated pages for each data format.

Participant	Subjective Ranking (from Highest to Lowest)
Designer A	Plain Text > Structured CSS > Structured NL Guide > No-RAG
Designer B	Structured CSS > Plain Text > Structured NL Guide > No-RAG
Engineer A	Structured NL Guide > Structured CSS > Plain Text > No-RAG
Engineer B	Structured CSS > Structured NL Guide > Plain Text > No-RAG

. All participants consistently agreed that the pages generated under the No-RAG condition exhibited loose visual structure and lacked brand characteristics, ranking it the lowest in all cases. Although there were some variations in the top two rankings among different roles, the structured CSS condition was generally preferred by three participants, as it demonstrated stable performance and a clear structural layout. The plain text condition was favored by one designer for its stronger semantic alignment with the brand’s overall atmosphere.

Although the Structured NL Guide condition achieved the highest quantitative score, it did not consistently receive the highest subjective rankings. This suggests that while the descriptive style provides valuable reference information, it may still fall short in detail translation or semantic precision in practical application.

In addition to the ranking task, participants agreed that color was the primary criterion for evaluating brand consistency, followed by layout structure. Both designers specifically emphasized that font style and size significantly influence brand perception. Additionally, three participants highlighted that the consistency of the footer module was one of their key points of observation. The participants’ responses included the following.

• Designer A: “I quickly assess the brand style based on the color scheme of the homepage.”
• Designer B: “Starbucks always uses sans-serif fonts for major headings. This is one of my key indicators.”
• Engineer A: “Color is the primary factor, followed by the layout style.”
• Engineer B: “The footer should not differ too much from the official website, so I always check the footer style.”

The interview results provided valuable subjective insights beyond the quantitative evaluation and further emphasized that layout and color are critical factors in the perception of brand consistency.

4.3. Integrated Analysis and Preliminary Observations

We integrated quantitative metrics and qualitative data to provide a comprehensive analysis. Overall, providing reference materials significantly improves the visual quality of the generated outputs. However, discrepancies were observed between the quantitative scores and the subjective rankings, reflecting differences in style characteristics and users’ subjective perceptions.

The structured NL guide condition achieved the highest style recall rate (0.75), yet participants’ subjective rankings showed a different trend. Although the plain text condition yielded a lower recall rate, it was rated by both designers as the version most aligned with the brand style, suggesting that even unstructured descriptions can effectively guide the model to generate visually appropriate outputs. In the recall rate calculation, tolerance thresholds were not applied, which contributed to lower overall scores.

Notably, while the structured NL guide successfully applied the brand’s designated color palette, it mistakenly used the secondary color, light green, as the primary homepage background, failing to reflect the brand’s intended dark green. The No-RAG condition was consistently rated the lowest by all participants, as it provided no brand-related references and generated outputs lacking brand distinctiveness, as illustrated in Figure 1.

5. Limitations

Although we verified the potential of RAG in generating brand-consistent UI code, several limitations remain.

• Limited CSS property selection: We only examined a subset of representative static CSS properties, such as color, font size, border radius, and spacing, without covering layout details, animations, or interactive styles.
• Static analysis only: The evaluation was based solely on static code analysis and does not include dynamic behaviors such as hover states, click animations, or transitions, which may overlook style inconsistencies in user interactions.
• Small sample size for subjective evaluation: The subjective ranking involved only four participants with design or front-end backgrounds, which may limit the generalizability of the findings.

6. Conclusions

We compared the No-RAG condition with three different data formats to evaluate their effects on brand visual consistency in UI code generation. The results indicate that data formats significantly influence generation quality and style consistency, underscoring the critical role of data structure in guiding generation behaviors. This finding aligns with those of Ref. [7], which emphasized that structured data representations can enhance model output quality and play a strategic role in generation tasks. However, structured formats, such as HTML, do not consistently outperform plain text across all scenarios. This suggests that while data structuring is generally beneficial, its effectiveness may vary depending on specific task contexts and input characteristics. These results support the principle that data format selection should be aligned with specific task requirements and contribute to the development of generative UI collaboration tools and provide empirical and theoretical support for future data design strategies.