使用 Design
让智能体生成视觉产物后，直接编辑真实 HTML 和 CSS，而不是编辑一张截图。
Design 是 iPolloWork 的可视化编辑界面，适合网站、产品界面、演示文稿、报告、卡片、海报等 HTML 产物。长期有效的结果是项目本身，包括标记、样式、资产和声明过的设计 Token，而不是一张静态图片。
画布编辑的是生成后的真实项目，不是答案的图片预览。
- 01需求
说明受众、内容、视觉约束和交付格式。
- 02生成
生成带有本地 CSS 与资产的 HTML 入口。
- 03检查
在画布中检查层级、响应式行为和真实内容。
- 04修改
直接编辑，或让智能体继续修改当前产物。
开始一个设计任务
在提示中给出真实的工作约束：
为一个开发者工具创建响应式发布页。
使用 ./brand 中现有的 Logo 和文案。
在 768px 以下保持单列布局。
颜色和字体必须使用可编辑 CSS 变量。
包含本地路径、参考来源、目标尺寸，以及必须准确保留的内容。若结果需要反复修改，不要只要求生成一张平面图片。
保持可编辑性
尽量把视觉 Token 与结构分离：
<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;
}
当这些 --ipw-* 自定义属性被声明到模板 manifest 中时，可以成为可编辑设计系统变量。稳定的语义结构和相对资产路径让产物更容易继续编辑、打包和复用。
交付前检查
- 确认文字可以选中和修改，不要把真实内容压扁成图片。
- 在画布中检查桌面与移动端尺寸。
- 图片、字体和样式应位于产物内或稳定的相对路径上。
- 对未来可能继续修改的组件使用语义化名称和稳定标识。
- 让智能体每次只做一个聚焦修改，然后检查修改后的真实产物。
如果这份产物需要复用，请继续阅读 模板开发，不要手动复制旧项目目录。