Workflow and Tools Introduction

Introduction

Before I jump in to how I made the application I’d like to start with a brief explanation on what it does and why I made it. The app is called AnkiHeat and you can learn all about it on the app’s dedicated landing page https://ankiheat.app. The app renders a widget on your home screen that visualises your Anki study streak data as a heat map. Anki is the most widely used spaced-repetition flashcard study tool for those who are unfamiliar with the name. The app is basically a customizable cosmetic habit tracker tool that is made specifically for Anki users. It is heavily inspired by GitHub’s heat map visualisation that shows a user’s activity that I’ve personally found to be a powerful motivator to keep working on my projects. Silly, I know. But humans are weird creatures. That’s why I decided to make this app for Anki as I personally want to maintain a consistent study habit.

The UX and the design is also inspired by an app called ‘Pretty Progress’ which I think I’ve first learnt about from an MKBHD video a while ago. The app allows users to design and create their own countdown widget. I use it to create a widget that counts how many weeks are left in a year for a daily reminder of existential dread. Jokes aside, I like the colorfulness of the widgets and the user friendly experience and wanted to have that in my app.

Another key aspect to the app is the importance of data privacy. I really hate it when apps that shouldn’t need users to create an account forces users to create one. It’s almost become standard practice for apps to do this for some reason. That’s why my app does not need an any user authentication or an internet connection to run. It only requires user to grant a read-only access to their AnkiDroid app. Since everything is local, there is no tracking or ads.

How it’s made

I work as a QA and have exposure to app development from work, however I do not know how to create my own app. That’s where AI comes in. The media wants us to believe that LLMs are capable of creating apps with only one-shot prompts. At least at first glance that may appear to be true. However, depending on your project, a complex idea that is not clearly defined when given to the LLM to implement can result in outcomes that do not meet expectations. Often times when you start a project without defining it properly it would end up with a lot of tech debt that will result in more time and money wasted down the road. “Measure twice, cut once”.

It is thus best practice to first come up with a clear and well-defined product specification, implementation plan, and designs before asking the AI to start with implementation.

Flow Overview

┌─────────────────────┐
│   Idea in your head │
└──────────┬──────────┘
           │
           ▼
┌──────────────────────────────┐
│ Create Functional Spec       │
│ Document (FSD)               │
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ Create Product Design        │
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ Create Technical             │
│ Specifications               │
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ Create Phased                │
│ Implementation Plan          │
└──────────┬───────────────────┘
           │
           ▼
┌──────────────────────────────┐
│ Implementation               │
└──────────────────────────────┘

Tools

The following are the tools used to create the specification documents. They can be replaced with whatever equivalent tool of your choice. I won’t be going through how to install them.

OpenWebUI

URL: https://github.com/open-webui/open-webui

User friendly interface to chat with my locally hosted LLM models. Supports RAG (important!).

LM Studio

URL: https://lmstudio.ai/

The engine to load and run LLM models locally.

OpenDesign

URL: https://open-design.ai/

Free tool to create UI design mock-ups with AI. It’s quite good at creating beautiful initial designs but poor at design refinement. I’ve since stopped using it. Their documentation is also very sloppy. Good for ideation.

OpenCode

URL: https://opencode.ai/

Good alternative to Claude Code. Not region locked and allow for use with non-Anthropic model providers (including locally hosted ones).

VS Code

IDE of choice. Simple and does the job.

Android Studio

IDE to build and run the app on emulators

Models

Gemma 4

Variants: google/gemma-4-26b-a4b, google/gemma-4-31b

I used Gemma 4 to create and refine the production specifications. I ran these models locally using LM Studio.

The dense model (31b variant) is used for initial spec generation and final review. Dense models supposedly have better reasoning capabilities compared to MoE (Mixture of Experts) models. However, this comes with the trade off of token generation speed.

The MoE model (26b-a4b) is used for the spec refinement and the back and forth with the model due to the speed.

Claude Opus 4.6

Due to the cost, I’ve used Opus solely to review the technical specifications and create the phased implementation plan.

Qwen 3.6/3.7

These are the model family that I’ve used to implement the plan and create the app.