| name | instant-site |
| description | Build, deploy, update, and SEO-optimize static foreign trade independent sites using HTML/CSS/JS, DESIGN.md templates, Cloudflare Pages (Wrangler), and scheduled agent operations. Use for from-zero site generation, static deployment, scheduled content operations, SEO audits, and multi-site independent site operations. |
| triggers | ["deploy static site","free hosting","cloudflare pages deploy","wrangler deploy","pages deploy","surge deploy","static site SEO","build foreign trade site","independent site operations","scheduled website content","multi-site operations","上线静态站","免费部署","Cloudflare Pages 部署","自动部署静态站","外贸独立站","从零建站","独立站运营","自动更新网站内容","SEO 审计","多站点运营"] |
Instant Site — Agent-Operated Foreign Trade Independent Sites
Instant Site helps an agent build, deploy, update, and SEO-optimize static foreign trade independent sites. The default stack is HTML/CSS/JS, DESIGN.md, Cloudflare Pages (Wrangler), JSON state files, and scheduled agent operations.
Operating Principles
- Static first — Generate crawlable HTML/CSS/JS. Do not use pure CSR/SPAs for SEO-critical pages.
- Cloudflare Pages first — Use Cloudflare Pages as the default deployment provider via Wrangler with a user-provided Cloudflare API Token; use Surge.sh as fallback when Cloudflare account/token setup is unavailable or the user explicitly requests the simpler fallback host.
- DESIGN.md required — Generate or reuse a DESIGN.md before building pages.
- SEO by default — Every page needs title, description, canonical, Open Graph, Twitter Card, and relevant JSON-LD.
- State in files — Use
site.config.json, .instant-site/state.json, and related JSON files instead of relying on chat history.
- Review risky publishing — Default to
review_required for new commercial content, product claims, pricing, certifications, legal text, and domain changes.
- Multi-site isolation — When operating multiple sites, read each site's config and state separately; never reuse canonical URLs, sitemap URLs, or domains across sites.
- Design quality matters — Prevent generic AI-looking sites. Infer design direction before template selection. Avoid default slop patterns. Follow layout discipline. Use real visuals.
- Token authorization must be safe and explicit — For Cloudflare Pages deployment, guide non-technical users to create a minimal-scope Cloudflare API Token, verify with
CLOUDFLARE_API_TOKEN=<token> npx wrangler whoami, never store or log the token, and continue only after token auth succeeds. For novice users, explain Cloudflare account and API Token setup in the user's preferred language when possible; default to simple English and avoid country-specific assumptions.
Read Documents by Task
Before execution, read the appropriate workflow document:
| Task | Read First |
|---|
| From-zero site generation | docs/workflows/site-generation.md → templates/pages/site-generation-checklist.md |
| Responsive design | docs/workflows/responsive-design.md → CSS framework template |
| Image acquisition | docs/workflows/image-acquisition.md → docs/tool-registry.md (Image Acquisition section) |
| Deployment | docs/workflows/deployment.md → templates/deployment-checklist.md |
| SEO audit | docs/workflows/seo-audit.md → docs/seo-operations.md |
| Multi-language / RTL | docs/workflows/multilingual-rtl.md |
| Content operations | docs/content-lifecycle.md → templates/content-plan.example.json |
| Multi-site management | docs/multi-site-operations.md → templates/sites.registry.example.json |
| Publishing review | docs/review-gates.md |
| Buyer context | docs/buyer-context.md → templates/buyer-context.example.json |
| Tool reference | docs/tool-registry.md |
| State files | docs/site-state.md |
Design Quality Rules
Design Read Before Template Selection
Before selecting or generating a DESIGN.md, state one line:
Reading this as: <page kind> for <audience>, with a <vibe> language, leaning toward <template>.
Anti-Slop Defaults
Avoid these LLM-signature patterns unless the brief explicitly calls for them:
- Inter plus slate plus purple gradient as default palette
- Centered hero sections as default layout
- Three equal feature cards in a row
- Fake dashboard or product screenshots built from styled divs
- Decorative status dots, section-number eyebrows, scroll cues, version labels
- Plain text wordmarks for invented social-proof logo walls
- Em-dashes in visible copy
- Fake-precise metrics without a source
- Text-only "minimalism" without real visuals
Layout Discipline
- Hero must fit the initial viewport without scroll
- Hero subtext max 20 words, max 4 lines
- Hero stack max 4 text elements
- Desktop navigation height at or below 80px
- Every multi-column section must collapse below 768px
- CTA labels must not wrap on desktop
Responsive Design Rules
Required viewport meta (every page):
<meta name="viewport" content="width=device-width, initial-scale=1">
Breakpoint targets:
| Size | Width | Devices |
|---|
| Mobile | ≤ 480px | Phones |
| Tablet | 768px-1024px | Tablets, iPad |
| Desktop | ≥ 1024px | Laptops, monitors |
Touch target minimum: All buttons, links, inputs ≥ 44px height (WCAG 2.5.5)
Input font size: 16px minimum to prevent iOS auto-zoom
Mobile-first strategy: Start with mobile styles, expand for larger screens
Key responsive patterns:
- Hero: Stack vertically on mobile, two columns on tablet/desktop
- Grids: 1 column mobile → 2 columns tablet → 3-4 columns desktop
- Navigation: Horizontal on desktop, hamburger menu on mobile
- Tables: Stack as cards or horizontal scroll on mobile
Testing devices: iPhone SE (375px), iPhone 14 (390px), iPad (768px), Desktop (1280px)
See docs/workflows/responsive-design.md for complete CSS framework and patterns.
Visual Asset Strategy
Every major landing page needs a visual asset plan:
- Hero visual
- 1-3 supporting visuals
- OG image for social sharing
Priority order:
User-provided assets → Generated images → Free stock images → Placeholder (draft only)
Free stock sources (all commercial-use, no attribution required):
- Unsplash — Hero backgrounds, general business photos
- Pexels — Products, industrial settings, machinery
- Pixabay — Fallback, vectors/illustrations
- Burst by Shopify — E-commerce, consumer goods
Search workflow:
- Use brave-search/web-fetch/scrapling skills to search stock sites
- Keywords:
{industry} professional, {product} equipment, manufacturing plant
- Download to
assets/images/, integrate with proper alt text
Rules:
- Never ship production pages with placeholder images
- Never use images from non-commercial sources (Google Images, Pinterest)
- All images must have descriptive alt text
- See
docs/workflows/image-acquisition.md for complete workflow
Review Gates and Claim Safety
Human Approval Required
Default to approval before:
- First launch
- New product pages and blog articles
- Brand positioning changes
- Pricing, lead time, certification, compliance, or legal claims
- Contact method and custom domain changes
- Page deletion
Low-Risk Automation
When review-policy.json allows:
- sitemap updates
- robots sitemap URL correction
- lastmod updates
- minor metadata completion
- internal links to already approved pages
- approved draft publishing
- deployment verification
- health checks
- SEO audit report generation
Claim Safety
Do not invent or exaggerate:
- factory size or production capacity
- certifications, patents, or compliance guarantees
- customer names, case studies, or test results
- prices, delivery times, or warranty terms
If a claim is useful but unverified, mark it as needing confirmation in needsConfirmation array.
Project Structure
Recommended user site structure:
customer-site/
site.config.json
buyer-context.json
content-plan.json
seo-profile.json
review-policy.json
DESIGN.md
index.html
products/
index.html
{slug}.html
blog/
index.html
{slug}.html
assets/
css/styles.css
js/main.js
images/
robots.txt
sitemap.xml
.instant-site/
state.json
deployments.json
content-calendar.json
buyer-context.json
For multi-site workspace:
workspace/
sites.registry.json
sites/
site-a/
site-b/
Quick Start
Ask an agent:
Build an English B2B foreign trade site for the following brand and products.
Use the b2b-industrial DESIGN.md template.
Generate site.config.json, DESIGN.md, index.html, product pages, about.html,
contact.html, robots.txt, and sitemap.xml.
Prepare a publish review before deployment.
Minimum inputs:
- Brand name and tagline
- Target markets and languages
- Product list, features, applications, and target keywords
- Certifications or proof points (verified)
- Contact email and primary CTA
- Cloudflare Pages project name or preferred Pages subdomain
- Optional custom domain
- Optional Surge fallback domain
- Design template selection
- Publishing policy:
review_required, hybrid, or auto_publish
Best For
- B2B foreign trade websites (machinery, tools, hardware, OEM/ODM)
- B2C consumer goods and lifestyle brands targeting overseas markets
- Product catalog and single-product landing pages
- Small brand independent sites
- Static marketing sites with repeatable content and SEO operations
Limitations
- Cloudflare Pages supports
_headers and _redirects — Use for CSP, HSTS, custom caching, and redirect rules
- Surge.sh fallback cannot add custom headers — Use Cloudflare Pages when security headers required
- Custom domains may require dashboard/DNS confirmation — Wrangler deploys to
.pages.dev automatically; custom domain activation may need Cloudflare dashboard
- External SEO data requires authorization — Do not claim rankings without Search Console access
- curl cannot detect JS-injected schema — Use browser tools for JSON-LD verification
- FormSubmit first submission needs confirmation — Remind user to check email
- Static sites use FormSubmit for forms — No server-side processing
Current SEO Guidance
- Use INP, not deprecated FID
- Do not use deprecated HowTo schema
- FAQPage helpful for clarity but doesn't guarantee rich results
- Keep SEO-critical content in static HTML
- Core Web Vitals: LCP < 2.5s, INP < 200ms, CLS < 0.1
License
MIT
