{Project Name} -- Landing Page Deployment
【免费下载链接】agentsMulti-harness agentic plugin marketplace for Claude Code, Codex, Cursor, OpenCode, GitHub Copilot, and Google Antigravity项目地址: https://gitcode.com/GitHub_Trending/agents24/agents
What's In This Bundle
index.html-- Landing page (desktop layout), generated by Stitchmobile.html-- Mobile-optimized version (if applicable)design/DESIGN.md-- Brand design system and rationaledesign/color-tokens.json-- Design tokens for use in your app's themeassets/-- Source images for integration (logos, screenshots you provided)
Design Tokens
- Primary Color: {color name} ({hex})
- Headline Font: {font name} (Google Fonts: {family name})
- Body Font: {font name} (Google Fonts: {family name})
- Border Radius: {roundness description} ({px value})
- Color Mode: {Light/Dark}
Deployment Checklist
- Replace placeholder images with real product screenshots or photos
- Update the CTA link to point to: {CTA destination}
- If you provided images in
assets/, swap them into the HTML where placeholders appear - Add your analytics snippet (Plausible, PostHog, Google Analytics, etc.)
- Verify Google Fonts load correctly for: {headline font}, {body font}
- Test on mobile before going live
Deployment Options
- Static host:Drop
index.htmlinto Vercel (vercel deploy), Netlify (netlify deploy), or GitHub Pages - Integrate with existing site:Copy the HTML into your framework's landing route and adjust paths
- Custom domain:Point your domain's DNS to your hosting provider per their docs
Design Decisions
{2-3 sentences explaining key choices made during the session}
### 模板背后的交付包结构 DEPLOY.md 中的 "What's In This Bundle" 直接对应 [SKILL.md 第 220–232 行](https://link.gitcode.com/i/103f559e2ade161cbc70e8dea07ebc9b) 定义的交付包目录结构：{project-name}-landing-page/ index.html # 最终桌面版 HTML mobile.html # 移动版 HTML（如生成） design/ DESIGN.md # 品牌设计系统文档 color-tokens.json # 结构化设计令牌 assets/ {user-provided images} # 用户提供的原始图片 DEPLOY.md # 部署清单
生成步骤（[SKILL.md 第 234–242 行](https://link.gitcode.com/i/2fde00b05f9a62dd0cf1d501f75bacf3)）： 1. 从 `.stitch/designs/` 中挑选**最高版本号**的 `desktop-vN.html`（及可选 `mobile-vN.html`）拷入包根目录并重命名为 `index.html` / `mobile.html`——**中间迭代版本与变体对比文件不得进包**； 2. 依据 `primaryColor`、`colorMode`、`colorVariant`、字体与圆角生成 `color-tokens.json`； 3. 拷贝 `.stitch/DESIGN.md`（Phase 2 步骤 5 用语义化语言撰写的设计系统文档）； 4. 收集 `.stitch/user-assets/` 中的用户资产（如有）； 5. 用本文模板生成 `DEPLOY.md`； 6. 打包：`zip -r "{project-name}-landing-page.zip" "{project-name}-landing-page/"`； 7. 向用户交付："Bundle is ready at `{path}`. See `DEPLOY.md` for the deployment checklist." ### 模板各节的设计意图 - **Design Tokens**：把会话中的设计决策（主色 hex、标题/正文字体及 Google Fonts 家族、圆角 px 值、明暗模式）固化为可交接的结构化信息，供开发者接入自有应用主题。其中字体选择依据 [stitch-architecture.md 的 Font Personality Guide](https://link.gitcode.com/i/eabf0ae5de5f2c7dc55717f9778ec7d5)（28 个字体枚举，按现代无衬线/温暖无衬线/专业无衬线/优雅衬线/展示型分类，并附 8 组推荐搭配），圆角则对应 ROUND_FOUR(4px)/ROUND_EIGHT(8px)/ROUND_TWELVE(12px)/ROUND_FULL 四档（[stitch-architecture.md 第 228–235 行](https://link.gitcode.com/i/bc80a7c1ff97a2bd507e51f5a391118f)）。 - **Deployment Checklist**：明确列出落地页上线前必须人工完成的六件事——换掉占位图、接好 CTA 链接、换入 `assets/` 中的用户图片、注入分析脚本（Plausible / PostHog / Google Analytics 等）、验证 Google Fonts 加载、上线前移动端测试。这与 [README.md 的 Limitations](https://link.gitcode.com/i/3c7736c1f28c3b4c7bcc0c7dd8bb292a) 相互印证：Stitch 生成的是静态 HTML，占位图替换、CTA 接线与分析脚本都是交付后的人工工作。 - **Deployment Options**：给出静态托管（Vercel `vercel deploy`、Netlify `netlify deploy`、GitHub Pages）、集成进现有站点、自定义域名三种路径。 - **Design Decisions**：强制记录会话中 2–3 句关键设计取舍，让交付包自带决策上下文，方便后续迭代时回溯"当时为什么这么做"。 --- ## 五、从源码看状态管理的完整调用链 将前面各部分串起来，可以得到一条贯穿全流程的状态管理调用链，它把 Stitch 侧的异步对象与本地 `metadata.json` 的字段一一对应：Phase 1 访谈 ──> interview.* 字段填充（interviews 阶段 status="interview"） │ ▼ Phase 2 设计系统：create_project ──> create_design_system ──> update_design_system（必做） │ │ │ │ │ projectId ─────────> designSystemId ────────── 渲染生效 │ ▼ Phase 3 生成循环：generate_screen_from_text ──> get_screen / list_screens（异步检查，勿重试） │ │ │ screen ID ──> screens.desktop.current + history 追加，HTML 存为 desktop-vN.html │ ▼ 反馈翻译：edit_screens / generate_variants（EXPLORE / REIMAGINE）──> 新版本 + iterationCount+1 │ ▼ 批准 ──> status="approved" ──> Phase 4 交付 ──> zip 打包 ──> status="delivered"
【免费下载链接】agentsMulti-harness agentic plugin marketplace for Claude Code, Codex, Cursor, OpenCode, GitHub Copilot, and Google Antigravity项目地址: https://gitcode.com/GitHub_Trending/agents24/agents
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
