Ship the Surface
A focused marketing site and the workflow behind it
Twenty-three visual slides show how to compose a complete service website, using a fictional social media marketing agency for housecleaning businesses. Explore the hero, services, sample creative, testimonials, process, FAQ, booking, contact, and footer with animated walkthroughs. Finish with agent-readiness and speed checks, the October 10 hands-on workshop, October 17–18 hackathon, and our community sponsors. The public resource library includes the local kit and upstream marketing skills for follow-up work.
Workuity Biltmore — 2390 E Camelback Rd, Suite 130, Phoenix, AZ 85016. Workuity is the venue sponsor for every meetup in this series. Event links go live closer to the date; these point at the Ship AI calendars.
Venue sponsor: Workuity. Format: the host builds live on screen. Bring a laptop and work along, or just watch — nobody is put on the spot.
Why this session
A marketing site is the one asset every channel points at. Get it wrong and every visitor you earn leaks out of it. Most builder sites fail the same three ways: the hero describes the technology, the proof is adjectives, and there are five competing CTAs. None of those are fixed by a faster build — they're fixed by judgement, which is what the live session is for.
What we cover
- 01
The structure
Sections, the order they go in, and what the page has to accomplish before it earns a scroll.
- 02
Teardowns, live
Good sites and bad ones, pulled apart on screen. Send yours ahead in Discord if you want it looked at.
- 03
Positioning above the fold
The one-liner from session four becomes the hero. If it doesn't survive contact with the page, the positioning was the problem.
- 04
Proof over adjectives, one CTA
What counts as evidence to a stranger, how little of it you need, and cutting everything that competes with the primary CTA.
- 05
Make the service visible
Content creation, social management, and local campaigns: show the deliverables, responsibilities, and sample work.
- 06
The content plan
Working backwards from what an ICP searches for to the first twenty pages. Generation itself is a skill file, not a lecture.
- 07
Value before the call
Try a short housecleaning content check that gives the visitor a useful first step.
- 08
Agent readiness and speed
Run Is Agentic and PageSpeed Insights on the deployed URL. Use Lighthouse to investigate; fix observed issues and compare reports.
- 09
Check the journey
Open the page on mobile, follow the primary CTA, verify success and failure states, and name the conversion events. Social-profile skills remain optional follow-up resources.
You leave with
A complete page composition, a clear service offer, and practical checks for the visitor journey, agent readiness, and speed.
To follow along
Nothing required. If you want to build along: laptop, Node installed, a deploy account you can log into, your positioning brief, a domain if you have one, and customer evidence you can publish.
Afterward
Nothing is required. It compounds if you run the same work on your own product. The suggested output:
05-site/ — afterward, if you want it: your deployed URL, a performance snapshot, and your content map.
Everything is open source. The template repo and its skill files are published — take them and run it yourself. Missed the session? It's archived in Discord.
The session kit
Slides, a follow-along guide and skill files. Free to download, room or no room.
.claude/skills/.Download (10) ↓Install this session's skills
curl -fsSLO https://www.shipai.club/skills/zero-to-launch-05-marketing-site.zip
unzip -o zero-to-launch-05-marketing-site.zip -d .What's in the bundle
/site-structureSKILL.mdPlan a marketing site: sections, order, and the job each one does. Use before writing any page copy.
/landing-copySKILL.mdWrite marketing site copy from the positioning brief and apply it to the actual page. Use once the section order exists.
/site-scaffoldSKILL.mdScaffold or extend a Next.js marketing site — routes, metadata, sections. Use when the copy needs somewhere to live.
/og-imageSKILL.mdGenerate Open Graph images so shared links preview properly. Use once routes exist, before anyone shares one.
/perf-passSKILL.mdMeasure Core Web Vitals and fix only what moves a number. Use when the site is deployed and feels slow.
/content-mapSKILL.mdWork backwards from what the ICP searches to the first twenty pages worth writing. Use before drafting any article.
/programmatic-pagesSKILL.mdDesign a templated page set that is genuinely useful rather than a doorway. Use when one page shape times real data covers many queries.
/article-draftSKILL.mdDraft one article from the content map worth publishing under your own name. Use when the map names an unwritten page.
/social-auditSKILL.mdRead every profile a stranger finds when they look you up and find what contradicts your positioning. Use before a launch.
/social-profileSKILL.mdRewrite one social profile from the positioning brief — handle, bio, banner, pinned post, links. Use once per platform.
Every program skill is on the skills page.
The community online
Recaps, archive links, questions between sessions, everyone else's work in progress.