A site for a real business, from its own words

The job is not "make a nice restaurant site". It is to take everything this owner has already said about the business, in their own colors and their own voice, and hand it back better than they could have. A draft that could belong to any food truck has failed, however good it looks.

Order

1. Find the owner before the brand. Search the business name and the handles you were given. On 2026-09-26 the account handed over "for aesthetic" turned out to be the owner's personal one, which changed the whole brief: the owner is the brand, and his face is on every post.
2. Read everything they published, once, with brand-grab.

   brand-grab ~/scratch/<biz> --site <their site> --instagram <biz> --instagram <owner> --press <url> --press <url>

   Then read BRIEF.md and look at sheet.png and the screenshots. It saves the current site at desktop and phone size, fonts and colors off their CSS, a palette off their own graphics, the first page of each profile, and each press page, or marks it refused.
3. A refused press page is not a dead end, and is never bypassed. Local TV blocked both the scraper and the fetcher (an access-denied page and a press-and-hold bot check). The same station's segment on YouTube had the owner's own words: yt-transcript <url>. Syndicated copies (Yahoo, MSN, Hoodline) carried the rest.
4. Write the facts down with their source before any design. One data file (lib/<biz>.ts or similar) holds the menu, prices, hours, address, quotes and links, each with where it was read. The page reads from it, so a price change is one edit.
5. Put every conflict in front of the owner. The site said Monday to Friday; the pinned hours post, newer, said Monday to Saturday. Pick the newest dated source, comment it in the data file, and list it in the README under "confirm before launch". Never settle it silently.
6. Learn the genre before designing anything. For anywhere people eat, the rules below come first, and for any other trade, look its rules up the same way.
7. Design from their assets, pushed further. Colors are sampled from their own graphics (palette in brand-grab), type matches their wordmark, and the texture comes from their real surroundings. On that truck it was a sticker-bombed fridge door, vintage oil decals, and a blackletter logo on Key West blue. Amplify the identity they have. Never replace it with a template.
8. Screenshot every section at 1440 and 390 before calling it done, after scrolling, so reveal animations have fired. Read each shot.
9. Ship it as a private draft, meaning a private repo, a Vercel deploy and robots: noindex until the owner says to swap, with the URL taken from the aliases in vercel inspect, because <name>.vercel.app may belong to a stranger and the team-scoped alias sits behind deployment protection (it answers 302).

Food and drink sites: what the practitioners agree on

• Where and when come first. Address, today's hours and an open-or-closed badge computed in the business's own timezone sit above the fold.
• On a phone, directions and tap-to-call stay within one thumb: a sticky bottom bar once the hero has scrolled away.
• The menu is text, not a PDF or a photo of a board. Prices come exactly as the owner lists them.
• Their real food and their real face. No stock images.
• Press is proof, quoted verbatim, and links to the piece.

Lessons this was built from

• The name was hidden. A cutout photo placed over the wordmark hid the business name at both sizes. The name goes in front and the photo behind. At 390 px, a blackletter at 31vw clipped the last letter, and 27.5vw fit.
• Quotes go in word for word. "Perfect amount of like everything" stays as it was said. A tidied first draft had dropped the "like".
• Nothing gets invented to fill a gap. "Park and walk up", "the crunch you hear on TikTok" and a made-up headline all got cut. Every line is the owner's, a press quote, or neutral.
• Instagram photos are small. Logged-out frames are 360 px reel covers. Use them small, as polaroids, and ask the owner for originals. The hero needs a large cutout from their site.
• Brand icons are gone from Lucide. Draw Instagram and TikTok as inline SVG.
• A formatter reflows files between edits. Patch by line number or re-read, and check that the count of changed lines matches.

When they ask for an intro animation

The Cowboy Cubans draft got a five second duel on first load (two silhouettes, pressed Cubans for guns, one drops). What made it work, and what nearly didn't:

• Drive every frame from one clock, t in milliseconds, with keyframe tracks and no chained timeouts. Then ?intro=<ms> freezes any frame, and the screenshot pass can read a dozen frames at 1440 and at 390 like a storyboard. That pass caught the real bug: the loser fell backward, the action needed 1150 units of width, and on a phone each man was 65 px tall.
• Stage it for the phone held upright. Pick the choreography so the whole action fits the narrowest frame. Falling forward instead of backward cut the width to 800 units and made both men about 40% bigger.
• Decide before the first paint whether it plays. A static head script skips it on a second visit in the tab and under reduced motion, a noscript style hides it without JavaScript, a CSS failsafe clears it if hydration never comes, and a load slower than four seconds goes straight to the site. Skip sits in the letterbox and Escape works.
• Hold the hero's entrance until the curtain opens, or it plays unseen under the overlay.
• Keep it in the site's palette with no comic lettering. A sentence of dialogue in the letterbox and one iris-out did more than any "BANG" would have.

Hard line

Never publish it as the business, or let it be indexed, before the owner says yes. The draft is noindex, the repo is private, and the owner's live site stays live. Photos of other people, including the owner's own personal account, are inspiration and never go on the page unless the owner picks them. The owner decides what is theirs to show.