This article presents the process of working with AI in developing the EasyEdit project, focusing on the methods of prompting and the outcomes achieved at each stage. It also shares the lessons learned from using AI in software development.

A key observation is that using AI as a tool in development does not replace human creativity and decision-making. Instead, it enhances the process, enabling developers to explore ideas, create prototypes, and solve problems more quickly.

Effective prompting and continuously refining the prompt are crucial to achieving quality results from AI. Additionally, breaking problems into smaller parts and using AI as a learning tool can greatly improve efficiency in complex projects.

Key Features Required for EasyEdit

Before starting development, we defined the main features required for EasyEdit as follows

1. A WYSIWYG (What You See Is What You Get) web content editor
2. Easy to use with high flexibility
3. Able to edit text, manage images, customize backgrounds, and manage layout
4. A plugin system that can extend functionality
5. Support for multiple browsers
6. High performance and fast loading
7. Comprehensive Undo/Redo functionality
8. Tools for debugging and error handling

With these features in mind, we began the development process by using AI to help design and create code.

Development Process and AI Prompting

1. Initial Concept Definition

Prompt "I want to create a WYSIWYG web content editor that is easy to use and flexible. What ideas do you have?"

• Reason Start with an open-ended question to get a wide range of ideas from AI, specifying key terms like "WYSIWYG," "easy to use," and "flexible" without limiting the technology or approach.
• Outcome AI suggested using the ContentEditable API, creating a toolbar for basic tools, and modularizing the functionality.

Prompt Refinement "Explain the fundamental structure of a pure JavaScript-based web content editor."

• Reason Narrow the focus to a specific technology (JavaScript) to get more targeted results.
• Outcome AI provided a basic framework that led to the concept of dividing the structure into Core and Plugins.

2. Core Design

Prompt "Show a sample code for the Core of a content editor that can manage plugins."

• Reason Requesting a "sample code" to get a concrete starting point for writing the code and specifying "plugin management" to ensure flexibility.
• Outcome AI created a basic structure for the Core class, including methods for adding plugins and managing the toolbar.

Prompt Refinement "Enhance the Core to dynamically load plugins and make the toolbar draggable."

• Outcome AI improved the code by adding dynamic plugin loading and a makeDraggable function for the toolbar.

3. Plugin Design

Prompt "Create a basic structure for a plugin that manages text editing."

• Reason Start with a fundamental plugin (text editing) to serve as a template for other plugins.
• Outcome AI created a TextEditorPlugin with basic methods for text management.

Prompt Refinement "Add plugins for managing images, background, and layout."

• Outcome AI generated ImageEditorPlugin, BackgroundEditorPlugin, and LayoutEditorPlugin with essential functionality.

4. UI Development

Prompt "Design a toolbar UI that is easy to use and supports adding plugins."

• Reason Focus on UI usability and flexibility, ensuring it supports plugin additions.
• Outcome AI provided HTML and CSS for a basic toolbar.

Prompt Refinement "Improve the toolbar to display only tools relevant to the element being edited."

• Outcome AI modified the Core and Toolbar code to dynamically display tools based on the context.

5. State Management and Undo/Redo

Prompt "Add Undo and Redo functionality for edits."

• Outcome AI proposed using the Command Pattern for managing edit history.

Prompt Refinement "Enhance the Undo/Redo system to work with all plugins."

• Outcome AI modified the Core and Plugins to fully support the Undo/Redo system.

6. Multi-Browser Support

Prompt "Enhance the code to support older browsers without using external libraries."

• Outcome AI suggested techniques such as using polyfills and writing compatible code for various platforms.

Prompt Refinement "Show how to test functionality across different browsers."

• Outcome AI recommended both manual testing and tools like BrowserStack.

7. Performance Optimization

Prompt "How to optimize EasyEdit's performance without using build tools?"

• Outcome AI suggested optimization techniques like event delegation, manual code minification, and lazy loading.

Prompt Refinement "Improve plugin loading speed by using lazy loading."

• Outcome AI adjusted the Core code to support lazy loading of plugins.

8. Error Handling and Debugging

Prompt "Add an error handling and logging system to EasyEdit."

• Outcome AI created a comprehensive error handling and logging system.

Prompt Refinement "Create debugging tools for EasyEdit."

• Outcome AI built a debug panel that displays system status and logs.

9. Documentation Creation

Prompt "Create an outline for EasyEdit's user documentation."

• Outcome AI generated a documentation outline covering installation, usage, and plugin development.

Prompt Refinement "Add usage examples of EasyEdit in different scenarios."

• Outcome AI provided examples of how to use EasyEdit in various situations.

Lessons Learned from Using AI in Developing EasyEdit

1. Effective Prompting Specific and structured prompts yield more relevant results.
2. Continuous Prompt Refinement Adjusting the prompt based on the results helps gather more detailed and precise information.
3. Blending Human Thought with AI While AI helps generate ideas and code, human judgment is still essential for decision-making and refinement.
4. Breaking Problems into Smaller Parts Dividing development into smaller sections and using AI to assist in each part simplifies managing complex projects.
5. Using AI to Learn Beyond generating code, AI offers new ideas and knowledge that can be applied to further development.

Conclusion

The development of EasyEdit in collaboration with AI demonstrates the potential of using AI as a tool to accelerate the software development process. It speeds up the thinking, design, and coding stages. However, human understanding and decision-making remain crucial in creating a product that meets real-world user needs.

Strategically using prompts allowed us to gather comprehensive information and cover all aspects of developing EasyEdit, starting from broad concepts and progressively diving into finer details. It also tested AI’s ability to handle various aspects, from system design to code writing, optimization, and documentation.

In the end, EasyEdit not only meets the required features but also serves as an example of how AI can be effectively integrated into software development. This approach can be applied to future projects as well.