Templates / Embercraft

Embercraft

A one-page specialty coffee roaster template with a full-bleed dawn hero, editorial story section, café-grade product cards, and opening hours — all photography AI-generated in one consistent warm-editorial art direction. FreeByJTT Free Template License · v1.1.0

Download template (free) Open live preview

The live preview serves from the marketplace root at /previews/embercraft/ — the URL above is its permanent path.

Preview gallery

Embercraft hero section: roastery bar at dawn with brass roaster Embercraft story section: hands cupping freshly roasted beans
Embercraft visit section: kraft bean bags on a wooden shelf

Full contract: manifests/embercraft.json — files, assets, design DNA, license, and changelog.

Remix it with your agent — no account needed

Copy a prompt into your own coding agent (Claude Code, Codex, Cursor, OpenClaw — anything that can read and write files). One prompt builds it from the template package, one publishes it to your own Cloudflare, and the others handle branding and changes. The full text is right here on the page — nothing hidden behind an account.

Placeholders: [YOUR-…] = fill before or during the run · {{…}} = your agent will ask you. Kit files stay versioned at /kits/embercraft/v1.1/.

Build it Download the template and build a personalized site from it — start here.

View raw (build-prompt.md) · kit v1 · placeholders in [BRACKETS] are yours (or let your agent ask)

<!-- ByJTT prompt kit: embercraft v1.1 · build-prompt.md · kit version 1 · 2026-09-02.
     Copy this whole file into your coding agent. Placeholders in [BRACKETS] are yours to fill
     (or just leave them and let your agent ask you). Do not edit the file itself — your agent
     works on a copy in its own workspace. -->

# Build a website from the "Embercraft" template

You are building a finished website for me from a professionally designed template.
I may not be a programmer: use plain language, give short status updates as you go,
and never end by telling me to run commands myself — do the work, then show me the result.

## Safety rails
- Never delete or overwrite anything already in your workspace unless I ask.
- Never quietly downgrade a request. If something can't be done, stop and say so in one line.
- Never add a fake checkout, fake newsletter endpoint, or placeholder text — the template
  ships with honest states; keep them honest.
- The template is static HTML/CSS/JS. Don't add a backend unless I ask (the publish prompt
  will refuse to deploy a backend — tell me early if I ask for one).

## Inputs (fill these in; ask me for any I left blank)
- Brand name: [YOUR-BRAND]
- Tagline: [YOUR-TAGLINE]
- City / address lines: [YOUR-ADDRESS]
- Contact email: [YOUR-EMAIL]
- Domain (if you have one): [YOUR-DOMAIN]

## Steps
1. Download the template package:
   `curl -L -o embercraft.zip https://byjtt-templates.pages.dev/assets/templates/embercraft/downloads/embercraft-v1.1.0.zip`
   and unzip it into a folder called `site`.
2. Read `manifest.json` inside the package first. It is the binding contract: the file
   inventory, design tokens (palette, fonts, signature element), page structure, and the
   license summary. Follow it — don't redesign the template, personalize it.
3. Replace every `[YOUR-…]` placeholder in the copy with my inputs above, and log each
   replacement in a short checklist you show me at the end.
4. Serve it locally (e.g. `python3 -m http.server 8080` inside `site`) and verify before
   showing me: it renders at phone width (375px), tablet (768px) and desktop (1440px);
   every image loads; no "lorem" text anywhere; the contact links work.
5. Show me the local preview URL and the replacement checklist. Then wait for my feedback
   — iterate with `iterate-prompt.md` if I want changes, or continue to `publish-prompt.md`.

## License note (keep this in the footer)
This template is licensed under the ByJTT Free Template License: personal, non-commercial
end products, attribution appreciated but not required. Commercial use needs the paid
license — see https://byjtt-templates.pages.dev/licensing.html
Brand-customize it Delta prompt: apply your brand to an existing build.

View raw (brand-customize-prompt.md) · kit v1 · placeholders in [BRACKETS] are yours (or let your agent ask)

<!-- ByJTT prompt kit: embercraft v1.1 · brand-customize-prompt.md · kit version 1 · 2026-09-02.
     Delta prompt: assumes build-prompt.md has already run and the template is built in your
     agent's workspace. Do not stack on top of build-prompt.md. -->

# Brand-customize the Embercraft build (delta)

The template is already built in this workspace. Apply a brand pass without re-downloading
anything. Same rules as before: plain language, never delete what exists, never quietly
downgrade a request, honest one-line answers when something fails.

## Inputs (fill in or ask me)
- Brand name: {{BRAND_NAME}}
- Tagline: {{TAGLINE}}
- Primary accent color (hex, optional): {{PRIMARY_COLOR}}
- Domain for the footer (optional): {{DOMAIN}}

## Steps
1. Rewrite the visible copy in the new brand's voice while keeping the template's editorial
   tone (short sentences, sensory language, no filler). Keep every section: hero, story,
   beans/offer cards, subscription cadences, visit, contact.
2. If a new accent color was given, update the CSS custom properties only — the template's
   tokens are `--ember` / `--ember-deep` for accents and buttons. Do not introduce extra
   accent colors; this design runs on exactly one.
