Skip to the content
FilCommunityWorkflowsDocsOpen Fil
The website in the brief as a React site, following the skill, with the wired hero image in the hero and the wired…
A web page: run it in Fil

Code · Claude Sonnet 5.5

The website in the brief as a React site

The website in the brief as a React site, following the skill, with the wired hero image in the hero and the wired reference’s layout. Reference (Brief.md): # Site brief - **Product:** Halden, a Scandinavian e-bike that gets city commuters to work quietly, with a light frame and a battery that lasts the week. - **For:** City commuters who want a simple, reliable way to get across town without sweat, traffic or a car. - **Pages:** Home, The bike, How it works, Pricing, Help - **Home sections:** hero with one button, three facts (range, weight, price), how a commute feels, a short quote from a real rider, pricing, closing call to action, footer - **Voice:** Calm and plain. Short, factual sentences about range, weight and price. No hype. - **Colours:** Off-white background, near-black text, one deep pine green accent for buttons and highlights only. Reference (website-craft SKILL.md): --- name: website-craft description: Builds websites that look designed, not generated: a clear story, real copy, a strict type scale and generous spacing. Use for landing pages, product sites, portfolios and marketing sites in HTML or React. --- # Website craft ## Read first Brief.md for the product, the audience, the pages and the voice; the design reference, hero image and any logo wired in. ## Story - The hero says what it is and who it's for in under ten words, with one primary button. - Then proof (numbers, logos or a quote), then three to five sections that each answer one question, then a closing call to action and a footer. - Real copy from the brief, never lorem ipsum; short sentences, specific nouns. ## Look - Follow the wired reference's layout, spacing and mood without copying its brand. - Two typefaces at most, a clear scale (e.g. 64 / 40 / 24 / 16), line length under 70 characters. - One accent colour from the brief, used for buttons and highlights only. - Wired images where they belong: the hero image large in the hero, never stretched or cropped awkwardly. - Responsive from 360 px wide, with focus styles and alt text. ## Avoid Generic gradients, emoji as icons, centred walls of text, fake testimonials with stock names, and more than one primary button per screen.

Meng To@shadownessguy0097
Model
Claude Sonnet 5.5
Made by
Meng To
Shared
Likes
0
Open in Fil

Use its prompt, turn it into a video or a 3D model, or find more like it in Fil. Fil is invite-only for now: without an invitation, Open in Fil shows the waitlist.

More like this

The hero image for the site in the brief: a Halden e-bike, slim matte frame in pale grey, parked on a quiet Scandinavian…The hero image for the site in the brief: a Halden e-bike, slim matte frame in pale grey, parked on a quiet Scandinavian city street at…The hero section from the skill, for Hero.md, built around the wired hero image. Reference (Hero.md): # Hero - **Product:**…The hero section from the skill, for Hero.md, built around the wired hero image. Reference (Hero.md): # Hero - **Product:** Driftline, a…The hero image from the skill, for Hero.md: a sleeping hand resting on a dark linen sheet, wearing the slim Driftline ring…The hero image from the skill, for Hero.md: a sleeping hand resting on a dark linen sheet, wearing the slim Driftline ring, lit by a faint…The website in the brief, following the skill: its pages, a shared design system, and data for each collection in…The website in the brief, following the skill: its pages, a shared design system, and data for each collection in Content.md, with the…Direction: Geometric mark. Build the mark from one simple solid, a ring, drawn so it hints at a shallow salt pan filling…Direction: Geometric mark. Build the mark from one simple solid, a ring, drawn so it hints at a shallow salt pan filling with seawater and…Direction: Symbol. An abstract symbol drawn from a single salt crystal and the rising and falling tide, simple enough to…Direction: Symbol. An abstract symbol drawn from a single salt crystal and the rising and falling tide, simple enough to read at 16 px…A one-page brand board for the brand in the brief, built around the single strongest mark across the wired sheets, laid out…A one-page brand board for the brand in the brief, built around the single strongest mark across the wired sheets, laid out as the skill’s…Direction: Wordmark. The name tidewell set in a custom lowercase wordmark with one distinctive detail, such as a joined…Direction: Wordmark. The name tidewell set in a custom lowercase wordmark with one distinctive detail, such as a joined letter pair in the…The slides from the skill for the whole day, following the wired day plan, with the wired cover and project visuals…The slides from the skill for the whole day, following the wired day plan, with the wired cover and project visuals. Reference…Direction: Thread flower. A flower drawn from thread, like the lazy daisy embroidery stitch, where every petal is a single…Direction: Thread flower. A flower drawn from thread, like the lazy daisy embroidery stitch, where every petal is a single loop of thread…The title card from the skill, for Video.md, in the wired thumbnail’s style and colours. Reference (Video.md): # Video…The title card from the skill, for Video.md, in the wired thumbnail’s style and colours. Reference (Video.md): # Video - **Topic:** How I…The end screen from the skill, for Video.md, in the wired thumbnail’s look. Reference (Video.md): # Video - **Topic:** How…The end screen from the skill, for Video.md, in the wired thumbnail’s look. Reference (Video.md): # Video - **Topic:** How I plan a whole…