Communitygithub.com

工作区着陆页编辑器

用于编辑、更新或迭代工作区的着陆页HTML(杂志风格的 /w/:slug 页面)。支持增量编辑——获取当前HTML,进行针对性修改,然后写回。不用于初始生成——初始生成由 `brief` 字段触发服务器端的 LANDING_PAGE_PROMPT 通过 Gemini 完成。

工作区着陆页编辑器 是什么?

该技能允许你通过 `astria` CLI 直接编辑工作区的着陆页HTML,而无需依赖完整的 `brief` 重新生成。它对于排版调整、布局编辑、添加章节、更改文案、替换图片或修复标语等增量变化非常有用。工作流包括获取当前HTML,使用 Tailwind 约束进行调整,保留 `__TUNES_JSON_PAYLOAD__` 占位符以保持服务器端渲染,然后写回修改后的内容。该技能适用于所有使用 `astria` CLI 的平台,并强调仅当用户明确请求完整重新设计时才使用 `brief` 命令,以防止意外覆盖手动编辑的内容。

兼容平台~Claude Code~Codex CLI~Cursor✓Gemini CLI
npx skills add https://github.com/astriaai/skills/tree/HEAD/landing-page-editor

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

预览

来自技能 README

文档

工作区着陆页编辑器 是做什么的?

工作区着陆页(在 /w/:slug 渲染)是一个独立的 HTML 代码块,存储在 workspace.landing_page_html 中。它由服务器端 LANDING_PAGE_PROMPT 在每次提交 brief 时从头生成——该路径会整体覆盖 HTML。

对于任何不应重新生成整个页面的更改(排版调整、布局编辑、添加章节、更改文案、替换图片、修复标语),请直接编辑 HTML 并写回。除非用户希望完全重新生成,否则不要发送 brief。

所有命令都使用 astria CLI(参见 astria-api 技能)。传递 -w <workspace_id> 以定位工作区。

从 LANDING_PAGE_PROMPT 继承的约束

编辑时,请保留这些不变项(实时 /w/:slug 页面依赖于它们):

  • 输出为 内部 body HTML — 没有 <html>、<head>、<body> 或 <!DOCTYPE> 标签
  • 样式使用 Tailwind 实用类(已加载在页面中)。仅对 Tailwind 无法表达的悬停/动画效果使用 <style>
  • Pack 链接格式为 /p/{slug};模型/引用链接使用 tunes JSON 中的 link 字段原样(不要重新编码 %5B/%5D)
  • 每个图像/视频都包裹在 <a> 标签中
  • 图像和视频 URL 必须是已存在的 — 不要发明 URL
  • 视频使用 <video autoplay muted loop playsinline poster="POSTER_URL"><source src="VIDEO_URL" type="video/mp4"></video>
  • __TUNES_JSON_PAYLOAD__ 字符串位于 <script type="application/json" id="tunes-data">…</script> 内部,是一个服务器端占位符。服务器在渲染时将其替换为实时 tunes JSON。永远不要用字面 JSON 替换它 — 那样会冻结角色,新添加的 tunes 将不会显示
  • 编辑风格:衬线标题、宽间距、细线规则、人物图像使用 object-cover object-[center_top]、英雄跨页使用 max-h-[70vh]、人物容器使用 aspect-[4/5] 或 aspect-[3/4]

工作流程

1. 获取当前着陆页 HTML

astria landing get -w <workspace_id> --html > /tmp/landing_page.html

astria landing get -w <workspace_id>(不带 --html)返回完整的工作区 JSON — title、slug、brief、url、public_at、unlisted_at — 当你需要这些信息时使用。在 /w/{slug} 预览渲染后的页面。

2. 提取工作区数据(当编辑需要引用真实的 packs / prompts / tunes 时)

astria packs list -w <workspace_id> --limit 100
astria tunes list -w <workspace_id> --limit 200            # 页面上渲染的“角色”
astria prompts list -w <workspace_id> --limit 100 --offset 0   # 分页,使用 --offset 直到为空
astria prompts list -w <workspace_id> --pack-id <pack_id>      # 更高效,一次处理一个部分

列表端点通过 --limit/--offset 分页(默认排序 id desc)。循环使用 --offset 直到某页返回为空。

3. 进行增量编辑

在本地编辑 /tmp/landing_page.html。保持修改精准——生成器产生了数千字节的布局,大部分应保持不变。在保存之前,重新阅读上面的约束部分。

4. 将页面写回

astria landing set -w <workspace_id> --html-file /tmp/landing_page.html

此处不要传递 --brief — 那会丢弃你的编辑并通过 Gemini 从头重新生成。

5. 验证

打开 /w/{slug} 并目视确认更改。__TUNES_JSON_PAYLOAD__ 占位符在渲染时由服务器端替换——如果渲染的页面上仍然显示类似 JSON 的字符串,则说明占位符被意外删除或重命名。

从头重新生成

仅当用户明确要求完全重新设计时——提交一个 brief,服务器将运行 LANDING_PAGE_PROMPT 针对 Gemini,覆盖 HTML:

astria landing set -w <workspace_id> \
  --brief "Editorial fashion lookbook, AW26, dark moody palette, emphasize the womenswear packs"

相关技能