Use Design

Design is the iPolloWork surface for editable visual work. It is suited to websites, product interfaces, decks, reports, cards, posters, and other HTML-based artifacts. The durable artifact is the project itself: markup, styles, assets, and declared design tokens.

Start a design task

Write a brief that gives the agent the actual working constraints:

Create a responsive launch page for a developer tool.
Use the existing logo and copy from ./brand.
Keep the page single-column below 768px.
Use editable CSS variables for color and typography.

Include local paths, references, target dimensions, and the content that must remain accurate. Avoid asking for a flat image when the result needs to be revised after generation.

Make the result easy to edit

Keep visual tokens separate from the structure whenever possible:

<link rel="stylesheet" href="design-tokens.css" />

<main class="landing-page">
  <h1 data-ipw-text="hero.title">Build with agents. Edit everything.</h1>
  <p data-ipw-text="hero.summary">A local-first workspace for real work.</p>
</main>

:root {
  --ipw-color-primary: #17394d;
  --ipw-color-accent: #3a9fca;
  --ipw-font-display: "Poppins", system-ui, sans-serif;
}

The --ipw-* custom properties can be declared as editable design-system variables in a template manifest. Stable semantic structure and relative asset paths make a result easier to continue editing, package, and share.

Review before handoff

• Confirm text can be selected and revised. Do not flatten real content into an image.
• Check desktop and mobile widths using the canvas controls.
• Keep images, fonts, and styles inside the working artifact or at a stable relative path.
• Give components semantic names and stable identifiers when they are likely to be revisited.
• Ask the agent to make a focused revision, then inspect the changed artifact before accepting it.

For a reusable package, continue with Template development instead of copying an old project folder by hand.