AI is a working part of how the team builds software. Not a demo. Not an experiment on the side. A practical tool that shows up in real client and internal projects, accelerating delivery while preserving the engineering judgment that turns a working prototype into a finished product.
Full Site: https://onl.li
Phone Conversation Screenshot Generator: https://onl.li/tools/phone-conversation-screenshot-generator-450
A recent internal project illustrates how that workflow operates end to end: a browser-based phone mockup generator that lets a user type a chat conversation, pick a platform (iPhone, Android, or WhatsApp), tweak settings like dark mode and battery level, upload a profile picture, and download a high-resolution PNG of the result. Single HTML file. No backend. Fully responsive. The kind of utility that ships fast and pays back for years across content creation, pitch decks, support documentation, and marketing assets.
This is a brief walk-through of how that project came together — what AI handled, where the team stepped in, and why the combination produces better outcomes than either approach alone.
The Starting Point
The project began with a clear brief: build a phone mockup generator that produces realistic-looking chat screenshots, supports multiple platforms, and works entirely in the browser. The end users would be marketing teams, content creators, and product managers — non-developers who needed a fast way to produce convincing mock conversations without booting up Figma or hand-rolling assets in an image editor.
The constraints were specific:
- Single HTML file. No build step, no npm, no framework dependencies that would complicate distribution.
- Three platform skins out of the box. iPhone (with iMessage styling), Android (Messages app styling), and WhatsApp.
- High-resolution PNG export. Output had to be crisp enough for use in published marketing materials.
- Responsive layout. Usable on desktop, tablet, and mobile breakpoints.
- Editable everything. Time, battery, sender name, status text, profile picture, full message thread.
Constraints like these are exactly where AI-assisted development pays off. The work is well-scoped, the deliverable is clear, and the technical decisions sit inside the experience of the senior engineers reviewing the output.
How the AI Worked Through the Build
The team used Claude (Anthropic’s AI assistant on claude.ai) as the primary code-generation partner across the project. The workflow was iterative — feature by feature, with the AI producing roughly 90% of each implementation and the team reviewing, refining, and tuning the result before moving on.
A typical cycle looked like this:
- The engineer described the next feature in plain language, with constraints, reference screenshots, and any relevant context from earlier in the build.
- The AI produced a working implementation — HTML, CSS, JavaScript, all properly scoped to the existing structure.
- The team reviewed the output for correctness, performance, accessibility, and consistency with the rest of the codebase.
- Targeted refinements were applied — sometimes via follow-up prompts, sometimes by hand when manual editing was faster.
- The feature was tested across browsers, screen sizes, and edge cases before moving to the next one.
This rhythm — describe, generate, review, refine, test — is the core of how AI-assisted development actually works at scale. The AI accelerates the implementation. The humans set direction, enforce quality, and catch the things the AI cannot see.
Where AI Carried the Load
Several parts of the project moved much faster than they would have without AI assistance.
Multi-Platform Architecture
The phone preview needed to support three visually distinct platforms — iPhone, Android, and WhatsApp — each with its own header layout, bubble shapes, color palettes, input bar styling, and navigation patterns. The team designed the architecture (one shared DOM structure, platform skin classes applied via JavaScript templates, scoped CSS for each variant). The AI implemented all three skins from that architectural direction in a single working pass.
Live Preview Wiring
Every input in the settings panel needed to update the phone preview in real time. Editing the contact name updates the header and avatar initials. Toggling dark mode flips the entire screen. Adding a message inserts a new bubble. The AI produced the full event-handler graph and render functions cleanly, on a vanilla JavaScript foundation with no framework dependency.
High-Resolution Image Export
Integrating html2canvas for PNG export — including the configuration needed to capture drop shadows correctly, the 3× resolution multiplier for retina output, the loading-state UX on the download button, and the smart filenames that include the active platform and dark-mode state — came together in a single iteration once the requirements were clearly stated.
Responsive Breakpoints
Three breakpoints (>1024px desktop, 860–1024px tablet, <860px mobile) with specific behaviors at each — sidebar narrowing, sidebar stacking above preview, phone scaling, buttons collapsing to icon-only — were all implemented cleanly without back-and-forth.
Where the Team Stepped In
AI is excellent at execution from a clear spec. It is less reliable when the spec itself requires visual judgment, when an asset needs to match a known reference pixel-for-pixel, or when a bug only surfaces through real-device testing. Several moments in the build required the engineering team to intervene directly.
The iMessage Bubble Tail
This was the most instructive part of the project. iMessage chat bubbles have a distinctive curved tail extending from the bottom corner. The shape looks simple but turns out to be remarkably hard to reproduce with pure CSS or SVG, because it has exactly one correct form — the one Apple’s design team drew — and any procedural approximation lands close but visibly wrong.
After several rounds of attempts with CSS pseudo-elements and SVG paths, the team made a judgment call: stop iterating on procedural shapes and switch to PNG assets. Two small files, designed by hand, dropped into the project as background-image references in the CSS. The result matched real iMessage exactly. Total time invested in the asset approach: significantly less than what had already been spent iterating on procedural alternatives.
The general lesson — when a shape has one correct version, an asset is more reliable than an algorithm — is exactly the kind of pattern senior engineers recognize and act on. The AI cannot make this judgment because it does not have the visual feedback loop. The team can, and did.
Final Polish and Pixel-Level Positioning
Once the PNG tails were in place, the exact CSS offsets needed manual tuning. Sent and received tails sit at slightly different vertical positions relative to their bubbles in iOS, which is a detail that only becomes visible when both are on screen together. Two-minute adjustment by hand, after which the bubbles read as authentic.
Cross-Browser and Cross-Device Validation
The team verified rendering, capture quality, file upload behavior, and responsive layout across Chrome, Safari, Firefox, iOS Safari, and Android Chrome. Several small adjustments emerged from that testing — including the discovery that html2canvas capture fails silently when the page is opened via file:// and references local PNG assets, which led to a documented setup recommendation (run a local server or inline the assets) so end users would not hit the failure case.
Bug Triage on a Subtle Event-Order Issue
A dark-mode toggle bug appeared late in the build: the switch’s visual state was always one click behind the phone’s actual appearance. The root cause was two event handlers running in the wrong order on the same click — a generic class-toggling handler and a specific state-reading handler. The team identified the symptom precisely, described it back to the AI (“the phone goes dark when the switch shows OFF and light when the switch shows ON — they are out of sync”), and the targeted fix came back immediately. Without the precise human-side description, the bug would have been harder to surface.
Team Review
After feature work was complete, the full project went through internal review:
- Code review for structure, naming, scoping, and maintainability.
- Design review for visual fidelity against real iOS, Android, and WhatsApp interfaces.
- UX review of the settings panel — labels, defaults, micro-copy, error states, and the file upload flow.
- Accessibility check on color contrast, keyboard navigation, and ARIA attributes on interactive elements.
- Performance review of render functions and the avatar data-URL handling to confirm the live preview stayed responsive.
- Cross-device QA across the target browser and OS matrix.
The review surfaced a handful of refinements — including the body.has-tail-images opt-in class pattern that keeps html2canvas from failing when the optional tail assets are missing — which were applied before the tool was finalized.
The Final Product
The completed tool is now live and in active use. The feature set includes:
- Three platform skins — iPhone, Android, WhatsApp — each with accurate visual styling
- Dark mode for the iPhone skin
- Show/hide toggle for the phone body, enabling both device-framed and screen-only screenshots
- Full editing of time, battery percentage, connection type, sender name, status, and profile picture
- A dedicated Messages tab with a composer (Me / Them / Date types), message list, and one-click delete
- High-resolution PNG export at 3× retina resolution, with separate “Full Mockup” and “Screen Only” download options
- Responsive layout from desktop down to small mobile breakpoints
- Client-side file upload for profile pictures with type and size validation
- A single self-contained HTML file plus two small PNG assets
What This Project Demonstrates About How Power Digital Services Works
The phone mockup generator is a small project, but it is representative of how the team operates on larger client engagements. A few patterns are worth highlighting:
AI accelerates implementation, not judgment. The 90/10 split — 90% of the code generated by the AI, 10% refined or replaced by the team — is typical of how AI-assisted development should work. The AI handles the volume of structured implementation work. The team handles direction, quality, and the calls that require human taste or domain experience.
Clear specifications produce better AI output. The team’s discipline around scoping each feature, stating constraints upfront, and providing reference materials made the AI’s output usable on the first pass much more often than it would have been with vague prompts. This is a skill that is becoming central to modern engineering practice.
Knowing when to switch approaches is more valuable than persistence. The bubble-tail episode is the clearest example. The willingness to abandon procedural rendering in favor of a PNG asset — after recognizing the pattern — saved time and produced a better result. That recognition comes from experience, not from prompting.
Review is non-negotiable. AI-generated code is not finished code. It is fast first-draft code. The review layer — code, design, UX, accessibility, performance, QA — is where the team adds the value that turns AI output into a shippable product.
The compounding benefit. Every project like this one builds the team’s working knowledge of where AI helps and where it does not, which prompts produce what kinds of output, and which patterns are worth standardizing. That accumulated experience translates directly into faster, more predictable delivery on client projects.
Working With Power Digital Services
Projects of this kind — practical, well-scoped, AI-accelerated builds — are a fit for a wide range of client needs: internal tools, marketing utilities, content generators, calculators, data-entry interfaces, and customer-facing micro-applications. The team’s expertise lies in combining AI assistance with the architectural, design, and quality-assurance experience that turns a fast prototype into a finished product.
The phone mockup generator was built in a fraction of the time a traditional development cycle would have required, with no compromise on the final polish. That ratio — speed multiplied by quality — is what makes AI-assisted development worth the investment when the team driving it knows what they are doing.