Type a company and its history shows up before you finish. Check and add are a single step.
Jtracker: Designing in code with React and Claude Code
A React + TypeScript job tracker built in four days with Claude Code, styled with my open-source SCSS framework. Live demo link below.
Overview
Test-driving prototyping in code
Hiring teams are starting to ask designers to "design and prototype in code using AI."
With my background as a front-end developer I've aspired to design in HTML and CSS, but I was/am skeptical. I've tried Figma Make, with lackluster results. AI is taking off. But the marketing hype is still sitting squarely on top of the bubble.
This little project is my experiment with the newest tech. Results explained below.
Jtracker for tracking jobs
After close to 300 job applications, I was tiring of scanning my spreadsheet up and down to find out where I was with a company or role. And the online trackers are buggy. So I built this instead.
Every job application started with one question: Have I applied here before? Every morning started with another: Who do I follow up with today?
Jtracker answers the first as you type a company name. Past applications appear under the field before you finish. The second gets its own Needs Follow Up tab.
Live demo: jtracker.fredtranfield.com
Storybook: jtracker-storybook.fredtranfield.com
Code: github.com/ptoly/Jtracker
Role & deliverables
Designer, design engineer — Web app, color tokens, framework updates.
Figma · Claude Code · React · TypeScript · octet-scss · Storybook
Constraints: Designing through a code tool
No canvas
React and Claude Code aren’t design tools. There’s no canvas, no dragging a box until it looks right. Every change is a sentence I write and a diff I review. If I can’t put an intent into words, it doesn’t ship.
That changed how I worked. A spacing tweak I’d make in a second in Figma became a prompt, a build and a screenshot. And the AI filled any gap I left with its own defaults. The defaults sometimes took me down rabbit holes.
Process
I designed every component in Figma first (well, there are only two). For layout, hierarchy and flow, it's still faster than code. The key design calls happened there: a form that’s easy to read and takes up little space. Initially the search for applied companies happened in the table search field. That meant scrolling: down to check, back up to apply. The fix? Merging "check" and "add" into one step, so the search is triggered in the form.
Claude Code built from the mockups in small steps. Plan, build, stop, review. I read every diff before it went in.
What CC did well
Scaffolding. Project setup, the data layer, storage adapters, tests. It caught edge cases I'd have missed and wired up the accessibility plumbing without being asked twice. Short, clear prompts fixed most bugs in a few minutes. It also listed what it wasn't sure about, which helped.
CC also
- Wrote the React/TypeScript components, the SCSS, and the storage adapters (Google Sheets, local CSV, browser demo)
- Wrote the sample-data generator, unit tests and Storybook interaction tests
- Ran the checks and verified each change in a browser at several widths
- Wrote the deploy scripts, the favicon set and README fixes
Interestingly, I also used regular Claude (desktop app). I found it a better tool for creative/problem solving discussions than Claude Code. Better at writing the README (though I've discovered only first drafts - human edits are a must).
Where CC struggled
Styles. It wrote each component's padding, gaps and media queries from scratch instead of using global rules. It invented its own spacing helpers rather than use Octet's. The CSS bloated fast. Cleaning it up took about four prompts - I'd keep finding mistakes.
It also filled design gaps without asking. Rows got a height I never chose; breaking the 8pt vertical rhythm. Text shrank below my floor. Subtle details in the mockups got lost until I had it screenshot its own work and compare.
And it copied a popular UI kit's flaws. The kit's field borders fail WCAG contrast.
AI throws out a deluge of data (I call it firehosing). Makes it too easy to miss something important. Currently Claude Code's UI doesn't separate its working accomplishments from important notes. It does end output with questions for clarity. However these can be several pages long.
Sometimes it was slow - I'd find myself multitasking for 10-15 minutes while waiting for it to complete a task.
The fixes
Write the rules down
Every misstep became a written rule. Octet gained a conventions file that people and AI tools can follow literally: where spacing lives, which file owns layout, no stacked gaps. The framework shipped four point releases along the way, each closing a gap an AI had tripped over.
Document for AI
Documentation used to be for people. Now it's also an interface for AI.
Prompt in small steps
This will make CC less likely to fly ahead and take you down rabbit holes.
Where my time went
With the heavy (technical) lifting handled, I spent my hours on design. I tuned the fluid type to scale up to 1920px instead of 1440px. I added breathing room on mobile. I checked every color pair against WCAG and nudged the ones that failed. I know it's a simple form, but I had time to experiment with more designs than I would on a non-AI project. Along the way, we found flaws in Octet and fixed them in the framework.
Outcome
Claude Code wrote about 92% of the code. On my own, this would have taken a couple of weeks, at least.
The verdict: prototyping in code works, as long as the designer stays the design authority. The AI does the lifting. The judgment stays human.
Jtracker now tracks every application I send. Including, eventually, the ones that ask if I can prototype in code.