编写 Design 模板
创建一份可复用 HTML 模板，并让内容、Token、资产和响应式布局都保持可编辑。
Design 模板就是普通的静态 HTML、CSS、JavaScript 和资产包，不是位图导出。好的模板具备结构、响应式布局，并清晰地说明哪些部分可以在智能体生成或改写之后由人继续调整。
manifest 指向入口与 Token 文件，文档保持语义结构和本地资产。
- 01HTML 入口
主编辑产物，通常为 entry.html。
- 02Token 文件
稳定的 --ipw-* 自定义属性集中表达视觉决策。
- 03Manifest
声明可编辑分组和模板元数据。
- 04会话副本
用户选择 Use 后，作为新的 Design 产物打开。
使用语义结构
尽可能分离内容与视觉决策：
<link rel="stylesheet" href="design-tokens.css" />
<section class="hero" data-ipw-section="hero">
<p class="eyebrow" data-ipw-text="hero.eyebrow">iPolloWork</p>
<h1 data-ipw-text="hero.title">Build with agents. Edit everything.</h1>
<a data-ipw-text="hero.cta" href="#start">Start a workspace</a>
</section>
:root {
--ipw-color-primary: #17394d;
--ipw-color-surface: #f6f7fb;
--ipw-font-display: "Poppins", system-ui, sans-serif;
}
manifest 不应声明 Token 样式表中并不存在的变量。需要暴露给用户或工具的 --ipw-* 属性应确实被文档使用。
编写编辑约定
designSystem.variables 是公开的编辑约定。使用它为可安全改动的区域命名，例如主题、背景、排版和组件。通过 apply checklist 说明用户发布前必须替换的内容。
测试一个真正的新副本
导入模板、选择 Use 后，在新会话中确认：
- 文本、布局和资产不依赖外部本地路径。
- 声明的 Token 文件可加载，且每个声明的变量都存在。
- 产物拥有可用的桌面和移动端布局。
- 直接编辑不会破坏入口结构。
- 卸载源模板不会删除会话副本。
涉及运动场景和时间线时，请使用独立的 Video 模板 格式。