How to Build a Personal Note Website with an AI‑Powered Coding Assistant

Introduction

The Tongyi Lingma AI coding assistant leverages a large language model to generate code, unit tests, and comments from natural‑language prompts, supporting many IDEs and languages. For beginners, a simple description can produce a complete personal note‑taking website, dramatically shortening development time.

Benefits for Learners and Instructors

Students can focus on understanding architecture and business logic instead of writing repetitive boilerplate code, while teachers can devote more time to designing complex projects and guiding problem‑solving rather than reviewing basic syntax.

Project Overview

The target project is a personal note website that supports adding, deleting, editing, and querying notes. The development proceeds from simple to complex, with each stage demonstrated and adjusted based on feedback.

Preparation

Set up a local development environment to later deploy the site to a virtual host or server.

Install Visual Studio Code and add the “Tongyi Lingma” extension from the marketplace.

Create a local site folder, remove default files, and ensure the site opens with a 403 page when accessed via a custom domain.

Drag the site’s root folder into VS Code so the AI assistant can interact with the files.

Configuration Check

Before proceeding, verify that a plain‑text file exists for recording commands, the Tongyi Lingma plugin is logged in, and the temporary domain resolves correctly.

Implementation

Using the AI assistant, issue a prompt such as “Create a personal learning note website with HTML, CSS, and JavaScript.” Explicitly specify the front‑end stack to avoid unwanted back‑end languages. The assistant then generates multiple files:

index.html – the main structure with a title, input area, and note list.

style.css – styling for layout, buttons, and responsive behavior.

script.js – JavaScript handling add, delete, edit, and query operations, storing notes in the browser’s cache.

After accepting the generated code, the files appear in the project root and can be opened directly in a browser to view the result.

Feature Expansion

Delete button – added to each note entry; clicking removes the note.

Edit button – opens the note in an editable field, allowing updates and saving.

Timestamp – each note records the creation time to preserve order.

Sorting – notes can be displayed newest‑first by adjusting the rendering logic.

Pagination – limit display to five notes per page and provide navigation controls.

Header and footer – added for better layout and branding.

Responsive tweaks – adjust button sizes, align heights, and hide the top bar on small screens.

When a generated UI does not meet expectations (e.g., layout issues on small screens), the assistant can be prompted to regenerate or modify specific elements, such as button width or element alignment.

Troubleshooting

Notes disappearing after a page refresh indicate that data is only stored in volatile memory; the solution is to persist notes in localStorage or another client‑side store.

Inconsistent button heights or oversized elements can be fixed by specifying exact CSS dimensions.

When the AI produces slightly different code on each run, simply delete the unwanted files and request a new generation.

Summary

Each AI‑generated interface is unique, and iterative prompting refines the result. By combining natural‑language instructions with the Tongyi Lingma plugin, beginners can rapidly prototype functional front‑end applications, learn core concepts, and progressively enhance features such as CRUD operations, pagination, and responsive design.