# Building With an AI-Augmented Design Workflow — Autokrator.ai

**Designer:** Topp Brocales · Design & Development Partner (freelance)
**Client:** Autokrator.ai (https://autokrator.ai) — B2B compliance automation platform
**Deliverable:** Full marketing website — strategy, architecture, copy, design and build
**Role:** Full-service web partner (strategy, design, development, copywriting, UX)
**Timeline:** December 2025 – ongoing
**Key Result:** Full marketing website shipped by a solo practitioner using an AI-augmented workflow

## Summary

A full marketing website: strategy, architecture, copy, design and build — shipped by a team of one. This project is a proof of concept for how AI tools can augment a solo designer's workflow to work at a depth that wouldn't have been possible before.

## The AI-Augmented Workflow

This wasn't about moving faster. It was about working at a depth that wouldn't have been possible solo.

### Concept Generation at Scale
A structured page architect skill was built that uses AI to generate multiple strategic variations before committing to a direction. Instead of showing a client one concept, three or more could be shown, each with a distinct narrative strategy baked in:

- **Trust & Credibility-First** — front-load compliance framework badges, enterprise logos, regulatory credentials before any feature talk
- **Problem-First** — open with the audit failure scenario, mirror the pain, then introduce Autokrator as the relief
- **Feature-Dense** — lead with technical depth for buyers deep in evaluation

Each variation had real placeholder copy grounded in the brief — not lorem ipsum, but actual positioning.

### Design-to-Code with Figma MCP
Once direction was confirmed, Figma MCP was used to move from design into code without the usual translation loss. The integration maintained design intent rather than approximating it through manual handoff.

### The Product Screenshot Generator
A custom pipeline was built: Python/PIL + Playwright to render HTML-rebuilt UI screenshots with a section highlight treatment matching the design system. This produced polished, on-brand product previews for five distinct feature areas.

### Claude Code for Development
Claude Code was used for development tasks — particularly custom JS injection via WPCode, geo-redirect implementation, and custom navigation modal behaviour.

## Outcome

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

The tools change. Instinct doesn't. The systems built here are open-sourced on GitHub.