Onevium 添加可调参数面板
在不制造多个版本文件的前提下，让用户探索少量高价值设计轴。参数面板服务于评审，不应变成简陋的 Figma 替代品。
1. 选择可调项
确认或建议真正影响方向的变量，例如主色、字体、字号、密度、布局、组件样式、标题和功能开关。通常控制在 3–8 项，每项都应对应用户想比较的决策。
2. 设计面板
面板默认浮动在不遮挡主要内容的位置，使用紧凑纵向布局，并提供清楚的显示/隐藏按钮或键盘快捷键。按值类型选择控件：颜色选择器、下拉或按钮组、滑块、开关和文本输入。
3. 接通状态
视觉 token 通过 CSS 自定义属性更新；文案、布局和功能开关使用明确的 JS 状态。默认值集中在普通对象中，使面板关闭时仍能完整渲染。
需要跨刷新保留探索结果时使用 localStorage，安全解析旧数据并提供恢复默认值。首次渲染前应用已保存状态，避免闪烁。
4. 保持成品感
关闭面板后应完全隐藏全部编辑界面，页面看起来仍是可交付成品。面板不得修改业务数据、调用真实后端或泄露调试信息。
5. 验证
逐项更改参数，确认影响范围正确；刷新后检查持久化；恢复默认值；在面板关闭时检查布局、键盘焦点和移动端遮挡。
示例
输入：“让我现场调这个落地页的颜色和间距。”
**输出：**在同一 landing.html 中加入可隐藏 Tweaks 面板，提供主色、强调色、紧凑/常规/宽松密度和基础字号四项控制；使用 CSS 变量实时更新，可恢复默认值并选择性持久化。
来源与许可
本 Skill 基于 Trystan Sarrade 的 claude-design-system-prompt 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布，详见 LICENSE.txt。