Building With an AI-Augmented Design Workflow

A full marketing website: strategy, architecture, copy, design and build — shipped by a team of one.

Autokrator.ai is a compliance automation platform helping organizations in regulated industries monitor requirements, automate complex security workflows and keep them audit-ready without the manual labour.

The client brought me on as their design and development partner to help launch a marketing website for their B2B compliance automation platform.

The AI-augmented Workflow

The workflow wasn't just about speed. More importantly, it was about depth — the kind that usually requires a bigger team.

Concept Generation at Scale

I built a Claude page architect skill that produces several strategically distinct directions with separate narrative directions in parallel. Each one leads with a different story aimed at a different buyer. The client can react to a real choice rather than review a single proposal.

Solution-First wireframe — Concept 1: Solution-First — lead with the platform itself for buyers who already know they have a compliance problem

Feature-Dense wireframe — Concept 1: Solution-First — lead with the platform itself for buyers who already know they have a compliance problem

Visual elements were all sourced directly from the brand guide another designer worked on previously. The content was from the product brief and other marketing assets. Lastly, the layout options were generated from a predefined library. The skill can mix and match different variations, as well as generate new ones on the fly.

This would have taken days of traditional concept design. With the workflow in place, I could generate and refine across multiple strategic approaches in hours.

Design-to-Code with Figma MCP

Once direction was confirmed, I used Figma MCP to move from design into code without any usual translation loss. The integration let me work in Figma and push directly into the WordPress/Kadence build environment — maintaining design intent rather than approximating it through manual handoff.

The Product Screenshot Generator

Product screenshots are almost always the hardest asset to produce in B2B SaaS marketing — the actual product UI is often too dense, too early-stage or too restricted to show directly.

Raw product screenshot before treatment — Before — raw product UI: dense, early-stage, hard to use as a marketing asset

Polished product screenshot with section highlight treatment — Before — raw product UI: dense, early-stage, hard to use as a marketing asset

I built a custom pipeline: Python/PIL + Playwright to render HTML-rebuilt UI screenshots with a section highlight treatment that matched the design system. This meant I could produce polished, on-brand product previews for five distinct feature areas of their product.

Claude Code for Development

On the build side, I used Claude Code for development tasks — particularly custom JS injection via WPCode, the geo-redirect implementation and the custom navigation modal behaviour. This kept me moving without context-switching between design and dev modes.

Outcome

The site launched on schedule, even after updating the messaging mid-project to counter a direct competitor entering the market. I adapted and kept moving. The AI-augmented workflow meant I could move at a pace and depth that a solo operator couldn't sustain in the past.

This project is a proof of concept for how I'm adopting AI as part of my core workflow, but knowing which tool to reach for, and when, is a judgment call that only comes from years of doing the work. The tools change. Instinct doesn't.

The systems built here are open-sourced on GitHub. They're a part of a series of skills I'm building for web and product freelancers.