Ida Morel example portfolio built by the Skill: a light grey stage with a two-line headline, six tilted cards around it including a red portrait card, and a caption line closing the first screen

The work index: a large title with faded years, discipline chips with counts, search, sort and a grid of project cards showing identities as objects

A calm case study page: the project name with a faded tagline, a row of client facts and a wide lead picture of tiled posters on a gallery wall

Runs in

Install guides

Claude Code Cursor

Generates with

Host Agent LLM

Similar Skills

View all

Tilde Marsh example portfolio built by the Skill: a pinned-up wall round a black-and-white cut-out figure on a stool, with a taped toolkit notepad, a pinned torn scrap, an instant photo and a small Anton motto low on the left

New

Drinks Brand Site

Four-column pathway poster in cool blues under chevron headers Peptide Structure, Receptor Binding, Signaling Cascade and Lab Measurements: a sphere chain, a membrane receptor, a flowchart ending at DNA and lab plots, above ten numbered citation cards

Ingredient Mechanism Poster

FREE

Blockframe Company Deck

New

Brand Narrative Deck

FREE

Brand Studio Site

What you get

A 28-route example built for Ida Morel, an invented designer: the home page, six case studies behind a work index, four service detail pages, about, process, client words, four journal articles, booking, contact, FAQ, newsletter, colophon, privacy and a not-found page.
The defining look in place: six cards floating on a pale grey stage, a red portrait card, softened second lines, restrained motion that fully respects reduced-motion settings, and a 14-slot picture plan under a single art direction.
Interactive parts that already work: discipline chips with search, sorting and a switch between grid and list, tabs for the process, a quote carousel, accordions and copy buttons, a booking picker whose summary updates live, a day picker for retainers and forms showing every state.

Good fit

Freelance designers in identity, web or product work who want their case studies and services on one site.
Small studios selling fixed-price projects that want visitors to book a call.
Photographers and illustrators whose series and packages map onto the same project and service pages.

Not for

Dark, loud or neon identities; the stage stays pale grey with a single signal red.
Personal brands that rely on purple, violet or lavender, which the palette excludes completely.
Receiving bookings or messages straight away: forms confirm in the page until a backend is connected.

Brand identityWeb designBuild a portfolio sitestyle-lockededitable-outputbentoghostportraitprocess

Good forBuild a portfolio site

About this Skill

You say/ours-bento-designer-portfolio Make a portfolio site for Ida Morel, a Bordeaux identity and web designer: six projects for clients, four services and a journal.

Tile Stage Designer Portfolio is a web design skill for Claude Fable 5 that turns a design practice into one offline portfolio file, or ports it into your framework. Case studies show identity boards, service pages end in a price summary, and the journal, filters, search, sorting, both layouts and the booking picker all work.

How it works

The agent collects your projects, services, working method, client quotes and articles, or writes drafts in your tone and flags what you need to confirm.
It fits your work into the collections: a case study for each project, a page for each service, an article for each note, with the example's names swapped out everywhere.
It plans every picture slot, placing your own portrait on red and your studio photos wherever you provide them.
It packs a single offline file, runs the validator and checks each route at four widths before handing it over.

Checked before delivery

validate-design.mjs passes on the built file: one file, no remote requests, one h1 per page, every route, link, shell and collection reference resolves, no sample name left
Filters, search, sort, tabs, the carousel, accordions, copy buttons, form states, the booking picker and the phone sheet work at 390, 768, 1024 and 1440 px and inside a sandboxed frame
Clients, quotes, figures and prices are the user's, stand-ins are listed in the closing message, and no award, rating or metric is made up

What you need before you start

You bring: Name or studio name, city, the line about availability, a two-line headline and one sentence for the hero, a short biography, facts and contact details · Three to six projects (client, sector, year, place, team, scope, brief, response, deliverables, palette, type note, a quote with its author) and the order Home shows them in · Two to four services (fee, terms, duration, phases, what is included, who it suits), the process phases, frequently asked questions and, if there is writing, one or more articles · Your own portrait on red and a studio photo 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 three font files are downloaded once and embedded · Optional: an image generator inside the agent for studio shots and project pictures
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.

Must the red portrait show me?

On a live site, yes: hand the agent a waist-up portrait, ideally against red. An ordinary portrait can be cut out and placed on the red, and generated faces are placeholders the agent asks you to swap.

Can I show fewer projects or services?

Yes. Three projects or more keep the home bento balanced, two to four services work, and the journal can be dropped completely. The hero always keeps its six cards.

Preview gallery