About this Skill

A complete SaaS product prototype that reads as one real, finished product: marketing landing page, pricing, sign-in, a working signed-in workspace and an admin back office, plus a customer story, public changelog and legal pages. Every view shares one porcelain-and-teal design and one live demo state, so credits spent or plans changed in one place show up everywhere else. Product windows are drawn in code, and the whole suite has light and dark themes.

Picked most often by

Solo Founder Indie Hacker Product Manager

Installation guide · Troubleshooting · More Website Skills

Runs in

Install guides

Claude Code Cursor

Generates with

Host Agent LLM

About this Skill

You say/bs-harbor-saas-suite Build the Ferrywake prototype: it turns a SaaS changelog into weekly customer digests, with workspace and admin views.

Describe your SaaS and get the whole product surface in one go: a marketing site, pricing, sign-in, the workspace where your core object is made, and the back office that watches the business. Every view shares one porcelain-and-teal design and one live demo state, so an action in the app shows up in admin. Everything arrives as one file that opens offline in any browser.

Ferrywake landing hero with a teal announcement bar, a centred headline and a digest window listing this week's changes

What you get

A landing page with a product window, how-it-works tabs, a feature bento, a customer story, quotes, FAQ and a sign-up band
Pricing with a billing switch, plan cards, a credit pack and a comparison table
A signed-in workspace with drafting, scheduling, subscribers and settings, and an admin view with a revenue chart, range switch and sortable table
Customer story, public changelog, legal and 404 pages, a command palette, and light and dark themes
Fonts and photos embedded, so the page makes no network requests

Feature bento with a send-time chart, audience segments, section analytics, tone lock and an API panel

How to use it

Tell the Skill your product name, what users create in it, three to six features, your pricing shape and the numbers the business watches.
It renames the workspace, panels and actions after your core object, drafts any missing copy and lists it for you to confirm.
Open the file, sign in to the demo, run the main action, check the admin view and ask for changes in plain words.

Driftpost customer story page with company facts and a team photo

New photos come from your agent's image tool, which may have its own usage charges.

What you need before you start

You bring: Product name and its core object, the thing users create or manage · Three to six features, your pricing shape and the three or four numbers the business watches · One customer story, plus real photos if the site shows real people
Dependencies: Node.js 18 or newer on your agent's machine, to run the bundled script that builds the single offline file · Internet access while the file is built, so the fonts can be downloaded once and embedded · An image tool in your agent for the sign-in, customer story and portrait photos; optional if you supply your own
Outside costs: Photos you do not supply are generated with your agent's own image tool, which may incur that tool's usage charges. Product windows are drawn in code, and the finished file makes no network requests. Viewing the example costs nothing.
Last tested: v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT

What you get

Landing, pricing, sign-in, workspace and admin views, plus customer story, changelog, legal and 404 pages, all routed and sharing one live demo state
A working workspace for your core object: compose, AI-draft with credits, schedule, manage subscribers and see each action land in the admin activity feed
Instrument Sans and Geist Mono type, teal pill buttons, soft cards, a command palette, light and dark themes and role-based photos in one offline file

Good fit

Founders pitching a SaaS idea who need the whole product to feel real before any backend exists
Product managers running stakeholder or investor walkthroughs across marketing, app and admin
Indie developers who want one design system across the public site and the signed-in product

Not for

Production apps with real auth, payments or data; sign-in, checkout and credits are front-end simulations
Single landing pages; if you only need a marketing page, a landing-page Skill is a better fit
Loud, colourful consumer brands; harbor is calm and product-led with one teal accent

Product Launch & App GrowthWeb Design & Digital ExperiencesBuild Website PageBuild Landing PageStyle-lockedEditable OutputFast TurnaroundPorcelain TealPill InterfaceSoft Elevated CardsWindow Chrome MockupsLight Dark Ui