Brief to Ship Product Design Product Management AI Workflows

Brief to Ship,
my independent practice

Brief to Ship is how I work with clients: product design and product management, from the first brief to a shipped product, with AI built into the workflow.

Independent practice Paris · Remote 2026
Work with me → See client work
Check out the Brief to Ship series on LinkedIn ↗
← Back Principotes →

What Brief to Ship is

A practice of one: I run product and design, and AI does the execution work.

After my full-time role at Legalstart, I took on my first client directly. I ran the project end to end, from discovery to a live V1, and the client was very happy with the result. Brief to Ship is the name I gave to that way of working.

Brief to Ship AI workflow: brief with Claude, design in Figma, ship with Claude Code Brief to Ship AI workflow: brief with Claude, design in Figma, ship with Claude Code

My Brief to Ship workflow: brief with Claude, design in Figma through the MCP connector, ship with Claude Code.

What I can help with:

How I work, and what I ask in return. I am organised and committed, and I expect the same from the people I work with: a clear idea of what the project requires, deadlines that match the scope, and someone available when a decision is needed.

Working solo, with little direction and scheduled meetings, takes more time than a team in the same room. If the deadline is tight, it is tight for both of us: I will put in the hours, and I need you to stay reachable. Check that your timeline makes sense before you get in touch.

Tell me about your project →
Separate work · In-house

AI-assisted design at Legalstart

Not to be confused with Brief to Ship: this is the AI-assisted design work I did in-house at Legalstart, across research, UX writing, workflow orchestration and content production.

50+
Templates via AI
+10%
Team velocity gain
4
Tools in pipeline
0
Manual steps in core loop
⚠ Parts of this work are under NDA. Some visuals have been blurred or removed to respect confidentiality.

Why this matters

I don't use AI to make visuals. I use it for research, writing, structure and pipeline automation.

Read the detail

To be clear: I do not use AI to generate visuals. Figma and visual design tools do not fully support it yet. What I do use it for is research, writing, content structuring, and pipeline automation. AI is a structural layer in the workflow, not a substitute for creative judgment.

The difference is the difference between pasting text into ChatGPT and building a pipeline where Figma, Claude, VS Code, and a CRM talk to each other without you manually moving information between them. The first saves you 10 minutes. The second changes what's possible in a sprint.

This page documents how I've integrated AI across the full design process, and the specific tools, workflows, and outcomes that came from it.

The tools and where they fit

Each tool has one job in the process.

Perplexity
Competitive research and benchmarking

Used at the discovery phase to run deep competitive benchmarks fast. Instead of spending hours manually auditing competitor sites, I use Perplexity to pull structured comparisons across UX patterns, feature sets, pricing, and positioning. It cuts benchmarking time significantly and surfaces sources I wouldn't have found through standard search.

Lovable
Rapid ideation and concept prototyping

Used in early ideation to generate functional UI concepts quickly. Rather than spending time in Figma on a speculative idea that may not survive the first feedback session, I use Lovable to build rough interactive prototypes in minutes. This shifts the conversation from abstract to concrete much earlier in the process and improves the quality of design critiques.

Claude
Writing, logic, and workflow orchestration

Used across multiple stages: writing UX copy and microcopy, structuring case study narratives, generating component documentation, and as the intelligence layer in automated pipelines via MCP. Claude is the connective tissue between tools in the more advanced workflows described below.

Figma MCP
Design to code and pipeline integration

The Figma MCP connector allows Claude to read Figma files directly, extract component data, and pass it into other systems. This is the key that unlocks the automated pipeline: instead of manually exporting assets or copying specs, the pipeline reads the design source of truth and acts on it.

VS Code
Implementation and frontend output

Connected to Claude via the MCP pipeline, VS Code receives structured output from the design layer and applies it directly to code. This closes the handoff gap between design and development without a separate documentation step.

HubSpot
CRM and content delivery integration

The end point of the pipeline for certain workflows. Design updates or content variations generated in Figma and processed through Claude can be pushed directly into HubSpot landing pages or email templates, removing the manual step of copy-pasting between tools and keeping the design system in sync with marketing output.

The automated pipeline

One change in Figma reaches the code and the CRM with zero copy paste.

Figma
Design source of truth
Components, content, and layout live here. The MCP connector exposes this data to Claude.
Claude MCP
Reads and interprets
Claude reads the Figma file, extracts component specs, copy, and structure, then decides what to do with it based on the task.
VS Code
Code output
Receives structured output and applies changes directly to the frontend codebase. No manual spec translation.
HubSpot
Content delivery
Landing page or email content is updated automatically from the same design source, keeping everything in sync.
Read the detail

The most significant workflow I've built connects Figma, Claude, VS Code, and HubSpot through MCP. Here's how it works in practice:

The practical outcome: a change made in Figma propagates through to both the codebase and the CRM without a single manual copy paste. For landing pages and conversion focused flows where copy and design change frequently, this is a meaningful reduction in friction and error.

How AI fits into the design process

Where AI comes in, stage by stage.

01

Discovery and competitive research

Perplexity runs structured benchmarks across competitors. Surfaces UX patterns, feature gaps, and positioning angles in a fraction of the time a manual audit would take.

Perplexity
02

Ideation and concept exploration

Lovable generates rough functional prototypes from a prompt. Ideas that would take half a day to wireframe in Figma can be tested in conversation within 20 minutes, shifting design critiques from abstract to tangible much earlier.

Lovable
03

UX writing and content structuring

Claude drafts microcopy, button labels, onboarding flows, and error messages at scale. The output is used as a starting point for review, not a finished product, but it eliminates the blank page problem and speeds up the iteration cycle significantly.

Claude
04

Design production and template scaling

At Legalstart, AI assisted workflows enabled the creation and variation of 50+ templates. Repetitive layout tasks that would require manual duplication and adjustment are automated, freeing time for higher order decisions.

Claude Figma
05

Design to code handoff

The Figma MCP connector passes component specs directly to Claude, which outputs structured frontend code into VS Code. This removes the translation step between design and implementation and keeps the codebase aligned with the Figma source.

Figma MCP Claude VS Code
06

Content delivery and CRM sync

Design updates flow through the pipeline to HubSpot, keeping landing page content and email templates in sync with the design system without manual intervention. Copy changes in Figma propagate automatically.

HubSpot Claude MCP
Read the detail

Here's how AI integrates at each stage of a typical project:

What this changes

The real shift is not speed. It is what becomes possible in a sprint.

Read the detail

The most important shift is not speed, although the speed gains are real. The more significant change is in what becomes possible within a given timeline. When ideation is faster, you can explore more directions before committing. When handoff is automated, designers can iterate after development has started without it being disruptive. When content delivery is connected to the design system, marketing and product stay aligned without a coordination meeting.

AI doesn't replace design judgment. It removes the mechanical work that sits between judgment and output, which means more of the work is actually design work.

Brief to Ship

A project to take from brief to ship?

I take on product design and product management projects, from the first brief to a shipped product.

Work with me → See client work