Forecasterly
Website
- Role
- Designer & Figma-to-Code
- Tools
- Figma, Claude Code, React, Tailwind CSS, Framer Motion
- Year
- 2026
- Pages
- Home · About · Pricing
Forecasterly is an AI-native, cloud-based Financial Planning & Analysis platform built to transform how organisations plan, forecast, and work with financial data. Their vision goes beyond replacing spreadsheets: they want every department involved in planning, and every data point structured and AI-ready so that each forecast cycle makes the organisation smarter than the last.
I designed the full site in Figma, then used Claude Code to translate those designs into a production-ready React codebase. The core design challenge was communicating a technically ambitious product to both CFOs and wider teams: credible and precise, but never cold. The solution was a restrained neutral palette with a single warm accent, interactive product demos front and centre, and real customer voices throughout.
Process
- 01
Discovery
Worked with the Forecasterly team to map the product, audience (finance teams at growing organisations), and competitive landscape. Defined the core message: AI-powered FP&A that replaces spreadsheets without losing the familiarity of them.
- 02
Design
Designed all pages in Figma: hero, features, AI section, testimonials, pricing, and about. The visual language pairs a restrained neutral palette with a single energetic orange accent, balancing warmth with technical credibility.
- 03
Build
Used Claude Code to translate the Figma designs directly into a production-ready React/Vite codebase with Tailwind CSS and Framer Motion. Implemented scroll-driven animations, a live AI chatbot demo, sticky feature reveals, and a responsive nav with frosted-glass scroll behaviour.
- 04
Delivery
Handed off a complete, production-ready codebase to the development team for final deployment.
Live prototype
Scroll and interact inside the frame