make-tweakable

当用户希望直接在设计稿中调整变体、替换颜色、编辑文案或切换功能标记时加载。

展示哪些内容

少量高影响力的值。适合的选项：一两个关键颜色、布局变体开关、功能标记、标题文案字段。不要展示过多内容。每增加一个控件，都会提高设计成本并弱化重点。

如果用户没有指定可调整的内容，就自行挑选 2–3 个有意思的选项，并在摘要中说明原因。

面板位置

在右下角放置一个小型浮动面板。标题必须准确写作 Tweaks，以便与宿主可能提供的任何外部开关保持一致。停用调整功能时，完全隐藏面板，不留任何残余界面元素。

保持控件界面简洁得体。除非美观设计有绝对需要，否则使用原生输入控件（<input type="color">、<select>、<input type="text">、<input type="range">），而非自行实现表单组件。

激活协议

顺序很重要。按以下顺序执行：

1. 注册消息监听器，以处理来自父框架的 activate 和 deactivate 消息。
2. 然后向父框架发送可用性消息，告知其支持调整功能。

如果先发送可用性消息，宿主的 activate 消息可能会在处理器就绪前到达，导致开关无声无息地不起作用。

停用与外部同步

用户在设计稿内关闭面板时，向父级发送消息，让任何外部开关同步关闭。宿主与设计稿内的面板必须始终保持状态一致。

持久化

将调整状态持久化到宿主可在重新加载时读取的位置。根据设计稿选择合适的方式：

• 在源代码中嵌入带标记的 JSON 块（适用于宿主会重新提供的单文件 HTML 设计稿）。
• 使用以设计稿 ID 为键的 localStorage（适用于长期存在的预览）。
• 使用宿主提供的回写钩子（当宿主提供此类钩子时）。

在摘要中说明所选的持久化方式。