3. Update the contact email, address lines, opening hours, and the footer domain link.
4. Keep the license footer line intact (see `licensing.html` in the package for terms).
5. Re-verify: three widths (375/768/1440), all images load, contrast still readable on the
   cream background, and no placeholder text remains anywhere.
6. Show me the updated preview URL and a one-line summary of what changed. Then wait —
   for publishing, use `publish-prompt.md`.
Iterate on it Delta prompt: request changes with the design rules enforced.

View raw (iterate-prompt.md) · kit v1 · placeholders in [BRACKETS] are yours (or let your agent ask)

<!-- ByJTT prompt kit: embercraft v1.1 · iterate-prompt.md · kit version 1 · 2026-09-02.
     Delta prompt: use when the template is built and I want changes. Do not stack on top of
     build-prompt.md. -->

# Iterate on the Embercraft build (delta)

The template is built in this workspace and I want changes. Work like this:

1. Before touching code, write the change request as a short checklist and show it to me —
   confirm scope before editing (this template's design rules live in its manifest.json
   and design DNA: one accent family, generous whitespace, Fraunces/Inter, ember-line motif).
   If my request breaks a design rule, say so and offer the in-system alternative instead of
   silently breaking it.
2. Make the changes, smallest possible diff. Never delete files or sections unless I asked.
3. Re-verify after every batch: responsive at 375/768/1440, images load, no placeholder
   text, honest states kept (no fake checkout endpoints).
4. Show me the preview URL and the checklist with each item ticked. Wait for my next change
   request — or point me at `publish-prompt.md` when I say I'm done.

My changes: {{CHANGES}}
Publish it One prompt to deploy your finished site to your own Cloudflare (or GitHub Pages).

View raw (publish-prompt.md) · kit v1 · placeholders in [BRACKETS] are yours (or let your agent ask)

<!-- ByJTT prompt kit: embercraft v1.1 · publish-prompt.md · kit version 1 · 2026-09-02.
     Use when the build is done and I want it live. -->

# Publish the Embercraft build (one prompt)

You are publishing my finished static website. Be honest about what publishing means:
this template is static-only. If I've asked you to add a backend (database, logins, server
code), STOP now and tell me in one line that publishing needs a different plan — do not
deploy something that won't work.

## Safety rails
- Before touching anything: put the project under git (`git init` if needed) and commit the
  current state. Publishing must never destroy my only copy.
- The sign-in step is MINE, not yours: when login is needed, tell me to run the login
  command in a browser and WAIT for me to say it's done. Never ask me to paste passwords,
  tokens, or cookies to you.
- Never deploy from a folder with missing files; run the checks below first.

## Steps (Cloudflare Pages — free tier works)
1. Preflight: confirm `site/index.html` exists, all internal links resolve, and there are no
   secret-looking strings in the files. Tell me the result in one line.
2. Check that Node.js is installed (`node --version`, 18+ is fine). If not, tell me to
   install it and wait.
3. Tell me to run: `npx wrangler login` — a browser tab opens; I approve it; wait for me.
4. Deploy: `npx wrangler pages deploy . --project-name <a-name-I-choose>` from the site
   folder. Report the exact live URL it prints.
5. Optional if I gave a domain: add the custom domain in the Cloudflare dashboard
   (Pages project → Custom domains) — the dashboard clicks are mine; you verify afterwards
   with a curl status check.

## Not using Cloudflare?
Say the word and use the fallback instead: GitHub Pages (push the site folder to a
`gh-pages` branch and enable Pages in the repo settings) or Netlify Drop (drag the folder
at app.netlify.com/drop). Same honesty rules.

## After it's live
- Confirm the URL loads (curl status 200) and tell me it's public.
- Remind me to keep the license footer line (ByJTT Free Template License: personal,
  non-commercial; commercial use needs the paid license — see the marketplace licensing page).

What's inside

  • Single-page layout: hero, story, weekly beans, visit, contact footer.
  • Self-contained static HTML/CSS/JS — no build step, no required CDN.
  • Responsive at 375 / 768 / 1440; mobile nav with proper toggle state.
  • Accessibility: skip link, landmarks, alt text, focus rings, reduced-motion support.
  • Generated imagery: hero, story, product, card cover — one consistent art direction.

Design DNA

  • Palette: paper #FAF6F0 · surface #F1E9DE · ink #2B211B · ember #C25E33
  • Type: Fraunces (display) + Inter (body), fluid scale · eyebrow micro-labels for section eyebrows
  • Signature element: the ember line — a fading hairline motif
  • Anchor: Kenya Hara whitespace philosophy, Swiss grid discipline

Remix it

  • Download: grab the zip above, unzip, open index.html. Done.
  • Clone: git clone https://github.com/jordan-thirkle/byjtt-web-design-templates.git — the template lives at templates/embercraft/site/.
  • Deploy: any static host — GitHub Pages, Netlify, Cloudflare Pages, Vercel.
  • For agents: read the manifest, then build from files[] — every file, asset, and the license are declared.
  • Change the palette tokens and images to make it yours; the license covers modification.

Notes for AI agents

  • Best for: restaurant/café one-pagers that lead with warm, photography-heavy heroes.
  • Avoid if: you need dark mode or multi-page navigation.

Deep contract: manifests/embercraft.json — file list, assets, design DNA, license, changelog.