Kit Varga example studio site built by the Skill: two italic serif words over a giant cobalt DESIGNER, split by a pale blue cut-out portrait, with the cobalt services band starting at the bottom of the first screen

The Pricing page: three fixed-price plan cards, Launch, the featured Build plan in solid cobalt and Partner, each with its price, what is included and a book button

The Services page: a grotesk and serif title pair, a price list of every service down the left and numbered service rows with their starting prices and plan links

Runs in

Install guides

Claude Code Cursor

Generates with

Host Agent LLM

Similar Skills

View all

Rowan Teale example photography site built by the Skill: a photograph of a stone wall along a sea cliff fills the left half, and on the right an intro card, four channel cards and the first series tiles with labels cut into their corners

New

Half Pane Photo Portfolio

Larkby Racquet Club example site home page built by the Skill: a blue sky hero with a tennis ball and a serve, a court booking bar and the club introduction with small inline photos

Sports Club Site

New

Drifting Quote Wall

Slow Summits example travel site home page built by the Skill: a full-bleed golden alpine valley with one huge word over it and a journey search bar along the bottom

Brand Studio Site

What you get

A sample of 18 routes for an invented designer, Kit Varga: a 404, terms, contact, process, about, six case studies under work, three plan pages under pricing, services and home.
Its signature: Newsreader Italic set against Schibsted Grotesk, a cut-out portrait tinted blue, a theme switch that works and a band of tumbling service pills.
Working pieces included: a full-screen menu, search and filters for the work, FAQs and side-by-side plan comparisons, billing that switches between monthly and quarterly, a validated brief form and a picker for intro calls.

Good fit

Independent product and UI/UX designers who sell fixed-price packages.
Freelancers wanting a striking first screen and a storefront for their services at one address.
One-person studios: consultants, coaches or copywriters can call plans packages and keep the same structure.

Not for

Agencies with big teams, where a single portrait in the headline would mislead.
Brands whose colours are lavender, purple or violet; this site uses white, ink and one cobalt.
Taking bookings or payments from day one: the forms confirm on the page until a backend is connected.

Brand identityWeb designBuild a product websiteBuild a portfolio sitestyle-lockededitable-outputeditorial serifcobalt monochromeduotone portraitlight dark togglepill tags

Good forBuild a product website Build a portfolio site

About this Skill

You say/ours-serif-freelancer-site Make a studio site for Kit Varga, a Wrenmouth UI/UX designer who sells three fixed-price plans, with six case studies and a brief form.

Serif Freelancer Site is a skill for Claude Fable 5 that turns your studio into a bold editorial storefront. You appear inside the hero's headline, a pill in the header really switches light and dark, and a cobalt band rains your services down as white pills that pile up. Each of three fixed-price plans has its own page, and every case study rebuilds its product screens in HTML inside phone and browser frames.

How it works

The agent collects your services, plans, projects and client quotes, or writes drafts that sound like you and marks which ones you must confirm.
It fits them to the pages: a page per plan, and for each project a case study whose screens are rebuilt in HTML, with every sample name swapped out.
It plans the pictures one slot at a time, using your own portrait and client headshots if you provide them.
It builds a single offline file, runs the validator, then checks every route in light and dark at four widths before delivery.

Checked before delivery

validate-cobalt.mjs passes on the built file: one file, no remote requests, one h1 per page, every route, link, plan and project shell resolves, no sample name left
The hero splits the cobalt word, the pills settle once, and the menu, theme switch, filters, search, FAQs, billing switch, brief form and call picker work at 390, 768, 1024 and 1440 px and inside a sandboxed frame
Prices, clients, quotes and figures are the user's, stand-ins are listed in the closing message, and no award, certificate or result is made up

What you need before you start

You bring: Your name, a one-word wordmark, your discipline, the two italic hero words and the one cobalt word, with contact details and the weeks you are free · Six to twelve services (a sentence, three deliverables, a duration and a starting price each) and two to four plans with prices, schedules, fit lists and FAQs · Two or more projects: client, role, timeline, the problem, three decisions, the outcome, three delivered figures, a palette and the product screens to rebuild · Your own portrait and client headshots if the site is real; otherwise the agent's image tool makes stand-ins
Dependencies: Node.js 18 or later on the machine your agent uses, to run the packing script for the offline file · An internet connection during the build, so the two fonts are fetched once and embedded · Optional: your agent's image generation tool, for studio photos and identity shots
Outside costs: None
Last tested: v1.0.3 — Claude Code / Codex / Cursor / GitHub Copilot / OpenClaw / OpenCode

User reviews

Loading reviews…

FAQ

What is the default output?

A single file that works offline with its fonts, pictures and physics library inside, and it opens in a browser or a sandboxed preview alike. In a framework project, or on request, your agent rebuilds the design as proper routes and components, choosing Next.js App Router with TypeScript if you name no framework.

Must the photos show me?

On a real site, yes: hand your agent a half-length photo of yourself, which it cuts out for the About frame and the hero. Any generated face is only a stand-in, and the agent points out each one to swap.

Are the plans and prices editable?

Yes. The grid takes two to four plans, one of them featured, and a plan priced quarterly gains the billing switch. One data list feeds the prices, schedules, FAQs and comparison table.

Preview gallery