AI Programming From Scratch: Image Compression Tool Development

Introduction: Developing Office Tools! More Freedom!

In daily office work, we often need tools to compress images, convert document formats, etc., but the tools available on the market either have limited functionality or require a subscription fee.Is there a way to meet our needs without paying? The answer is: develop it yourself with Cursor!

We will explore and learn together, understand the powerful features of Cursor, and easily develop our own office efficiency tools. Among them, we will discuss the use of CursorRules and the two interaction modes: Chat and Composer.

Choosing Cursor

As the most popular intelligent AI programming assistant today, Cursor can help you quickly complete the full development process from code generation to file management.Whether you are a beginner or an experienced developer, you can benefit from it.

Core Advantages of Cursor

• Efficient Automation: From code generation to file management, eliminating tedious operations.
• Flexible Modes: Supports Chat mode and Composer mode to meet different development needs.
• Powerful Features: It can develop not only simple games but also complex office tools.

Development Process

1. Create a Project Folder

• Create a folder on your computer to serve as the working directory for the project.
• Open Cursor and select this folder to start development.

2. Write CursorRules

Developing office efficiency tools will be a bit more complex, so we need a tool to help us, which is CursorRules. Move your mouse to the left file management window, click on the “Add File” button in the upper left corner of the window, and name the file .cursorrules (remember to include the dot at the front).

CursorRules is the core of development; it is the “task list” for AI.

• Role Setting: Senior Web Engineer
• Goal: Design and develop the web page
• Functionality and Requirements
• Development Steps
• Specify the technology stack to be used (such as HTML, CSS, JS)
• Code Writing Requirements: General writing requirements

You can let AI help you write a <span>.cursorrules</span> and paste it into the file.

CursorRules essentially sets some rules for Cursor, allowing it to better complete tasks as required. By using different rules, you can guide AI on the prompts when handling different types of files, unify code styles, and set file ignore rules.

Tips: Chat Mode vs Composer Mode

Cursor offers two modes: Chat Mode and Composer Mode.

In Chat mode, when we make a request, AI will generate corresponding code suggestions in real-time but will not directly process the code. We need to manually integrate it into the project. The benefit of this mode is its immediacy and flexibility, especially when dealing with specific programming problems, making the development process smoother and more natural.

Composer mode can automatically generate complete code files and manage the entire project’s file structure. Developers can focus on functionality implementation without worrying about file organization and management. This improves development efficiency and reduces errors.

• Chat Mode: Suitable for solving specific code issues or generating code snippets, with strong interactivity.
• Composer Mode: Suitable for complete project development. It has advantages such as automation, management, and consistency, improving development efficiency and code quality.

3. Implement the Image Compression Tool

In the Composer window, input the requirements:

• In Composer mode, let Cursor automatically generate HTML, CSS, and JS files. One detail is that after each code generation, the corresponding code files will be automatically generated in the left file management window.

The readme document is used to record the purpose, layout, structure, style description of the page, etc., ensuring that we can easily understand the structure and style of the webpage.

HTML + CSS + JS is the technology stack for developing simple web pages, in simple terms:

HTML is responsible for building the skeleton of the webpage

CSS is responsible for beautifying the webpage

JS is responsible for webpage interaction, which is the dynamic part

After the code is generated, click “accept all” to test whether the tool website can run normally.

• Test the tool’s running effect: upload an image, adjust the compression ratio, and verify the compression quality.

Double-click the automatically generated index HTML file to open the browser. At this point, the webpage presented to us is the image compression tool generated by Cursor.

Test whether it can run normally by uploading an image.

Example Effect:

• Original image 116KB → Compressed 36KB

We can also adjust the compression quality according to our actual needs. If you don’t want the compression quality to be so low, you can increase the ratio.

4. Other Extended Function Developments

If more functions are needed, such as batch upload and download or custom compression ratios, you can continue to give Cursor commands. After validating the code through the Save All function, choose to accept all the code. You can try it yourself!

Conclusion: From Demand to Implementation, Cursor Makes Development Easier!

Now, we have not only learned the skills to develop an image compression tool but also can customize more office efficiency tools according to our needs.From now on, paid tools are no longer the only option; doing it ourselves is more rewarding!

Call to Action

• Share Your Thoughts: What other office efficiency tools do you want to develop? Let us know in the comments!
• Follow Us for More Updates: We will strive to develop more interesting tools, so remember to follow us!

Previous Highlights: