Reference Site Launcher + Website Factory Starter

Use Codex to study an approved reference website and quickly build an original, production-ready marketing site. This public repository delivers both parts of the workflow:

• skills/reference-site-launcher/: the installable Codex skill that drives discovery, clean-room reconstruction, QA, lead-path verification and handoff;
• the repository root: a production-minded Astro starter with reusable engineering, tests, packaging and deployment examples.

中文定位：参考已有网站的页面结构、视觉节奏和交互流程，快速复刻其产品思路， 同时使用原创代码、文案、品牌和素材完成可上线的网站。

This is not a source-code or content copier. Do not reuse protected text, trademarks, media, fonts, private endpoints, analytics identifiers or customer data without permission. Do not use it for impersonation, phishing or deceptive affiliation.

Install the Codex skill

Ask Codex:

Use skill-installer to install reference-site-launcher from:
https://github.com/fyaic/website-factory-starter/tree/main/skills/reference-site-launcher

The skill becomes available to that Codex installation on the next turn. Then start a project with a prompt such as:

Use $reference-site-launcher to study <reference URL or screenshots> and build
an original production-ready website for <company>. Record the requirements and
content guardrails, create a private project from
fyaic/website-factory-starter, verify desktop/mobile behavior, SEO, cookies and
the real lead-delivery path, then provide the source commit and a compiled
webroot ZIP for handoff.

Each business user installs the skill once in their own Codex environment.

Create a private client project

The toolkit is public, but client projects do not need to be public. Use the GitHub Use this template button and choose Private, or run:

gh repo create <owner>/<project-name> \
  --private \
  --template fyaic/website-factory-starter \
  --clone

Do not build a client website directly on this public template repository.

What is included

• Installable reference-site-launcher Codex skill
• Static Astro build with no application server requirement
• Home, service index, five service pages, company, insights, contact and legal pages
• Responsive navigation and custom 404
• First-visit cookie consent with reject, accept and preferences
• Contact form with validation, loading, success, failure and honest email fallback
• Canonical, Open Graph, Twitter, sitemap and robots metadata
• Generated JPEG starter photography
• Desktop and mobile Playwright checks
• Artifact guardrail scanner and deterministic webroot packager
• Direct ZIP, Nginx, Caddy and Coolify deployment paths
• Project intake, content guardrail, QA and production handoff documents

Quick start

npm install
npm run dev

The starter uses deliberate placeholder identity and contact details. It is safe for development, but npm run ready:production will fail until they are replaced.

Delivery workflow

1. Create a new private repository from this template.
2. Complete docs/PROJECT_INTAKE.md.
3. Record the reference analysis in docs/REFERENCE_DECOMPOSITION.md.
4. Approve docs/CONTENT_GUARDRAILS.md.
5. Replace identity, copy and service data in src/config/site.ts.
6. Replace the starter photos and update docs/ASSET_REGISTER.md.
7. Update privacy and cookie text with approved legal language.
8. Set SITE_URL and PUBLIC_FORM_ENDPOINT.
9. Update docs/qa/site-spec.json to match the final route and content contract.
10. Run the full release checks.

Environment

cp .env.example .env

• SITE_URL: final canonical origin used by canonical links, sitemap, robots and social metadata
• PUBLIC_FORM_ENDPOINT: public browser-safe form endpoint

Never place SMTP passwords, API secrets or private tokens in an Astro PUBLIC_ variable. A browser can read every public build variable.

Lead delivery

The starter submits multipart/form-data and includes:

• contact_name
• work_email
• company
• service_requested
• project_details
• consent_to_contact
• quote_reference
• received_utc
• visitor_timezone
• source_url
• reply_to

If no endpoint is configured, the page opens an email draft and clearly states that delivery was not confirmed. This avoids false success messages.

For external relays, complete any mailbox activation and production-domain allowlist step. For higher reliability, point the form to an owned Lead Gateway that validates, rate-limits, stores and forwards the submission.

The owned endpoint contract and business email layout are documented in docs/ops/LEAD_GATEWAY_CONTRACT.md and docs/ops/LEAD_EMAIL_TEMPLATE.md.

Quality and release

npm run check
npm run test:e2e
npm run audit:artifact
npm run package:webroot

For a real client build:

SITE_URL=https://www.example.com \
PUBLIC_FORM_ENDPOINT=https://forms.example.com/project \
npm run build

SITE_URL=https://www.example.com \
PUBLIC_FORM_ENDPOINT=https://forms.example.com/project \
npm run ready:production

The production readiness check intentionally fails while starter identity, contact details, example origin or missing form configuration remain in the compiled output.

Generated image prompts

The three starter photos were created with the built-in OpenAI image generation tool for this repository:

• Bright advanced-manufacturing facility with an automated production line
• Operations team reviewing a shared plan inside a modern engineering facility
• Automated distribution facility with organized material flow

All prompts required photorealistic editorial treatment and prohibited readable text, logos, trademarks and watermarks. Replace these images for each client project unless they are explicitly approved.

Deployment

See deploy/README.md and docs/ops/PRODUCTION_HANDOFF.md. The core rule is to rebuild for the final domain. Changing DNS alone does not update compiled canonical, Open Graph, sitemap, robots or form-provider domain controls.

Design direction

The starter reads as a B2B marketing site for enterprise buyers. It uses an industrial editorial language with design variance 7, motion intensity 5 and visual density 4. Motion communicates hierarchy and feedback, and it collapses under reduced-motion preferences.

The demo content uses a single accent, a sharp-corner system, asymmetric section layouts and generated photography. It avoids generic equal-card rows, fake dashboards, invented performance statistics and copied reference-site assets.

Repository layout

skills/reference-site-launcher/  Codex workflow skill
src/                             Astro source
public/                          public assets
docs/                            requirements, QA and handoff records
tests/                           Playwright release checks
scripts/                         artifact audit and packaging tools
deploy/                          Nginx, Caddy and container examples

License

Released under the MIT License. Reference websites and third-party assets remain subject to their own rights and terms.