B2B 海外独立站构建

概述

Build a B2B Export Website

Deliver the working website, not only a plan or mockup. Preserve unrelated user changes and adapt to the existing stack.

Route the work

• Read every supplied requirements file before designing. For PDFs, use the PDF skill and inspect rendered pages when layout carries meaning.
• If Product Design skills are available, use the index/router and the applicable implementation or audit skill.
• Use image generation only when the site needs original marketing visuals and suitable brand assets are absent.
• Use the Browser skill for local visual and responsive QA after implementation.
• Browse current primary sources for search, accessibility, browser, PHP, security, or hosting requirements that may have changed.

Establish facts

Inspect the workspace, requirements, existing code, brand assets, and dirty worktree. Determine:

• company, product categories, target markets, buyer roles, desired inquiries, languages, and proof points;
• final domain, contact details, legal entity, privacy jurisdiction, and real certifications;
• hosting limits: PHP version, Apache/LiteSpeed/Nginx, writable paths, database availability, and whether storage can live above public_html;
• existing framework and build/deploy commands.

Do not invent certifications, production capacity, customers, addresses, phone numbers, guarantees, or legal claims. Mark unresolved business facts visibly and list them at handoff. Treat an unknown domain as a blocking SEO value: use one consistent documented placeholder only if implementation must proceed.

Read [references/requirements-and-design.md](references/requirements-and-design.md) when converting a brief into site architecture, content, and UI.

Build in this order

1. Convert requirements into a page inventory, navigation, conversion paths, and content matrix.
2. Define a compact design system: color, typography, spacing, container widths, radii, shadows, buttons, form controls, focus states, and breakpoints.
3. Build shared semantic header, navigation, footer, breadcrumbs, sections, cards, calls to action, forms, and error/success states.
4. Implement all agreed pages with useful English B2B copy and contextual internal links.
5. Complete on-page and technical SEO while building, not as a final cosmetic pass.
6. Add the shared-hosting lead system only when requested or required by the brief.
7. Test desktop, tablet, and mobile behavior in a real browser and run deterministic audits.
8. Produce deployment instructions tailored to the detected hosting environment.

SEO requirements

Read [references/seo-and-responsive.md](references/seo-and-responsive.md) before finalizing SEO or QA.

For every indexable page, require:

• unique useful title and meta description;
• absolute canonical URL using one consistent HTTPS host;
• crawlable semantic links, one descriptive H1, logical heading order, and descriptive image alt text;
• visible breadcrumb navigation plus matching BreadcrumbList JSON-LD where applicable;
• appropriate Open Graph/Twitter metadata and valid page-type structured data;
• contextual internal links to related products, solutions, proof, and conversion pages.

Generate sitemap.xml with canonical indexable URLs only. Generate robots.txt with the sitemap location and exclusions for admin, API, private storage, configuration, staging artifacts, and audit files. Never rely on robots.txt to protect secrets or customer data. Use noindex for thank-you, setup, login, privacy pages when appropriate; do not place those pages in the sitemap.

Use the bundled scripts when the project is a root-level static HTML site:

node <skill-dir>/scripts/generate-sitemap.mjs <site-root> <https://canonical.example>
node <skill-dir>/scripts/audit-site.mjs <site-root>

For framework projects, implement equivalent build-time routes and checks rather than forcing these scripts.

Shared virtual-host lead system

Read [references/shared-hosting-leads.md](references/shared-hosting-leads.md) completely before implementing the lead backend.

Use static HTML/CSS/JS for the storefront and small PHP endpoints for submission/admin. Do not introduce a daemon, queue worker, Node server, Docker requirement, or database when the user specifies ordinary shared hosting.

Require:

• POST-only submission, same-origin validation, input length limits, server-side validation, privacy consent, honeypot, minimum-fill-time check, and rate limiting;
• optional upload size, extension, and MIME checks; randomized server filenames; authenticated download controller;
• JSONL or equivalent append-only records protected with flock;
• password_hash/password_verify, secure sessions, CSRF on state changes, login throttling, and noindex headers;
• one-time token-protected setup and diagnostics pages;
• authenticated dashboard, search, pagination, lead detail, attachment download, and CSV export;
• storage above the public web root whenever possible.

If storage must remain in the public root, add layered protection and clearly state that Nginx ignores .htaccess. Never claim the system is production-ready until diagnostics and a real submit/read/export test pass on the actual host.

Responsive and cross-browser QA

At minimum verify narrow phone, large phone, tablet portrait, tablet landscape, laptop, and wide desktop. Check:

• no horizontal overflow or clipped content;
• navigation, menus, buttons, forms, file inputs, tables, and admin pages remain usable;
• touch targets and form text are comfortably sized; iOS does not zoom inputs unexpectedly;
• keyboard focus, skip link, labels, errors, reduced motion, contrast, and zoom are usable;
• images have dimensions and responsive sizing; layout shifts are minimized;
• CSS/JS avoids unsupported features without fallbacks for the agreed browser matrix.

Test at least current Chrome/Edge/Safari/Firefox behavior when those environments are available. If not available, test what is available and explicitly report the coverage gap.

Completion gate

Do not finish until all applicable gates pass:

• requirements traceability and page inventory;
• HTML/JS/PHP syntax checks appropriate to the environment;
• SEO audit, structured-data parsing, internal-link check, sitemap and robots review;
• browser inspection of primary pages and both lead forms;
• real PHP diagnostics and test submission on the target host, or an explicit handoff note that this external test remains;
• deployment guide including permissions, HTTPS, setup token rotation, backups, storage location, Search Console sitemap submission, and unresolved real-world values.

Lead the handoff with what is complete. Link important local files, list validation evidence, distinguish local checks from host-runtime checks, and identify only the remaining actions the user must perform.