Gifting App Sitev0.1.1
Use this Skill to build a product website.
A Fable 5 landing page skill for card and gift apps: 19 cream pages in one file, with a tilted phone hero, a card editor visitors can use, a gift shop with basket, pricing and help.
Picked most often by
Updated Oct 25, 2026
Preview gallery
Similar Skills
View all
What you get
- A single offline HTML file of 19 hash-routed pages (11 views plus 8 gift-card pages) that reads without JavaScript and stores nothing in the browser
- Home: split hero with the tilted phone and occasion switcher, then the occasions marquee, feature mosaic, card editor, fan of gift cards, a balance band with stepper, steps, the notes wall, FAQ and a closing panel
- Features and How it works: a tabbed card studio, cards for scheduling, reminders, group gifts, the wallet and the inbox, step tabs next to a phone, and a timeline
- A gift shop with search, category chips and sorting, and eight gift-card pages offering amount chips, a stepper, delivery with the card or on a set date, and a basket drawer that keeps a running total
- Pricing with a monthly/yearly switch across three plans and a grouped comparison table that pins its first column on phones
- Help with search and topics, plus About, Download, terms, privacy and a 404; each form validates inline and ends on a success panel
- Bricolage Grotesque, Figtree and Caveat embedded with the icons, and MobileApplication structured data
Good fit
- Apps for greeting cards, e-cards and gift cards that want visitors to try the product on the site
- Consumer apps needing pricing, help and download pages before they hire a web team
- Agencies after a warm, playful site with working tools rather than screenshots
Not for
- Real accounts, payments or gift orders: the forms and the basket are previews that send nothing
- Apps that don't yet have real plans, partner shops or help answers
- Brands wanting a dark, minimal or corporate style
About this Skill
People decide on a card or gift app by trying it, so this Skill puts the product to work on the page. Give your agent the app's real facts, partner shops, plans and help answers, and it returns one offline HTML file of 19 pages. The first screen is split: headline on one side, on the other a phone set at an angle; pick an occasion and its card, recipient, date and attached gift all change. Further down they can use the product: a coral band holds a card editor with four designs, a message counter that updates as you type and room for no more than four stickers; a sun-yellow band fans its gift cards out on hover; an ink band sets a balance with amount chips and a stepper. Around these sit a marquee of occasions, a mosaic of five mini screens, numbered steps next to a photo, handwritten thank-you notes pinned up as a wall, questions, and a closing panel that asks for the click. The other pages: Features, built around a card studio in tabs; How it works, where tabs walk the steps and a timeline follows; a gift shop with search, filters and sort, linked to eight gift-card pages where visitors choose an amount and how it is delivered, then add it to a basket drawer; pricing with monthly and yearly billing and a comparison table in groups; fourteen searchable answers in the help center; About with open roles; Download with a form to text the link; terms and privacy whose contents list tracks the scroll; and a 404. The feel is handmade, on warm cream paper: headlines in black Bricolage Grotesque kept at a calm size, Figtree for reading, Caveat only where someone would write by hand, die-cut stickers, gouache gift-card art, and coral and sun yellow as accents. Each form checks fields inline and states that the preview sends nothing.
How it works
- Gather from the app team: partner shops with three amounts each, plans and prices, help answers, app store requirements and the legal text
- Enter everything in brief.json as the schema describes; the build confirms that shop counts, gift amounts, plan prices with the savings badge, and the group pot are the same in every section
- Swap the placeholder art and the three stand-in photographs for the app's own, and the sample notes for genuine replies from real senders
- Run the build, which names every gap in the brief at once, contradictory figures included
- Validate, then try each tool and form in the browser at 390, 768, 1024 and 1440 px widths before handing it over
Checked before delivery
- validate.mjs passes: single file, one h1 per view, every link resolves, no browser storage API anywhere, no colour in hue 235-300, one coral accent, all three fonts embedded, no names or sentences from the reference product
- Shop counts, hero and occasion gifts and amounts, plan prices and the savings badge, the group pot, the Cash defaults and the timeline gift agree everywhere they appear
- Hero switcher, card editor, Cash stepper, shop search / filter / sort, gift amounts and delivery, basket, billing switch, help search, every form and the menu sheet work at 1440, 1024, 768 and 390 px
What you need before you start
- You bring
- App name, wordmark, tagline, domain, the hello and press addresses, legal entity and the two places it is made · Eight partner shops or products for the gift shop: name, short name, category, starting price and three amounts, where it works, a short description and what people love it for · Four occasions for the phone hero and four card designs for the editor, with the message, recipient, date and attached gift · Plans with real monthly and yearly prices, what each includes, a grouped comparison and the billing questions people ask · Fourteen help answers over four topics, support hours and contact topics, the open roles, milestones and values, store requirements and release notes, terms and privacy text · Real thank-you notes from real senders (or remove the wall), and photos or generated artwork for the 8 gift cards, 3 greeting cards and 6 scenes
- Dependencies
- Node.js 20 or later · Nothing to install, no keys, no network calls
- Outside costs
- None
- Last tested
- v0.1.1 — Claude Code / Codex / Cursor
User reviews
Loading reviews…
FAQ
Can visitors actually buy a gift card here?
No. The basket never charges, and each form validates its fields before showing a panel that says the preview sent nothing. Wire them to your real endpoints before publishing.
What does the build compare between pages?
Shop counts, gift amounts, plan prices, the savings badge and the group pot each show up in several places. If any copy disagrees the build stops, so the site stays consistent.
Is anything saved in the visitor's browser?
No. The file stores nothing, which lets it run in sandboxed previews, and every reload starts clean.
Can the sample shops and thank-you notes stay?
No. The shops, the notes and their senders are invented. Use real partners and real replies people can be credited for, or take the wall out.