Forma Studio

Design and code, delivered as one.

The brief

Build a UI-to-code design agency website for a studio that takes Figma files and delivers working frontend. Work portfolio, services breakdown, contact brief form.

Intake result: Mapped to Pro + Agency / Studio pack on intake. Client delivery structure, project ops, work portfolio, and QA workflow all map directly to the Agency / Studio pack configuration.

Key agents

Who ran, and what they produced.

@brand-designerDefine visual identity — palette, wordmark direction, voice

Brand brief: geometric sans wordmark (tight tracking), graphite canvas + zinc-100 text + warm yellow accent, voice: sparse, technical, zero filler.

@product-designerMap site architecture and UX flow for a studio where primary conversion is a project inquiry

Flow map: Landing → Services → Work → Contact. Recommendation to put work grid above services fold.

@tech-writerWrite Services page — scope, process, who it's for

4 service blocks (Design Systems, Component Libraries, Prototype-to-Code, Design QA) each with one-line definition, 2-sentence scope, typical engagement note.

@content-writerWrite landing hero, selected work teaser, contact page intro

"We build the interface. You ship the product." + 3 work teaser cards + contact intro that qualifies the reader.

@ui-designerDefine work grid layout — card structure, information hierarchy

Card spec: 16:9 thumbnail, client name, project type tag, year, one-line outcome. Recommendation to render odd-count grids as 2+1 not 3-across.

@tone-calibratorAudit all copy for voice compliance — sparse, technical, no filler

4 edits: removed 2 "passionate about" instances, replaced "world-class" with a specific output claim, cut one services paragraph from 6 lines to 3.

Build time

2 sessions · ~3 hours

From first message to deployable output.

Hardest decision

@brand-designer and @ui-designer aligning on work grid format. Initial card spec assumed square thumbnails — conflicted with the brand brief's recommendation for full-bleed interface screenshots. Resolved with explicit aspect ratio guidance in session 2.

What this proves

The Agency / Studio pack builds a site where visual decisions (sparse palette, precision copy, structured work grid) all reinforce the same positioning — not a template with swapped text. Answers: "AI can't produce taste-led creative work."

Get the Agency / Studio pack for your repo.

Answer 5 intake questions. The Agency / Studio pack ships in your Pro or Growth download — configured for your project.

Start the intake →← Back to showcase