First steps
I started by working on a PRD (Product Requirements Document), where I defined the project requirements on two fronts: the structure and content of the public-facing website, and the features of the content management system (CMS).
Broadly speaking, the project needed to enable:
Displaying the artwork catalog and available workshops.
Managing that content (upload, edit, delete) without requiring technical support.
Facilitating contact and driving conversions for sales, bookings, or inquiries.
With this foundation, I began working on wireframes: first establishing the low-fidelity structure in Figma, and then creating the initial visual iterations in Lovable.
Implementation
With the completed product PRD and the wireframes as a visual guide, I started working in Cursor's "Plan" mode, where I asked it to create an execution plan divided into stages, each documented in its own file. This allowed me to progress in an organized manner, with clear visibility of what was complete and what remained pending at any given time.
To sustain the workflow over time, I defined three key elements:
Communication rules: A rules file for the agent, instructing it to explain everything in non-technical language and to refrain from making design or database decisions without my confirmation.
Context file: A document containing the project's current status and latest updates, so that when the chat reached its context limit, I could resume work in a new chat without losing the decisions that had been made.
Update skill: Instructions for the agent to automatically update that context file whenever I prompted it to do so.
The stage files served a similar purpose: documenting every step of the process to ensure I could resume work at any time.
As for the technology stack, I used:
Frontend: TanStack Start + React 19 + Vite, with Tailwind CSS and shadcn/ui for components.
Backend & Data: Supabase (Postgres database, image storage, and user management with email/password authentication for the admin panel).
Emails: Resend (for the contact form).
Deploy: Vercel.
Development progressed in stages: first the public-facing website, with its structure, content, and database connection; and then the CMS, with the login, management of artworks and workshops, and the dashboard metrics.
Deployment and final steps
The website has been deployed to Vercel, and both the public-facing site and the CMS are now live and functional. All that remains is to configure the custom domain once the final content (artwork and workshop photos) is ready, bringing the project to its 100% functional, final version.
Key takeaways:
The PRD as an anchor: Defining needs, structure, and functionality before implementation prevented ad-hoc decisions and enabled a staged development process.
AI as a copilot, not a replacement: Using Lovable for rapid prototyping and Cursor for implementation, while maintaining control and personal judgment over every decision.
A cross-session context system: The context file and update skill made it possible to resume the project at any time without having to rebuild the context from scratch each time.
