Paste-Up Studio Portfoliov1.0.3
Use this Skill to build a product website.
- Yours to keep: the files stay on your computer.
- Payment by Waffo Pancake, our merchant of record.
- 38 free Skills to try first
A web design skill for Claude Fable 5 for designer portfolios that look like a print-studio pinboard: grey paper, cobalt and orange, strips of tape, torn paper and a cut-out portrait.
Picked most often by
Updated Nov 7, 2026
Preview gallery
Similar Skills
View all
What you get
- A 15-route example for Tilde Marsh, an invented designer: the home page, four case pages under Work, services, three journal notes, about, contact, privacy and a not-found page.
- Interactive parts that already work: chips, search and sorting for the work, an archive that expands, tabs that lay out each service week by week, an FAQ, copy buttons, a newsletter form and a contact brief that checks itself and shows every state.
- A script that cuts your photo out of a plain background, giving a flat figure for the hero or a sticker with scissor edges, plus one offline file with the fonts and pictures packed in.
Good fit
- Graphic designers, illustrators and small print shops after a portfolio that feels handmade.
- Designers who sell services and want rates, schedules and a brief form beside their work.
- Makers and photographers whose series or editions suit the same case pages and archive.
Not for
- Corporate agencies needing a plain, minimal look; tape and handwritten notes would jar.
- Brands that rely on purple, violet or lavender; the palette is only warm grey paper, cobalt and orange.
- Receiving messages straight away: the form confirms in the page until a backend is connected.
About this Skill
Paste-Up Studio Portfolio is a web design skill for Claude Fable 5 that gives your work a site which looks assembled by hand yet behaves like a proper one. The home page is one wall around a cut-out photo of you, with a notepad of your tools, a pinned scrap and an instant print; below come numbered posters, service rows and recent notes. Each project has a case page, each service a weekly schedule, and the brief form validates itself.
How it works
- The agent collects your projects, services, notes and how people reach you, or writes drafts in your tone and flags what you need to confirm.
- It fits your practice into the pages: a case page for each project, a schedule for each service, and the example's names swapped out everywhere.
- It plans every picture slot and cuts out your own photo for the wall whenever you provide one.
- It packs a single offline file, runs the validator and checks each route at four widths before handing it over.
Checked before delivery
- validate-collage.mjs passes on the built file: one file, no remote requests, one h1 per page, every route, link and data shell resolves, no sample name left
- Chips, search, sort, archive rows, tabs, the FAQ, copy buttons, the brief form and the phone sheet work at 390, 768, 1024 and 1440 px and inside a sandboxed frame
- Names, clients, quotes, prices and dates are the user's, stand-ins are listed in the closing message, and no award, press mention or figure is made up
What you need before you start
- You bring
- Name, craft, city, handle, a three-line motto, a house rule, two "Be ..." notes and the next free start date · A short bio, four or five timeline notes, four values, a toolkit of crafts and recent clients · Four case studies (brief, idea, steps, inks and paper, result, deliverables, client quote), archive rows, two or three services with prices and schedules, three journal notes · Your own full-length photo on a plain background for the cut-out, if the site is real; otherwise the agent's image tool makes stand-ins
- Dependencies
- Node.js 18+ wherever the agent runs, for the script that builds the offline file · A connection during the build, so the five fonts are downloaded once and embedded · Python 3 with Pillow and NumPy if your own photo should be cut out for the hero · Optional: an image generator inside the agent for studio shots and project photos
- Outside costs
- None
- Last tested
- v1.0.3 — Claude Code / Codex / Cursor
User reviews
Loading reviews…
FAQ
What is delivered by default?
A single offline file with fonts and pictures embedded, which works in any browser as well as a sandboxed preview. If you have a framework project or ask for one, the agent ports the design into real components and routes, defaulting to Next.js App Router with TypeScript.
Does the hero need my photo?
On a live site, yes: a full-length photo against a plain background, which the bundled script cuts out so you stand on the wall. Generated figures are placeholders, and the agent tells you which pictures to swap.
Can the number of projects and services change?
Yes. Projects, archive rows, services and notes are plain data lists near the top of the script, and every card, filter, case page and tab is drawn from whatever those lists hold.