●● Website
CodeCraft
A product site for an AI tool that turns plain English into typed, tested code, designed in Figma and built in Framer.
Role
UI/UX design, Framer development
Type
Website
Tools
Figma, Framer
Platform
Web, desktop to mobile
●● ( 01 ) Overview
CodeCraft turns a plain English prompt into typed, tested code that matches a team’s framework. The website had to make that promise feel real within seconds, speak to developers in their own language and still read clearly for the people who approve new tools.
●● ( 02 ) Challenge
Developer tools live or die on trust. Visitors arrive skeptical, scan for proof and leave as soon as a page feels like marketing. The site needed to explain an invisible product, show real output instead of claims, and grow into docs, pricing, a changelog and careers without losing its character.
●● ( 03 ) Approach
I led with the product itself. The opening pairs a short, confident headline with an editor that shows a prompt becoming a typed component. A dark, quiet canvas with a single lime accent keeps attention on the code, features are told through a bento grid, and every page shares one component system so the site stays consistent as it grows.
17
Pages designed and built
5
CMS collections
3
Breakpoints
●● ( 04 ) Outcome
A 17 page Framer site with CMS powered blog, changelog, careers and status pages, designed for desktop, tablet and mobile. The team can publish updates on their own, and the core idea lands before the first scroll.
●● Next case
Aura Therapy
→
Wellness website · Framer