How Disembark got built
Disembark is a WordPress backup tool. This reads how its marketing site got rebuilt from a design file: implement it faithfully, then fight the browser until mobile behaved.
Disembark the backup tool, a WordPress plugin and CLI, already existed, and so did an earlier version of this site on an older design. This reads the rebuild of the site from a fresh Claude Design file.
The route, plotted
Seven waypoints over a week, from a design file to a deployed site. Hover any marker to read the direction that set it.
Faithful to the design, then a fight with mobile
The build had a single source of truth from the first message: a Claude Design file. The work was a loop of implementing it, then diffing the result against it.
Fetch this design file, read its readme, and implement the relevant aspects of the design.
A design source turns "this looks off" into an exact diff. Even the punctuation was in scope:
Things different from my Claude design vs disembark.localhost - Content has many em-dashes.
The rest was mobile. The desktop matched quickly; the phone took the real work.
Local does not look good. No spacing to the left/right of the text.
What came next
A week from a design file to a deployed, mobile-correct site.
Implement the design. Fetch the Claude Design file and build the landing page from it.
Diff against the source. Compare local to the design: hover styling, spacing, em-dashes.
Fix mobile. Crunched text and missing padding on a real phone viewport.
Deploy and capture the path. Ship to production, then write a /dev-disembark skill so the next deploy is a runbook.
What to borrow
Building a page from a design, with an agent, rewards a few habits.
A source of truth turns "wrong" into an exact difference. Most instructions were "here is where local differs from the Claude design."
The desktop matched fast. The phone took the week. Test the real target, not just the emulator.
"Remove the two CTAs, they feel redundant." "Remove the em-dashes." Trimming and polish steer the result as much as features.
The session ended by writing a deploy skill, so shipping is a runbook next time, not a rediscovery.
If you built this again
Knowing the desktop matched fast and the phone took the week, here is how you would start a similar site. Copy a prompt and adapt it.
Sets the design as the source of truth and the diff-against-it loop from the first message.
Where the original build spent most of its time.
The runbook the original build only wrote at the end.
This recap is the output of an editor pass over the project's agent transcripts. A deterministic extract (command-center flow --editor) pulls the direction, the agent trace, and the embedded screenshots from the most representative session. A single model pass captions each image and writes the narrative.
Every quoted heading is verbatim, typos and all. Landmark captions were recovered from images embedded in the transcript, then summarized. The originals are never reproduced or shared.