AI DESIGN · ENGINEERING WORKFLOW

AI-Assisted Design-to-Code Workflow

← Back to work

A designer who can submit a Pull Request. No developer required.

Product

Sola Cloud — EV Charging SaaS Platform

Stack

React · Angular · MUI · Tailwind

Role

Senior Product Designer

Tools

Claude · Claude Code · VS Code · Git · GitHub

Overview of the AI-assisted design-to-code workflow on the Sola Cloud production codebase — AI-assisted design-to-code workflow — Sola Cloud

Context

Working independently, I set up a full local development environment on macOS and integrated Claude Code into a production engineering workflow — enabling me to deliver UI changes directly as GitHub Pull Requests without developer handoff.

The Workflow

The pipeline replaces the traditional designer-to-developer handoff with a direct design-to-code loop.

Plan

Claude (chat) is used to analyse the design intent, understand the codebase context, and prepare precise prompts before touching any code.

Describe

UI changes are described in natural language to Claude Code inside VS Code, using the prompts prepared in the planning stage. No manual coding required.

Preview

Changes render live in a local browser with hot reload, allowing immediate visual validation against design intent.

Iterate

Adjustments are made conversationally with Claude Code until the result matches design intent.

Submit

Changes are committed and pushed to a feature branch, then submitted as a GitHub Pull Request for developer review and merge.

Claude Code was configured with permission scoping — restricted to frontend files only, with an allowlist of safe bash commands. This prevented accidental edits to backend logic while keeping the workflow fully operational for UI work.

Visual Artifacts

VS Code showing Claude Code settings.json configuration file for the Sola Cloud monorepo — Claude Code integrated into VS Code — settings configured for the production monorepo

VS Code with Claude Code panel open showing Local and Web session options — Claude Code panel — AI assistant operating directly inside the development environment

Chrome browser showing Sola Cloud running locally at localhost:4209 — Local development environment running at localhost:4209 — live preview of UI changes

GitHub Pull Request showing UI modernization changes co-authored by julie-sola and claude — Pull Request #1417 — 7 commits, 40 files changed, co-authored by Claude

Technical Capabilities

macOS Developer Toolchain — Xcode Command Line Tools, Homebrew, Node.js via nvm, shell environment configuration
Version Control — Git branching, commits, GitHub CLI authentication, Pull Request workflow, multi-account management
AI-Assisted Development — Claude Code setup and configuration, permission scoping, frontend-safe environment, AI-to-code pipeline operation
Local Development — Monorepo setup, dependency management, local dev server, staging environment access with 2FA
Design-to-Engineering Delivery — UI changes delivered as production-ready Pull Requests, reviewed and merged by the engineering team

Outcome & Reflection

The PR co-authored by Claude is not a curiosity. It is evidence of a new kind of design practice.

The result is a fully operational AI-assisted design-to-code pipeline on a production-grade SaaS platform — delivering UI changes as GitHub Pull Requests, reviewed and merged by the engineering team.

This changes the designer-developer relationship in a meaningful way. Rather than handing off specifications and waiting, design intent reaches production directly — with full version control, code review, and engineering oversight maintained throughout.

The PR co-authored by Claude is not a curiosity. It is evidence of a new kind of design practice — one where the gap between design and implementation is closed not by hiring more developers, but by expanding what a designer can execute independently.

This is not about replacing engineers. It is about a designer who can speak their language fluently enough to deliver work on their terms.