Vibe-coding the Grand-Complication with Claude
- David Turner
- Mar 3
- 10 min read
Updated: 4 days ago
Can you create a watch with AI?
Having created Coding and Product agents in Claude, I needed a truly complex project to test them out. Simple apps, data analysis, web-scraping and even Agentic Orchestration code had proved fairly (and disappointingly) straightforward; that's when the concept of the Grand-Complication was born.
Summary
Objective: to create a grand-complication watch app in the style of Breguet and Patek
Stack: Next.js, TypeScript, Canvas, Tailwind CSS, Vercel
Results: Successfully created the working app with accurate complications
Outcome: Fully explored the limitations of AI vibe-coding, specifically spatial awareness
GitHub: grand-complication
The Grand Complication watch app development
To give the agents a real workout, I opted for something that would combine abstract horological concepts with visual design, spatial awareness, and roots in physical product engineering. With LLMs being largely trained on text, code, and image recognition, aiming to create in digital form something inherently analogue and mechanical would give the opportunity to take Claude out of its comfort zone.
The project outline was therefore:
Animated web app depicting a grand-complication timepiece in the Breguet/Patek mould. Complex visual components are the order of the day: guilloche dials, precious metals, Breguet-pomme hands, subdials, Roman and Arabic numerals
Complications to range from the simple (Date, GMT hand) through to the complex (sidereal time and moonphase)
User interface to set the GMT hand
Running this through my Claude development agent after creating a project library detailing which Breguet and Patek models to use as references, the initial artefacts were created:
PRD
Tech stack and architecture spec
Test and validation plan
Worth noting here is a guardrail I add to all my software and design agents; they must explain their decision making, taking into account parameters of performance, security, scalability and costs (i.e. don't assume I want to pay for APIs or tools). This includes never making assumptions about toolchains or environments. This guardrail is a result of many earlier vibe-code projects, where AI (Claude, ChatGPT, Gemini) had overlooked API rate limits, tool subscriptions, and on more than one occasion hardcoded keys into files destined for public GitHub repos.
Explanation of Complications and Horological terms
For those people who live normal lives devoid of obsessing over the intricacies of watch calibres and reading technical documents from the 1970's written in French and German, some notes on terminology:
Complication: a horological feature of a watch, more complex than hours/minutes/seconds.
GMT hand: a hand representing a second time zone, originating with the advent of long-haul aviation in the mid-20th century. With the commercial aviation industry using GMT (aka UTC aka Zulu*) as its time reference, pilots required watches showing both local and GMT time-zones. This coincided with PanAm wanting to study and counter the effects of jet-lag on it's crew, which included keeping them on their home time zone (and thus sleep patterns) when travelling.
PanAm commissioned Rolex to create such a complication, and the GMT-Master (ref. 6542) was born.
Claude needs to not only create the GMT hand in this project, but also figure out an interface. The mechanical bezel-rotation of the GMT-Master setting-device isn't an option in the digital world, so a solution must be decided upon.
*Zulu time derives from NATO phonetic alphabet: Zulu representing 'Z', standing for 'Zero hours' as in UTC
Sidereal time: A personal favourite which goes straight back to the astronomical origins of horology. In simple terms, where Solar or 'normal' time uses the sun as its reference, Sidereal time uses distant stars and constellations in the universe. With good reason; when solar time uses the sun as a datum, there's an inaccuracy due to the rotation of the Earth as it orbits. Using a point in the far distance however negates that effect, and is of use mainly for astronomers and navigation systems.
Each point on Earth has a local sidereal time (LST) which Claude needs to calculate and display on the sub-dial. I'll spare you the calculation here, although I have included it in the GitHub wiki for this project.
Moon-phase: Another astronomical-flavoured complication, which as you'd expect indicates the current phase of the moon. There are eight phases in total (New, Waxing Crescent, First Quarter, Waxing Gibbous, Full, Waning Gibbous, Last Quarter, Waning Crescent) which can be calculated from date relative to the last most astronomically accurate new moon which occurred on January 6th 2000 at approx 12:24PM.
Watchmakers achieve sub-dial representation via a rotating disc with 2 moons depicted upon it, and a bosom-mask overlaid. As the disc rotates, driven by the watch movement, the mask obscures the required section of the illustration of the full-moon so that the correct moon-phase is shown to the user.
Claude must both calculate the moon-phase for the day and local time, and arrive at a solution to display the correct phase upon the sub-dial.
Building the project with AI
My Claude architecture agent settled on creating the app with this stack:
Next.js
TypeScript
Canvas
Tailwind CSS
Vercel for deployment
GitHub for version mgt
System time to be used as reference for all complications, Next.js running locally, then a push to Vercel to deploy frontend. No APIs, no costs, no complex toolchain - just free-tier VS Code, Vercel and GitHub. The agent even provided performance trade-off and rationale descriptions with respect to page loading times and animation frame rates. With all that sounding good, the development got under way.
The product development phase
Lots of early prompting around design choices and references got us past the usual over-simplified three-hand analogue clocks that AI usually produces. We soon got into creating Grain d'Orge Guilloché dial patterns and Breguet hands. And naturally that's where the issues started.
AI's issue with spatial awareness
As expected, AI is really good at calculating things and churning out code quickly. It's a text-predictor after all. But visual design on a tool like Claude (Sonnet 4.5) is hard going.
I actually tried jumping between Claude and ChatGPT (GPT-5.2) as a comparison to see which fared better; neither is the summary. Although I have to say I was impressed how well each could prepare hand-off docs and pick up the other's code - again, text is the preferred medium of AI. If you don't want to pay for subscriptions for your personal projects, then use this hand-off technique between free plans on each agent.
Grinding through the visual elements of this projects though was laborious and frustrating. The problems started in earnest with the Breguet hands - getting the pommes to join the batons at the right point and to have hollow centres took many attempts. Then we progressed onto indices, numerals and minute-track, each as painful as the next.
Surprisingly difficult was adding the 'Swiss Made' text onto the dial. The words arrived there upside down, back to front, at the wrong position on the dial, overlapping each other... every combination before finally we got there. If Claude ever offers to reverse your car into a parking space, then think of an excuse fast - it has all the spatial awareness of a wheelie bin in a revolving door.
Then the biggest pain of all - the case and crown. Trying to get Claude (or ChatGPT) to create a case was painfully difficult. It could describe a case and crown to me in text without problem. But to create a visual representation was another story. I added pictures and technical drawings to the library, I marked-up what was wrong with the versions it created. Every time it could tell me what was wrong and explain perfectly what it should have done. But could never convert that to a design. This generation of LLMs are all about text.
Thinking about the volume of water I'd probably wasted cooling down Anthropic's Nvidia Blackwell and Rubin silicon somewhere, I decided to stop flogging the dead horse any further and suggested a change of tact. I opened up Affinity and created an SVG of a case design based on a Breguet reference. From there I told Claude to use that instead, and before long we were back on track. Until the next issue...
Sidereal time
A quick validation check identified that the sidereal time was showing incorrectly. When questioned, Claude as ever told me that I was wrong and it was right. A short argument later armed with a screenshot, it conceded defeat. Turned out the calculation was correct, but the subdial hand was mirrored to the wrong side (showing 4pm instead of 8pm). Several bug-fix iterations and arguments later, we cracked it. The weakness here was Claude's spatial awareness. It took way too many attempts to describe angles and positions of where 8pm was on the subdial before we got it right.
Moon-phase sub-dial development
As if to confirm that weakness, we then set about getting the moon-phase complication showing the correct image, correlating to the actual moon on the day. Much like the case design, this was excruciating (albeit I'll say that some really nice textured moons with craters and twinkling stars were created en route).
Again, Claude just couldn't figure out how to display the correct phase. I draw up documents, added material to the library, and as before Claude could describe back to me exactly what it needed to do. And would then create something completely useless.
Learning from the tooth-extracting experience of the case, I decided to fire up Affinity again and create the images myself based on a Patek design, for Claude to call up in the code. One minor issue later (Claude telling me to name the images a certain way, then ignoring that format in its subsequent code - which it then blamed me for) and we had a working moon-phase at last. I cannot emphasise enough how painful this part of the project was.
The development of the Grand Complication is complete
At that point we had a working, functionally accurate product that looked the part. Aware of the localised drought I'd caused near a data centre somewhere, I decided to claim victory and bring the project to a close.
AI: great at code but still struggles with space
Claude, like all GenAI, is brilliant at coding, architecting, speccing, calculating, and basically anything text based. There's no way I could have done such a complex project so fast without it. But then again it's AI - what did you expect? Of course it's good at those things because that's what it's trained to do. And I know that because I asked it.
The real finding here was that while a model like Sonnet 4.5 or GPT-5.2 can describe an image and even create basic visuals, it just can't comprehend distance and angles of one element relative to another (I tried this on Sonnet 4.6 too later, which was equally inept. OpenAI has also since released GPT-5.3 which claims to feature a big improvement in handling geometry). Gemini may have been more successful and is probably worth a try for future similar projects*. However for anything visual that needs developing with any kind of urgency or quality, then just produce the SVGs yourself, it's far less frustrating and results in a better end-product.
Design analysis
Some back-of-a-cigarette packet design analysis using a rudimentary golden triangle reinforces the point. The subdial and date window centres result in a wide, shallow triangle with angles of 88.8°, 45.5° and 45.7°. Overlaying a sketched triangle running through a 12-point intersection centred on the pinion shows the kind of arrangement we might expect for such a dial. Even visually it's apparent that the moon-phase sub-dial is too small and sits too low, while the larger sidereal time sub-dial lacks symmetry with the data window position opposite (relative to the outer edge of the dial).
This is somewhat surprising as I'd expect an LLM to have an understanding of concepts such as the golden ratio and symmetry, being trained on huge quantities of text that must include plenty of geometry and design-related concepts.
Another minor criticism was that even though Claude had produced a test and validation plan at the outset of the project, it never once checked or suggested checking its outputs in any methodical way. Only sanity checking things like sidereal time and moonphase flushed out those issues. Nil desparandum; updating the agents instructions should rectify this for subsequent projects.
In retrospect, the most mind-blowing aspect of the whole project however is that long before AI, men with screwdrivers and quill pens calculated, designed and built these very complications based on astronomical observations. And those watches have far better MRSP and residuals than my app ever will (unless 2021 NFT prices make a comeback).
Certainly there are industrial or ADAS applications of AI/ML where relativity and spatial awareness are at far more advanced levels than the current crop of consumer or coding-focused GenAI, but mechanical design and development for instruments as complex as a real-life Breguet or Patek may well be an underserved niche as of today (as it may well remain, at least in Switzerland - the whole point and economic model of haute-horlogerie today is likely at an analogue polar opposite position to the world of AI).
Subject matter aside, what this project illustrates most clearly is the need to experiment with AI and to surface the limitations and quirks. Beyond the hype and hyperbole is a tool no different from any other. The key is in understanding how, why and when to use it.
GitHub: grand-complication
*I asked Claude if Nano Banana 2 would be better equipped; it told me that no such thing existed. I challenged, it doubled down. Then I linked the Google Nano Banana site and got a grovelling apology about how it should have checked instead of 'fabricating a confident sounding answer' Abstract that behaviour over to your code, and it becomes apparent why guardrails and sanity checks are so important. And humans-in-the-loop for that matter.
David Turner is the founder of Kói, an independent strategic consultancy advising senior leaders and investors on high-value decisions across technology and adjacent creative fields.
© Kói Holdings Ltd 2026. All Rights Reserved.
