iPolloWork Docs

Author a Design template

Build a reusable HTML template whose content, tokens, assets, and responsive layout remain editable.

Design templates are ordinary static HTML, CSS, JavaScript, and asset packages. They are not raster exports. The best template is structured, responsive, and clear about which parts a person can update after the agent has generated or adapted it.

System flowEditable Design template contract

The manifest points to the entry and token file. The document keeps semantic structure and local assets.

  1. 01HTML entry

    The main editable artifact, conventionally entry.html.

  2. 02Token file

    Stable --ipw-* custom properties group visual decisions.

  3. 03Manifest

    Declares editable groups and the package metadata.

  4. 04Session copy

    Opens as a fresh Design artifact after a person selects Use.

Use semantic structure

Separate content from visual decisions where practical:

<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;
}

Use a declared --ipw-* property in the document itself. A manifest should not claim a variable that the token stylesheet does not contain.

Write the editing contract

designSystem.variables provides the public editing contract. Use it to name groups a person or tool can safely change, such as theme, background, typography, and components. Describe the choices in the apply checklist so a new user knows what must be replaced before publishing.

Test a real new copy

Import the package, select Use, and check the new session for the following:

  • Text, layout, and assets are present without external local paths.
  • The declared token file loads and each declared variable exists.
  • The artifact has a usable desktop and mobile layout.
  • A direct edit does not corrupt the entry structure.
  • Uninstalling the source template does not delete the session copy.

For motion scenes and timeline controls, use the separate Video template format.

On this page

Use semantic structureWrite the editing contractTest a real new copy