Testing and Implementing Chinese Open-Source LLMs for Frontend Code Generation

Testing and Implementing Chinese Open-Source LLMs for Frontend Code Generation

The focus of Large Language Models (LLMs) in code generation is rapidly shifting from benchmark competitions to practical business implementation. When developers evaluate domestic open-source models, their primary concern is not the volume of code generated, but whether the code is directly usable, easy to modify, and secure. This article conducts an end-to-end evaluation using real frontend project requirements, testing mainstream open-source models like Qwen2.5-Coder and DeepSeek-Coder-V2. Based on the React 18 + TypeScript tech stack, we test three typical scenarios—login pages, list pages, and form pages—and provide actionable implementation guidelines.

1. Evaluation Background and Tech Stack

For this test, we selected a medium-complexity enterprise frontend project as the input requirement, encompassing: a login page with a carousel, a list page with multi-dimensional filtering, and a form page with linked validation. The test did not mandate a specific framework, allowing the models to decide the tech stack autonomously. Ultimately, all outputs unified around React 18 + TypeScript + Ant Design 5.x. The test environment utilized locally deployed Qwen2.5-Coder-32B-Instruct and DeepSeek-Coder-V2-Instruct, with a single generation taking approximately 3 to 8 minutes, depending on hardware and concurrency strategies. This setup effectively exposes the true capability of the models across the entire pipeline from requirements to a runnable engineering project.

2. Testing Three Page Types: Generation Process and Gaps

For a quick comparison, the table below presents the results across four core dimensions:

Page Type	Completion Rate	Logic Accuracy	Integrability	Generation Time
Login Page (Carousel + Form)	High (90%+)	High, accurate component invocation	Directly modifiable and integrable	~3 mins
List Page (Multi-filter + Interaction)	Medium (70%)	Low, incomplete filter linkage logic	Requires significant logic supplementation	~6 mins
Form Page (Linked Validation)	Medium (65%)	Low, missing dynamic rules	Requires manual validation supplementation	~7 mins

1. Login Page: Basic Assembly Standards Met, Usable as Scaffold
The models accurately identified the carousel requirement, invoked the Ant Design Carousel component for dynamic switching, and generated a basic form with username/password fields. Overall, there were no obvious logical omissions. Developers can quickly conduct secondary development on this basis, reducing initial setup time by approximately 60%.

2. List Page: Understanding Drops in Multi-Condition Linkage
The requirement specified that “selecting a city + industry should auto-refresh data.” The models built the filter component UI but failed to implement the state updates and API re-fetch logic required when filter parameters change. This is a common shortcoming of current models in long-context state management reasoning—they recognize that “filter boxes belong here” but cannot deduce “how data changes when filters change.”

3. Form Page: Insufficient Extraction of Implicit Constraints
For requirements like “if Field A selects a certain value, Field B becomes required and needs regex validation,” the models only rendered static forms. They did not generate dynamic validation rules or linked disable logic. This indicates that the models’ ability to recognize strong implicit constraints in natural language requires further improvement.

3. Style and Performance: Engineering Usability Over UI Aesthetics

• UI Style: The generated pages lean towards an “engineering minimalist style.” The structure is clear but lacks design appeal, falling short of mature UI library templates.
• Generation Speed: From requirement input to an accessible address, the process took 3 to 8 minutes, correlated with model inference resources and concurrency strategies.
• Core Positioning: The current value lies in improving engineering initialization efficiency, rather than replacing UI design or complex business development.

4. Benchmark Analysis: The Core Gap Lies in Understanding Depth

Compared horizontally with more mature code generation solutions in the industry, the gap in basic page generation is negligible. However, in complex list filtering and form validation scenarios, top-tier solutions demonstrate higher “understanding precision” of field structures and business flows, alongside faster inference speeds. This means the competitive focus for the next phase has shifted from syntax accuracy to the depth and precision of business logic understanding.

5. Open-Source Value and Security Considerations

The open-source nature of these models provides a foundation for enterprises to build self-contained AI R&D systems, but the following risks and opportunities must be noted:

• Breaking the Technology Black Box: Enterprises can privately deploy these models, but they must strictly comply with data compliance requirements, model license agreements, and internal security audit protocols to prevent sensitive data leakage.
• Empowering Local R&D Platforms: By fine-tuning the models with internal code standards and component libraries, the drop in business logic understanding can be significantly mitigated.
• Community Co-creation: Developer participation in testing and feedback can accelerate capability evolution in complex scenarios.

6. Implementation Checklist for Developers

Based on the test results, developers are advised to adopt the following “human-machine collaboration” workflow:

1. Specify Tech Stack Constraints: Define the framework version and component library in the prompt to prevent inconsistencies caused by the model choosing its own.
2. Split Complex Requirements into Single-Point Prompts: Break down “list page filtering + pagination + sorting” into three independent generations to reduce context complexity.
3. Manually Review Core Logic: Focus on checking business-critical paths such as filter linkage, form validation, and permission checks.
4. Establish Internal Evaluation Benchmarks: Regularly compare model versions using the same set of requirements to track capability evolution.
5. Focus on Compliance and Licensing: Confirm agreement terms before using open-source models. Private deployments must pass security audits.

As the understanding depth of open-source models continues to evolve, the trend of AI participating deeply throughout the entire software engineering lifecycle is irreversible. Developers must transition from pure coders to “AI R&D Architects” to better adapt to this technological paradigm shift.