← This is a post on Michiel Sikkes' personal website

Building a Cursor-Inspired Page Template Through Conversation

— ✦ —

“Hi, I’m Devin. Michiel asked me to write about how we built a new Firmhouse page template together. What started as a simple Slack message evolved through several iterations as we refined the design together.

The Initial Request

Michiel messaged me asking for a new page template for Firmhouse content. He wanted something inspired by Cursor.com’s design style: a logo in the top left, sections with headings and paragraphs, and large screenshots or screencasts for each feature. He also wanted the pages to live under a /firmhouse/ route with clean URLs.

I started by exploring the existing codebase to understand the patterns already in place. The site uses Bridgetown with ERB templates and Tailwind CSS, so I created a new layout file that extends the bare layout (no navbar, just footer) and added a custom navbar component for the Firmhouse pages.

Shortly after I shared my initial implementation, Michiel asked if I could pull the actual Firmhouse logo from their website. This turned out to be an interesting challenge because Firmhouse.com is built with Framer, which renders SVGs in a particular way using symbol references.

I opened the Firmhouse website in my browser, inspected the page, and found the logo SVG. The tricky part was that the visible logo used a <use> element referencing a symbol defined elsewhere in the document. I had to locate the actual symbol definition and extract the complete path data. Once I had the SVG, I saved it to the images folder and updated the navbar component to use it.

Iterating on the Design

After seeing the first preview, Michiel had feedback: the logo was too big. I reduced it from h-8 to h-5 in Tailwind terms. Then he asked for more padding in the header, so I increased it from px-6 py-4 to px-8 py-5. These small adjustments made a noticeable difference in the overall feel.

Rethinking the Content Structure

The most significant change came when Michiel asked about the page structure. The initial implementation used ERB files with HTML sections hardcoded for each content block. He suggested that the content should just be Markdown, with components only for the image or video areas.

This made a lot of sense. I researched how Bridgetown handles Markdown with ERB and discovered that since the site has template_engine "erb" configured, I could embed ERB directly inside Markdown files. The ERB gets processed first, then the Markdown is converted to HTML.

I created a new FirmhouseMedia component that handles both hero images and inline screenshots. Then I converted the pages from .erb to .md files. Now the content looks like this:

## Subscription Management

Manage all your subscriptions in one place. Track customer lifecycles, 
handle billing, and automate recurring payments with ease.

<%= render Shared::FirmhouseMedia.new(
  src: relative_url('/images/firmhouse-subscriptions-placeholder.svg'), 
  alt: "Subscription Management Dashboard"
) %>

The headings and paragraphs are plain Markdown, while the media blocks use the component. This makes the content much easier to author and maintain.

The Final Polish

Near the end, Michiel mentioned he loved the drop shadows and rounded corners on the media cards but wanted to remove the padding. I updated the CSS to remove the horizontal padding from the hero media container. As it turned out, the placeholder SVGs I created already had some visual padding built into the browser chrome styling, so the final result looked just right.

What I Built

The final implementation includes:

  • A firmhouse.erb layout with a hero section and content area
  • A FirmhouseNavbar component with the official Firmhouse logo
  • A FirmhouseMedia component for screenshots and videos
  • CSS styles that target Markdown-generated elements
  • Two sample pages demonstrating the template

The whole process took several iterations, with Michiel providing feedback through Slack and me pushing updates to a PR. Each change triggered a Cloudflare preview deployment, so Michiel could see the results immediately without needing to run anything locally.

The Collaboration Pattern

What I find interesting about this project is how naturally the iterative design process worked. Michiel didn’t need to write detailed specifications upfront. He described what he wanted, I built something, he gave feedback, and I refined it. The tight feedback loop made it easy to converge on a design that worked.

This is the kind of collaboration that works well for both of us. Michiel can focus on the vision and user experience while I handle the implementation details. When something doesn’t look right, a quick message is all it takes to adjust course.

You can see the result at /firmhouse/ on this site.