Preview gallery
About this Skill
A one-person studio site for a UI/UX designer who sells fixed-price plans. The white hero sets two italic serif words above one giant cobalt word, split by a blue-toned cut-out portrait, and a header pill switches between light and dark. Below, a full cobalt band drops white service pills into a pile, then come pricing, selected work, process and kind words. Services, Pricing with a page per plan, Work with six case studies, About, Process, Contact and Terms are all designed and linked.
Picked most often by
About this Skill
Turn your services, plans and projects into a designer site that sells. The hero puts you inside the headline: two italic serif words above one giant cobalt word, split by your blue-toned portrait, with a header pill that really switches light and dark. The whole site, from Services to Terms, arrives as one file that opens offline in any browser.
What you get
- Home with a full cobalt band where white service pills drop and settle into a pile, a pricing grid, selected work, a process strip and kind words
- Services with starting prices, Pricing with one page per plan and a side-by-side comparison, and Work with filters, search and six case studies
- Case studies that show product screens drawn in phone and browser frames over each project image
- About, Process, Contact with a validated brief form and intro-call slots, Terms and a designed 404
- Schibsted Grotesk and Newsreader Italic embedded with every image, so the page makes no network requests
How to use it
- Give the Skill your name, discipline, the hero words, your services, two to four plans, a few projects and your contact details.
- It fills every page, drafts anything missing in a confident first-person voice and lists those drafts for you to confirm.
- Open the file in both themes, click through every page and ask for changes in plain words.
Your portrait and any new project images come from you or your agent's image tool, which may have its own usage charges.
What you need before you start
- You bring
- Your name, a one-word wordmark, your discipline, two italic hero words and one cobalt word · Six to twelve services with prices, and two to four plans with price, timeline and inclusions · Projects with client, role, problem, approach and result, plus contact details and availability
- 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 your portrait, project images and studio photos; optional if you supply your own
- Outside costs
- Images you do not supply are generated with your agent's own image tool, which may incur that tool's usage charges. Neutral studio photos ship with the Skill, case-study screens are drawn in code, and the finished page makes no network requests. Viewing the example costs nothing.
- Last tested
- v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
What you get
- Home, Services, Pricing with three plan pages, Work with six case studies, About, Process, Contact with a brief form, Terms and a designed 404
- The signature look: Schibsted Grotesk paired with Newsreader Italic, a blue-toned cut-out portrait, a working light and dark switch and a band of falling pills
- Case studies with product screens drawn in phone and browser frames, plan comparisons, FAQs, work filters and search, all in one file that runs offline
Good fit
- Independent designers who sell fixed-price plans and want a bold editorial first impression
- Freelance developers, brand designers and consultants who can map their offers onto services, plans and case studies
- Anyone who wants a finished multi-page site they can open from disk or publish as a single file today
Not for
- Real payments or bookings: the brief form and plan buttons confirm on the page, and delivery needs your own backend
- Agencies with large teams; the layout is built around one person, one portrait and one voice
- Muted or multi-colour palettes; the style is white, ink and a single cobalt
Brand Identity & Visual SystemsWeb Design & Digital ExperiencesBuild Website PageBuild Portfolio SiteStyle-lockedEditable OutputEditorial SerifCobalt MonochromeDuotone PortraitLight Dark TogglePill Tags
User reviews
Loading reviews…
