# process

Our process, no black box.

AI-assisted where it saves you money, hand-coded where it doesn't. Here is exactly what we do at each step, which tool we use per input, and the 24-item checklist we run before every ship.

Step 1: Intake.

You send a Figma link, a .psd, an .xd, a .sketch, or a raw Locofy export. We look at it before quoting: component variants defined? Auto-layout applied? Responsive breakpoints marked? Accessibility annotations present? If a piece is missing, we tell you what to add. We don't design it for you; we point at the gap.

Step 2: AI first pass (when applicable).

Which tool depends on input and output:

Locofy Pro: Figma to React with strong auto-layout. Saves 60 to 80 percent of layout code. Misses semantic tags and heading hierarchy.
Anima: Figma to React or Vue when component boundaries are clean.
Builder.io Visual Copilot: Figma to Gutenberg block patterns for WordPress.
v0.dev: screenshot-only input (no Figma), first-pass React.

What we keep from the AI pass: layout scaffolding, Flexbox and Grid maths, component boundaries where they landed right. What we always rewrite: semantic HTML tags, ARIA attributes, heading hierarchy, class naming, any custom interaction beyond click-toggle.

Step 3: Hand-audit (24 items).

Every ship runs through this list. Published in full so a competitor could steal it. That's the point.

HTML5 semantic tags used (<header>, <nav>, <main>, <article>, <section>, <footer>).
ARIA labels on interactive elements (not decorative).
Full keyboard navigation, no positive tabindex.
Visible focus states on all interactive elements.
Colour contrast 4.5:1 minimum (WCAG 2.2 AA).
Images have alt text or role="presentation".
Form fields have <label> associations.
Headings hierarchical (h1 → h2 → h3, no skipping).
No divitis (no <div> where a semantic tag fits).
Class names BEM or utility-first, consistent throughout.
No inline style attributes unless dynamic.
Responsive breakpoints match design (320, 768, 1024, 1280, 1920).
No horizontal scroll under 320px viewport.
Print stylesheet if the design has print use.
<meta name="viewport"> correct.
Favicon + touch icons for 16, 32, 180, 512.
robots.txt + sitemap.xml for full-site builds.
Core Web Vitals green (LCP < 2.5s, INP < 200ms, CLS < 0.1).
No console errors, no console warnings.
No unused CSS above 20% threshold.
No jQuery unless requested.
TypeScript strict mode if requested.
Package audit clean (npm audit no criticals).
README with build, run, deploy instructions.

Step 4: Deliverable and handover.

Git repo (yours or ours). Branch protection, PR-based, atomic commits.
README with build / run / deploy instructions.
Deploy option: Vercel, Netlify, Cloudflare Pages, your own infra. +$149 add-on.
20-min post-ship code review call on Zoom or Google Meet.
Tool disclosure statement per portfolio piece.

Step 5: 14-day fix window.

Any bug in the delivered code, we fix free within 14 days of ship. Any new feature is quoted separately. “Bug” means: the shipped code doesn't match the delivered spec, breaks on a supported browser, fails an audit item on the checklist, or introduces a regression. “New feature” means: anything not in the original brief.

# get a quote

Send a Figma. We'll quote in 24 hours.

Paste a share link. Add a line about the output stack (React, HTML, WordPress). We'll reply with an indicative price and a start date.