Farul Haziq · case study
The busywork went to AI that I built.
three workflows, each with a person making the final call.
the brief
three jobs, handed to AI
too much time went on work a machine could do. i designed and built three workflows to take it on, on my own, and kept a person on every decision.
-
Workflow 1
Design review plugin
checks Figma files against the client's design system, and fixes them. about 40% less design UAT time.
jump to it ↓ -
Workflow 2
Banners for Gardens by the Bay
every format edited, checked and delivered in under 5 minutes, down from up to an hour.
jump to it ↓ -
Workflow 3
HubSpot talent automation
applications file themselves, and hiring managers paste links to add filled-in, scored profiles.
jump to it ↓
Workflow 1 of 3 · design review
From a chat to a Figma plugin
The problem
designers check client Figma files against the client's design system. the first version lived in a Claude chat: too many questions, text-only results, no memory, and every fix by hand.
What I built
a Figma plugin, built with Claude Code and the Figma MCP. it checks tokens, then spacing and type, then rogue components, then gives AI advice that's only ever a suggestion.
- ~40% less design UAT time
- 1 question before a review, instead of many
design review · the work
what the plugin does
-
the first iteration: every setting up front
The first iteration
- settings came first: what to check against, and whether it's a mobile design.
- results listed issue by issue, layer by layer: 92 issues in 120 layers on this page.
- each value off the 4px grid offered the nearest options to pick from.
- later rounds cut most of these choices, and grouped the results.
-
one question: the full page, or a frame
What should I review?
- the only question: the full page, or the frames you've selected.
- it updates by itself as you select in Figma. only frames count, so it never guesses.
- it checks against the library in the file, with PSYKHE + Material 3 as the fallback.
- Figma can't list a whole library's components, so it checks the ones used in the file.
-
now: grouped, then Keep or Change
Grouped, then fixed
- findings grouped by layer name, marked must fix, should fix or consider.
- Keep or Change for each group, then one Apply changes the file.
- when a value sits between two, like 12px between 8 and 16, it suggests the one used most on the page.
- kept items are saved in the file for the whole team, and hidden in future scans.
design review · the calls
the decisions behind it
-
The AI suggests, a person decides
the plugin flags and suggests; designers press Keep or Change. AI advice is never applied on its own.
-
Consistency, not brand policy
it trusts the design system in the file. client tokens that fail a check are flagged, never changed: that's the client's call.
-
Keep, but not forever
kept items stay hidden in future scans, but come back if the value changes, so a real problem never stays hidden.
Workflow 2 of 3 · banners
Banners in minutes, not an hour
The problem
Gardens by the Bay sends 4 to 5 banner requests a week, each needing a masthead and a square thumbnail. by hand, a set took 15 minutes to an hour.
What I built
a Claude Code workflow that picks up the request, edits, checks and delivers it. it began fully automatic, but some banners needed their own style, so now it pauses for me to choose the layout.
- <5 min per banner set, down from up to an hour
- 4–5 banner sets a week
banners · the workflow
how a request gets done
-
Step 1 · the request
Picked up from Trello
each request arrives as a Trello card, with the original artwork attached.
-
Step 2 · inventory
Everything on the banner
it lists every piece of text and separates the layers, so nothing gets lost or squashed.
-
Step 3 · layout
I decide the layout
it first ran end to end from one command, on my rules. some banners needed their own styling, so now it stops here and i choose the layout.
-
Step 4 · checks
Safe areas and balance
each file is checked against the safe areas and for balance, so nothing looks like AI slop.
-
Step 5 · delivery
Back on the card
both files are uploaded to the Trello card, and it moves to Done.
banners · the work
before and after
-
the original artwork, as it arrives
The original
- each request arrives as a Trello card, with the artwork attached.
- it has to become a 1920×1080 masthead and a square thumbnail.
- by hand, a set took 15 minutes to an hour.
-
every layer found and ranked, before any editing
Layers, ranked
- seven parts found: the offer, the headline, the terms, the flower bag, the petals, the decorative flowers and the background.
- numbered by importance, so the text and product are protected first.
- i decide the layout from this, before anything is moved.
-
the final masthead; the thumbnail follows the same steps
The final masthead
- the headline and the flower bag stay together, inside the safe area.
- the background is extended to the new edges, so nothing important gets cut off.
- checked for balance before it goes back on the card.
- the square 1080×1080 thumbnail goes through the same steps.
Workflow 3 of 3 · HubSpot talent automation
A talent profile from a single link
The problem
the team copied every job enquiry into a spreadsheet by hand. and anyone found outside the website, like a promising LinkedIn profile, had to be added to HubSpot one by one.
What I built
i connected the website's job openings to HubSpot, so each application becomes a contact on its own. i also trained HubSpot's AI so hiring managers can paste LinkedIn or portfolio links, several at once, and get contacts filled in and scored.
- 1 link is all a hiring manager needs to add a filled-in, scored profile
- 50%+ less time on candidate admin, estimated
an estimate, not a measured figure: hiring managers no longer update spreadsheets or track candidates by hand, so that time goes into hiring instead.
HubSpot talent automation · how it works
two ways in, one place to look
-
Way in 1
A website application
a candidate applies to a job opening on the site.
-
Way in 2
Links from a hiring manager
LinkedIn or portfolio links, pasted in, several at once.
HubSpot's AI
fills in the details and scores each person on the team's own system, with reasons.
A ready contact
filled in, scored and easy to compare. no spreadsheet, no copying by hand.
and the data never leaves HubSpot.
HubSpot talent automation · the mess in between
what didn't work, and what did
-
It couldn't read profiles
i tried ChatGPT first. it connected to HubSpot, but couldn't read LinkedIn or update contacts. HubSpot's own AI reads the link and builds the profile.
-
It couldn't judge talent
it couldn't summarise a candidate either. i trained HubSpot's AI to score talent on the team's own system, and explain each score.
-
Keep the data in one place
sending talent and lead data to a second AI service was a real worry. with HubSpot's own AI, it never leaves the platform.
reflection
what I learnt so far
"i started with zero knowledge, automating the most annoying task of my day. then it became an obsession."