This article is part of day 12 of KINTO Technologies Advent Calendar 2024 🎅🎄

Introduction

Hello. Yamayuki here, from the Producer Team in KINTO Technologies’ Mobile Development Group.  Our company offers many opportunities to explore the use generative AI.  While I am not an engineer, I took the initiative to experiment with generative AI to develop an operational tool for business-side staff. This tool simplifies the creation of HTML announcements. When I share this with others, they often get the idea that I pulled off the amazing feat of building generative AI into it, but that is not the case. What I actually did was use generative AI to help develop it. This article is about that process.
Even non-engineers can develop solutions to improve work! Having experienced this firsthand, I wanted to share it as a concrete example.

Background: Why I Decided to Do It

For the apps I am responsible for, tapping a push notification opens the announcement details page. This page is a web view that displays announcements by uploading an HTML file to the web.

The operation looks as follows: (1) Business-side staff submit an Excel or Word manuscript of the content they want to display. (2) Someone on the development side codes the HTML file. (3) The business-side staff review the HTML file. (4) Someone on the development side makes corrections (Steps 3 and 4 were repeat in some cases.) (5) The content is reflected on the web.

Manuscripts were submitted at a pace of approximately two per week. A challenge with this process was that the business-side staff submitting the manuscripts did not have the final version ready for review, leading to repeated requests for corrections. Additionally, the frequent need for "a bit of coding" to handle submissions and corrections became a significant burden for the development team as well. Overall, the process was far from efficient or smooth.

We wanted to solve these issues! But at the same time, we were unable to do any drastic changes like introducing a CMS. That is when I decided to leverage generative AI to develop the operational tool I want to discuss in this article: a tool designed to create HTML for announcements.

- Issues we wanted to solve (Summary)

Allow manuscript submitters to have the finalized version available for review during submission (eliminating the need for corrections) and remove the necessity for HTML coding (reducing the workload).

- Why neither using Excel/Word’s HTML file output nor relying on generative AI to create HTML files during manuscript submission provided an effective solution

While these methods can generate HTML files, the requirements in this case went beyond simple text. The HTML needed to include complex elements such as in-app buttons, embedded YouTube videos, and intricately designed sections for specific topics. Additionally, it was essential to produce a high-quality HTML file in a single step, allowing staff with no web expertise to have the finalized version readily available for review. As a result, I concluded that relying on these methods would complicate the operation.

Step 1: Define the Minimum Features Required

The first thing I did was write down what the minimum features it would require were. I could have written a virtually never-ending want-list, but since I am a non-engineer, I decided to aim for an MVP to ensure that developing the tool would not end up as just a dream.

- The minimum required features I wrote down

(1) You can input content via a form and get it output as an HTML file. (2) The required input fields are the title, date, headings, etc. (3) Users can add or delete input fields at will. (4) The outputted HTML file reflects the specified design. (5) The outputted HTML file reflects the specified measurement parameters.

Step 2: Write a Prompt

Based on the minimum required functions I wrote down in step 1, I wrote the following prompt to give instructions to the generative AI. I used Copilot, but I doubt it really matters which one I had used (notable alternatives being ChatGPT and Gemini).

- The prompt I wrote

Please take announcement content inputted by the user, and create a web page of it that can be downloaded as an HTML file.
 
# Required input fields
Title 
Date 
Headings 
Subheadings 
Paragraphs 
Images
Buttons 
YouTube embedding tags 
# Instructions 
(1) Content inputted via a form can be outputted as an HTML file.
(2) See above for the required input fields.
(3) Users can add or delete any number of input fields at will.
(4) The specified design is reflected in the outputted HTML file.
(5) The specified measurement parameters are reflected in the outputted HTML file.
# Prescribed design (CSS)
https://...
# Measurement parameters
...

Step 3: Make Adjustments

By inputting the prompt from step 2 into the generative AI should produce output that is more than adequate for a first attempt. Based on that, you then adjust the parts that are a slightly off or could use a little tweaking, engaging with the generative AI as you go.

Example

Please improve the previous form based on the instructions below.
# Instructions
Make it so that instead of having to enter a URL into the image input fields, you can upload the images right there and then.
Preferably, anyone should be able to include images without having to go through a difficult procedure.

- The key point when making adjustments

When making adjustments, I suggest providing instructions to focus on one improvement at a time. For instance, if you give instructions like, "Images should..., button behavior should..., and input fields should...," you’re asking generative AI to handle multiple improvements at once. If it makes a mistake, it can be challenging to pinpoint where things went wrong. For the same reason, I also recommend maintaining a version-numbered history of the generated code and prompts. Make adjustments gradually, engaging in a step-by-step conversation as you go! things little by little, talking to it as you go!

- Through persistent fine-tuning, you can achieve results that surpass your original expectations!

In my case, this adjustment process not only allowed me to achieve the minimum required features but also successfully generate and incorporate the following additional ones.

• Preview the inputted content.
• Let the order of the input fields be changed later.
• Import and edit previously outputted HTML files.
• If an image is excessively large, display an error message and provide instructions on how to resize it

- Adjust and polish up the design.

Finally, I adjusted the CSS to make it all look nicer. You can adjust the CSS by reviewing the results and providing feedback to the generative AI as you go. However, if that feels cumbersome, you might prefer to provide instructions to the generative AI using a prompt like this:

Example

What kinds of designs make for easy-to-use general input forms?

Okay, please reflect those designs in the previous form.

- Finished example

Here is the operation tool that I actually developed using generative AI!

https://www.youtube.com/watch?v=F-eyKyS8HSo

Conclusion

Developing this operational tool successfully reduced the initial five-step process to just two.

Before:
(1) Business-side staff submit an Excel or Word manuscript of the content they want to display. (2) Someone on the development side does codes the HTML file. (3) The business-side staff check the HTML file. (4) Someone on the development side makes corrections (Steps 3 and 4 were often repeated.) (5) The content is reflected on the web.

↓

After:
(1) Business-side staff submit an HTML manuscript of the content they want to display. (2) The content is reflected on the web.

Additionally, I received positive feedback from the business side, noting that submitting manuscripts had become much easier. Both the business and development teams were pleased, making it a win-win improvement for everyone involved!

What particularly stood out to me was when the back-end engineers on the same project pointed out that, in the past, it would have taken about two weeks and a significant amount of money to develop the same functionality manuall. I’m amazed that, as a non-engineer, I was able to independently develop something so valuable. Generative AI can feel intimidating, but letting fear hold me back won’t help, so I’m determined to make the most of it! This experience truly made me reconsider my approach to generative AI in a serious and thoughtful way.

This applies to everything, but I believe the key is to keep trying lol. Thank you for reading all the way to the end!