Explain a physical product family with clear model differences and technical detail. Silver Robot Product Site combines giant thin model names, silver studio photography and quiet specification cards with a scale-aware lineup, comparison tools and configuration enquiry. The robotics example supplies the visual structure; your verified products and measurements supply the substance.
What you get
A silver hero whose model switcher changes the photograph, code/name, lead and three frosted specification cards. Inter Tight provides the thin display/text and IBM Plex Mono handles data. A family lineup uses supplied product dimensions and measured image bounds to show relative scale; an asymmetric bento mixes details, numbers and a code panel.
Model collection/detail pages with full-body imagery, gallery navigation, overview, specification groups, lead time, included items and related models. A configurator adds option prices to the base, shows line items/running total and hands an enquiry summary to the demo form. It is an estimated quote interface, not an order or payment flow.
A comparison table with an only-differences toggle and a modules/accessories catalogue with compatibility/type filters, search, sorting and an empty state. Technology tabs, application/case pages, testimonial tabs and a journal extend the product story with meaningful supporting content.
Downloads listing with model/type/search filters and loading/ready states, FAQ with topic/search/empty states, company timeline, demo enquiry, newsletter, legal and 404. The sample downloads controls demonstrate interface feedback; actual manuals/files and service delivery need supplying and connecting.
A worked example of 23 connected routes covering three models, four application cases and three articles alongside utility pages. The supplied content can be adapted to two to four models or a single product/variant family; claims, partners, specifications, prices and safety facts must come from your brief.
One embedded offline HTML deliverable by default, with fonts and chosen local imagery. The source, visual/page/interior/image/motion/framework guides, builder and static validator are supplied. Existing or requested projects receive native components, typed content and real routes in their stack.
Before you choose
Make comparison useful before adding spectacle: name the differences, show their units and explain the conditions behind each specification. Verify lineup scale and configuration hand-off with your actual product data. A convincing scene, estimated total or local receipt must not stand in for a tested capability or a transmitted order.
Good fit
Robotics, drone, e-bike, audio or camera makers presenting a physical product family and its differences.
Hardware startups needing specifications, model comparison, manuals/resources and a clear demo-enquiry path.
Equipment and lab-instrument brands preferring a restrained technical identity over a colorful launch campaign.
Not for
Placing real orders, taking payment or transmitting a demo request without a connected backend.
A software-only offer with no physical product imagery or product-family story to support the composition.
A dark or strongly multicolor identity; silver, white and graphite define the supplied visual system.
How to use
You say/silver-robot-product-site Build a site for Oryn Robotics and its three humanoids, OR-01, OR-02 Pro and OR-03 Field, with a configurator.
Provide the brand, audience, required pages and two to four products with codes, purpose, dimensions, key specs, price and lead time. Supply partner/customer quotations and company facts only where confirmed. Missing content remains clearly identified draft material; safety ratings, certification and conformity claims are omitted unless supported.
Plan one consistent photographic direction: a wide hero per model with clear space for text, full-body shots, detail views, application scenes and editorial/team images. Real product photographs work best. Optional image generation uses the agent’s image tool and may incur charges; repeat the product’s design description across prompts and inspect every result for model consistency and uncropped subjects.
Measure head/top and foot/bottom bounds in full-body images and use actual dimensions for the shared lineup scale. Replace example robot imagery for a different physical product family; neutral material imagery can be a placeholder, while real team/customer images need actual photographs or disclosed stand-ins. Generated scenes must not prove hardware capability or customer deployment.
Populate the model specs, comparison columns, module compatibility, application cases, journal and file metadata together. Configure base/options, currency and quote notes, then verify the selected choices and total carried into the enquiry. Supply actual download resources and supported measurement notes rather than treating the sample file list as delivered documentation.
With no existing project, use Node.js 18 or newer and build-time internet to embed the font files and local images into one HTML file. The finished file opens offline without runtime network requests. In an existing or requested framework, preserve the stack and port native sections/routes/content with local assets.
Run static checks and review every route on desktop/tablet/phone. Try model switcher, lineup, gallery keys/swipe, option totals/enquiry prefill, comparison differences, module and downloads filters, technology/testimonial tabs, application rail and FAQ search. Test invalid/valid forms, menu/Escape, 404 and reduced motion. Confirm real file availability and connect/verify actual enquiry, booking, mail or payment services before publication.
Requirements and costs
You bring
Brand name, audience and the pages you need · Two to four products with codes, key specs, prices and what each one is for · Optional: product photos, partners, quotes and company facts you can confirm
Dependencies
Node.js 18 or newer on your agent's machine, to run the bundled script that builds the single offline file · Internet access while the file is built, so the fonts can be downloaded once and embedded · An image tool in your agent for product heroes, full-body shots, close-ups and scenes; optional if you supply your own photos
Outside costs
Images you do not supply are generated with your agent's own image tool, which may incur that tool's usage charges. The finished page makes no network requests. Viewing the example costs nothing.
Publisher testing
v1.0.2 — Claude Code / Claude Desktop / Cowork / Codex / ChatGPT
FAQ
One self-contained HTML file with fonts and images embedded for opening from disk. The builder converts the source template and local assets into that offline file. An existing project or requested framework receives native components and routes in the chosen stack instead.
Real photographs give the strongest product consistency. Otherwise the agent plans heroes, full-body views, close-ups and scenes in one direction using its image tool, whose usage may be charged. Generated assets must be checked for model drift and correct cropping. You can supply your own; the site itself uses no paid runtime service.
They should come from your brief. Missing ordinary content may be drafted only as clearly identified placeholders for confirmation. Safety ratings, certifications and similar claims are omitted unless you supply support; sample specs, partners and quotations are not facts about your product.
User reviews
—0 reviews
Select a star to share your experience.
No reviews yet. Ratings appear once readers share real experiences.