Abstract'D
An AI service that reads a lease agreement and returns a clear, structured abstract: key dates, payments, obligations, and risks. Taken from the first client call to code handoff in seven days.
- My Role
- Product Designer
- Client
- Abstract'D – abstractd.io
- Timeline
- Apr 2025 · 7 days
- Tools
The Brief
People sign leases they rarely read in full. The client came with a clear product idea: let AI read the contract and hand back a plain, structured summary anyone can act on.
There was nothing to inherit: no documentation, no designs, no code. The ask covered the whole product: a brand-new design system, a landing page, and the product screens, designed and built straight into working front-end code.
The constraint set the method: seven days from the kickoff call to code handoff, with no budget for a classic research phase.
One call to start from
It all started with one brainstorm call. I asked the client everything I could fit in: web or mobile, visual taste, products they liked, constraints, where the accent should go, and what pushed them to build this in the first place.
PRD pipeline
The client had no documentation to hand over, so the pipeline built it: the vision and the call recording went in, and out came the idea, the brief, the research, and the PRD, step by step, each reviewed by hand.
A classic competitive analysis did not fit into seven days, and I did not pretend otherwise. The research document exists to sharpen the understanding of the product, not to perform a procedure.
Finding the visual direction
Direction came first: before any system work, I had to know what we were building towards. The search ran on the Mobbin MCP for fast pattern discovery, backed by the Freepik MCP for the vector side, with focused prompting in Claude Code shaping the output. The reasoning behind each direction came straight from the kickoff call. Tight as the timeline was, the client still got a real choice: two full directions, a clean neumorphic take and a brutalist art-tech one.
Design system creation
Instead of drawing screens, I started with the system. A set of master prompts I maintain built the foundations in Figma: full colour palettes, typography, spacing, light and dark modes, all as variables with strict scopes. Components came next, screens last, and nothing entered a screen that did not exist in the system.
From Figma to code
The system lived in Figma; getting it into code took more than a token dump. Documentation came first: the design system tokenized into a JSON file, a manifest describing how the system shows up in the interface, and a rules file the build must follow. Together, these three let Claude rebuild the design close to one to one in working front-end code. A JSON alone would never get there.
Design-tokens.json
The design system, tokenized
Manifest.md
How the system shows up in the interface
Rules.md
The rules the build must follow
What the client received
Not a deck and not a prototype: a working product. The landing, sign-up, a three-step upload flow, the account area, and the abstract report at the end of it.
Handoff, and what came after
What I handed off: the Figma files with the design system, two visual directions for the landing, and the product screens from upload to the final report; the design system carried into working front-end code; and the first clickable front-end build, which I committed to GitHub myself together with the full documentation for the client's developers to take on.
The product is live at abstractd.io. Since the handoff it has taken on changes of its own, monetisation through credit packs among them, and it is still being updated today; the colour system on the live site is still the one from the Figma file.
Reflections
The rough edge
What's next
Like what you've seen?
This case is a small slice of what I can do. If you are looking for a product designer, or your product could use the same depth, from the first call to working front-end code, get in touch.