Taped Paper Product Suitev0.1.1
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 that builds a full SaaS product in one warm paper look: marketing site, pricing and checkout, sign-in, a working app view and admin.
Picked most often by
Updated Nov 7, 2026
Preview gallery
Similar Skills
View all
What you get
- A full worked example for Hourline, an invented AI day planner: a home page, pricing, account creation and login, a changelog, contact, legal pages, a 404, the planner and an admin console, every view hash-routed inside one offline file.
- The look is built in code so all words remain real text: an amber gradient phrase in the hero, tilted stickers, photos held by tape, a bento grid on cream, a voting roadmap board, masonry quotes, plus light and dark themes.
- Flows that run: sign-up with inline errors, a task field that reads duration and priority while you type, a plan that uses up a credit, checkout in test mode, an admin user table with search, filters, sorting and paging, messages, settings and a command palette.
Good fit
- Founders and solo makers shipping a SaaS, productivity or creator tool who need every page in one go.
- Demos and early validation, where a convincing sign-up, app and admin count for more than a backend.
- Teams fond of a warm, handmade marketing face backed by an exact product interface.
Not for
- One landing page with nothing behind it; a single-page Skill suits that better.
- Real auth, billing or storage: login, checkout and every form are truthful demos until you plug in live services.
- Brands wanting a cold, minimal or neon feel; the palette here is warm white and amber with cream paper and a deep navy.
About this Skill
This skill for Claude Fable 5 gives a product every page a launch needs, telling one story in one design system. Marketing pages feel pinned together by hand, with cream paper, washi tape, instant photos and pencilled margin notes, while the app and admin screens stay calm and precise. The plan, the credit balance and the signed-in person follow you through every view.
How it works
- The agent collects the product story: its name, a one-line promise, the core loop, features, prices, roadmap and one customer story, drafting any gaps and listing them for you.
- It fits your product loop to the template's planner: what the user enters, which fields they can change, and what a single credit buys.
- It plans photos by role, a handful of warm film-look shots and one avatar sheet, while the app interface stays HTML, CSS and SVG.
- It packs one offline file, runs the validator and opens every route on phone and desktop, in light and dark and within a sandboxed iframe, then hands it over.
Checked before delivery
- validate-suite.mjs passes on the built file: zero network, sandbox safe, one h1 per view, every #/ link resolves through the router, labelled controls, no sample name left
- Sign-up errors then success, add a task, plan until credits run out, buy a plan and see it in the admin users table, all inside a sandboxed frame at 390 and 1440 px
- Prices, plan and credits agree on every view; quotes, customers and numbers are the user's or listed as stand-ins
What you need before you start
- You bring
- Product name, a one-line promise, who it is for and the core loop of the product (what goes in, what the user edits, what one credit makes) · Eight to ten features for the bento, three flagship features, the pricing shape (two plans and a credit pack by default), roadmap items and one customer story with two numbers · Real quotes, customers, team, address and legal text if the business is real; otherwise the agent drafts stand-ins and lists them · Your own photos if you have them; otherwise the agent's image tool makes four photographs and one sheet of six avatars
- Dependencies
- Node.js 18+ on the machine running your agent, for the script that packs the file · A connection during the build, so the four fonts are downloaded once and embedded · Optional: your agent’s own image tool, for the photos and avatars
- Outside costs
- None
- Last tested
- v0.1.1 — Claude Code / Codex / Cursor
User reviews
Loading reviews…
FAQ
What comes out by default?
A single offline HTML file with its fonts and pictures inside, routed by hash so each view runs from disk and in a sandboxed preview. If you work in React, Vue, Svelte or Astro, your agent builds every view as a proper route in that framework instead.
Do sign-in and checkout actually work?
They run as honest demos: validation, loading states and outcomes all happen in the page, and each flow states that no data leaves it. Hook up your own auth and payment provider before going live.
Will it suit a product that isn't a planner?
Yes. The planner is a pattern: a field read as you type, a list of editable items and one action that costs a credit and shows its result. Your agent fits your product to it, such as invoices, feedback or content drafts.