How I Built a Hand‑Counting Calculator in 5 Minutes with WeaveFox AI

Background

Inspired by a viral short‑video showcasing a "smart AI calculator" that required a paid membership, I set out to see whether a natural‑language AI coding platform could reproduce the effect within minutes.

Tool Selection

Among many domestic and overseas AI‑coding services, I chose Ant Group's WeaveFox because its code‑generation quality for visual layouts is superior, it supports form‑based requirement clarification, and it offers multi‑agent collaboration.

Prompting the AI

On the WeaveFox dashboard I entered a natural‑language request describing the desired UI and behavior:

Design a standard calculator interface, but only support addition and subtraction results within 10.
When the user presses equals, draw two hands and calculate the result by counting fingers.

The platform responded with a form asking me to choose a technology stack; I selected a typical front‑end stack (React, Ant Design, etc.).

Iterative Clarification

If the generated output differed from my expectation, I could start a second dialogue to refine the result. The "requirement clarification assistant" dynamically adjusted the form to capture missing details, reducing the gap between the generated code and my mental model.

Task Planning and Agent Collaboration

After clarification, a "task planner" broke the work into sub‑tasks. Specialized agents—product design, UI/UX visual design, and a React code‑generation expert—took turns producing their artifacts while I waited.

Result

Within two to three minutes, a fully functional calculator appeared, complete with hand‑drawing animations and sound effects. The UI displayed two hands that counted fingers to show the result, matching the original concept.

Testing and Feedback Loop

I discovered a bug where the expression 3 - 2 rendered only one finger instead of the expected two. By describing the issue in a follow‑up prompt—"When testing 3‑2 the output shows one hand, please fix the code"—WeaveFox regenerated the corrected snippet.

Because large language models can hallucinate in long contexts, I explicitly phrased feedback like "During testing I encountered xxx, please optimize the code" to keep the model focused on code correction rather than a conversational answer.

Deployment

Clicking the "Deploy" button automatically published the app without needing a server or complex configuration. A QR code allowed instant mobile testing, and the app could be shared via a hyperlink.

Limitations & Future Improvements

The plus/minus buttons are small; a larger UI would improve usability.

Only ten fingers are used; adding foot icons could extend the range to 20.

Reflection

The experience demonstrates that AI can turn natural‑language specifications into working front‑end applications quickly, but effective use still requires clear prompts, iterative clarification, and awareness of model limitations.