Amber Scrapbook Suite

Provide the product name, audience, one-line promise and core loop, plus eight to ten features with three flagship ones identified. Add the pricing structure, limits and trial rules, roadmap, a customer story and approved quotes/photos where available. The agent can draft missing copy for review, but it must list every unconfirmed fact; customer results, trusted-by logos, compliance claims and legal policies cannot be treated as established evidence.

Choose output around the existing repository. Without a project, adapt the template into one standalone HTML file. With an existing or requested React/Next, Vue/Nuxt, Svelte or Astro project, implement real routes, shared components and typed content in that stack, using local images/fonts. Preserve unrelated work and do not deliver an iframe or raw-HTML injection as the framework implementation.

Translate the planner loop to the product’s actual domain before rewriting the pages. An invoicing demonstration might turn captured text into line items and a preview; a feedback product might turn comments into tagged entries and a summary. These are adaptation examples, not additional engines already supplied. Decide which user, plan, credits and result state is shared and keep it consistent across marketing, pricing, product and admin.

Retain the home section order and the contrast between a minimal hero and richer paper compositions below it. Use one gradient clause, two hero buttons and one quiet product card, with no hero photograph or dense callouts. Keep the four font roles, light/dark tokens, floating navigation, tape and annotation grammar. Adapt the 6-column bento spans so rows remain filled; update repeated logo sets, roadmap columns and admin statistic grids when their counts change.

Plan pictures by role and crop using one warm, candid film-photo direction. Build product UI in HTML/CSS/SVG rather than baking screens into images. The supplied writing, shutdown and sign-in scenes can be disclosed placeholders for a matching productivity audience; replace them for another subject. Replace the example’s ceramicist customer image, and use approved real portraits or initials for real testimonials. All six bundled avatars are generated stand-ins. If no image tool is available, use supplied photos or label the missing slots instead of hotlinking stock images.

No Skill-specific API key is required to demonstrate the suite. New photographs use an available agent image tool and may incur its usage charges; otherwise the brief can supply them. A new set typically has four to seven main photos plus coordinated avatar crops, with a 1–1.5 MB image target. Review faces, hands and crop positions at each breakpoint, add meaningful alternative text and keep written product claims separate from illustrative scenes.

Rewrite all sample identity and collections, not just the headline: metadata, wordmarks, demo user/email copies, fake product URL, customer names, messages, changelog, legal content, commands, plans and limits. Renaming a route also requires its resolver, links, navigation calls, commands and titles to change together. Keep home, pricing, auth, product, admin and not-found views; remove recommended supporting pages only with their links and an agreed scope change.

Adapt pricing in the layout and the behavior together. The guide allows two to four cards, but the supplied checkout, credit meter and admin-user calculation contain specific Personal, Pro and credit-pack branches and values. Changing cards or the price array alone does not create a new billing model. Update trial, annual totals, credit allowances and all linked labels, and keep every payment action explicitly in test mode until actual billing is integrated.

Walk the full demo state sequence: invalid then successful signup, add a parsed task, cycle its attributes, remove/undo, generate a result, change inputs and see the stale banner, exhaust credits, open checkout and confirm the new balance/plan in the product, pricing and admin table. Also inspect table search/counts/sort/pages/selection, chart ranges and tooltip, message reply/resolve/undo, dirty settings, roadmap votes, FAQs and contact/newsletter validation. Memory state resets when the page reloads; it is not a saved account or cross-device workspace.

Build the standalone file with Node.js 18+ and internet access for the initial download of four font files; the inliner embeds fonts and local assets, with repeated image slots sharing data. Aim for at most 5 MB and stay below the 8 MB strict limit. Check the helper’s exit status: it can write an output before reporting missing files/fonts. Then run the suite validator, or its documented files mode for hosted local assets. Framework output needs its own build, lint and type checks.

Review every view at 1440, 1024, 768 and 390px in both themes, extending overflow checks to 360 and 1920px. Test keyboard focus, Escape and focus return in drawers/menus, Ctrl/Cmd K, reduced motion, empty/error states and back/forward routing. Open the standalone result from disk in the documented scripts-only sandbox as well. Screenshot and correct at least two passes; static markers and link resolution checks do not prove browser behavior, visual quality, authentication or payment safety.

Deliver the output path, list checks actually performed and identify placeholders, generated portraits and missing photos. Open the site and request content/plan/section changes in plain language. Replace the sample privacy/terms with appropriate business policies, and separately connect and test real accounts, model calls, email, billing and storage before a production launch.