https://github.com/flyeric0212/claude-3.5-vs-3.7-code-comparison

Compare the front-end capabilities of Claude 3.7 and Claude 3.5 in Cursor.
https://github.com/flyeric0212/claude-3.5-vs-3.7-code-comparison

Last synced: about 2 months ago
JSON representation

Compare the front-end capabilities of Claude 3.7 and Claude 3.5 in Cursor.

• Host: GitHub
• URL: https://github.com/flyeric0212/claude-3.5-vs-3.7-code-comparison
• Owner: flyeric0212
• License: mit
• Created: 2025-03-02T06:16:47.000Z (3 months ago)
• Default Branch: main
• Last Pushed: 2025-03-29T15:31:28.000Z (about 2 months ago)
• Last Synced: 2025-03-29T16:28:34.408Z (about 2 months ago)
• Language: JavaScript
• Size: 1.78 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Claude 3.5 vs 3.7 Code Comparison

> **Tutorial Link**: [https://flyeric.top/archives/claude-3.5-vs-3.7-code-comparison](https://flyeric.top/archives/claude-3.5-vs-3.7-code-comparison)

This repository contains a comparison of frontend programming capabilities between Claude 3.5 and Claude 3.7 AI models in the Cursor editor environment. The project aims to evaluate and showcase the differences in code generation, problem-solving approaches, and overall effectiveness of these AI models in frontend development tasks.

## Project Structure

The repository is organized into two main directories:

- `claude3.5/` - Contains code generated by Claude 3.5

- `claude3.7/` - Contains code generated by Claude 3.7

## Test Categories

Each AI model was tested on three different frontend development tasks:

### 1. Frontend Replication

Recreating the Cursor official website UI from screenshots, testing the AI's ability to translate visual designs into functional code.

claude 3.5:

![image-20250301下午72015695](https://pic-bed-1256249917.cos.ap-chengdu.myqcloud.com/uPic/image-20250301%E4%B8%8B%E5%8D%8872015695.png)

claude 3.7:

![image-20250301下午84237225](https://pic-bed-1256249917.cos.ap-chengdu.myqcloud.com/uPic/image-20250301%E4%B8%8B%E5%8D%8884237225.png)

![image-20250301下午84305134](https://pic-bed-1256249917.cos.ap-chengdu.myqcloud.com/uPic/image-20250301%E4%B8%8B%E5%8D%8884305134.png)

...

![image-20250301下午84432714](https://pic-bed-1256249917.cos.ap-chengdu.myqcloud.com/uPic/image-20250301%E4%B8%8B%E5%8D%8884432714.png)

### 2. Traditional Framework Application

Implementing a login page using HTML, CSS, and JavaScript, evaluating the AI's proficiency with fundamental web technologies.

claude 3.5:

![image-20250301下午85733698](https://pic-bed-1256249917.cos.ap-chengdu.myqcloud.com/uPic/image-20250301%E4%B8%8B%E5%8D%8885733698.png)

claude 3.7:

![image-20250301下午90148157](https://pic-bed-1256249917.cos.ap-chengdu.myqcloud.com/uPic/image-20250301%E4%B8%8B%E5%8D%8890148157.png)

### 3. Single Page Application

Developing a blog application using React, assessing the AI's capability to work with modern frontend frameworks and create interactive user interfaces.

claude 3.5:

![image-20250301下午103150854](https://pic-bed-1256249917.cos.ap-chengdu.myqcloud.com/uPic/image-20250301%E4%B8%8B%E5%8D%88103150854.png)

![image-20250301下午103223476](https://pic-bed-1256249917.cos.ap-chengdu.myqcloud.com/uPic/image-20250301%E4%B8%8B%E5%8D%88103223476.png)

![image-20250301下午103246207](https://pic-bed-1256249917.cos.ap-chengdu.myqcloud.com/uPic/image-20250301%E4%B8%8B%E5%8D%88103246207.png)

![image-20250301下午103301981](https://pic-bed-1256249917.cos.ap-chengdu.myqcloud.com/uPic/image-20250301%E4%B8%8B%E5%8D%88103301981.png)

claude 3.7:

![image-20250301下午91727614](https://pic-bed-1256249917.cos.ap-chengdu.myqcloud.com/uPic/image-20250301%E4%B8%8B%E5%8D%8891727614.png)

![image-20250301下午91805328](https://pic-bed-1256249917.cos.ap-chengdu.myqcloud.com/uPic/image-20250301%E4%B8%8B%E5%8D%8891805328.png)

![image-20250301下午91856270](https://pic-bed-1256249917.cos.ap-chengdu.myqcloud.com/uPic/image-20250301%E4%B8%8B%E5%8D%8891856270.png)

![image-20250301下午91929079](https://pic-bed-1256249917.cos.ap-chengdu.myqcloud.com/uPic/image-20250301%E4%B8%8B%E5%8D%8891929079.png)

![image-20250301下午92358376](https://pic-bed-1256249917.cos.ap-chengdu.myqcloud.com/uPic/image-20250301%E4%B8%8B%E5%8D%8892358376.png)

## Purpose

This comparison project serves to:

- Highlight the strengths and limitations of each Claude AI version

- Provide insights into how AI capabilities have evolved between versions

- Demonstrate practical applications of AI-assisted coding in frontend development

- Serve as a reference for developers interested in AI-powered development tools

## Getting Started

To explore the code samples:

1. Navigate to either the `claude3.5/` or `claude3.7/` directory

2. Each directory contains subdirectories for the three test categories

3. Review the code and implementation approaches used by each AI model

## Contribution

Feel free to fork this repository and conduct your own comparisons or extend the existing tests to cover additional aspects of frontend development.

## More Information

For detailed articles and analysis on this comparison, search for the WeChat Official Account: Eric技术圈 or Blog: flyeric.top.

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.