# Make Tweakable

> 在已完成的单文件 HTML 设计或原型中加入可隐藏的浮动参数面板，让用户现场调整颜色、字体、密度、文案、布局变体或功能开关，并在一个文件中比较方案。用户要求“可调参数”“让我自己试几版”“加 Tweaks 面板”或实时调整设计时使用；不要未经要求给普通交付物添加编辑控件。

- Skill: `onevium/make-tweakable` (Agent Skill, multi-file: 2 files)
- Install (CLI): `npx skillmds@latest add onevium/make-tweakable`
- Raw SKILL.md: https://api.skillmd.com/api/skills/onevium/make-tweakable/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- License: MIT. See LICENSE.txt for full terms.
- Author: Onevium (https://skillmd.com/u/onevium)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/onevium/make-tweakable

---


# 添加可调参数面板

在不制造多个版本文件的前提下，让用户探索少量高价值设计轴。参数面板服务于评审，不应变成简陋的 Figma 替代品。

## 1. 选择可调项

确认或建议真正影响方向的变量，例如主色、字体、字号、密度、布局、组件样式、标题和功能开关。通常控制在 3–8 项，每项都应对应用户想比较的决策。

## 2. 设计面板

面板默认浮动在不遮挡主要内容的位置，使用紧凑纵向布局，并提供清楚的显示/隐藏按钮或键盘快捷键。按值类型选择控件：颜色选择器、下拉或按钮组、滑块、开关和文本输入。

## 3. 接通状态

视觉 token 通过 CSS 自定义属性更新；文案、布局和功能开关使用明确的 JS 状态。默认值集中在普通对象中，使面板关闭时仍能完整渲染。

需要跨刷新保留探索结果时使用 `localStorage`，安全解析旧数据并提供恢复默认值。首次渲染前应用已保存状态，避免闪烁。

## 4. 保持成品感

关闭面板后应完全隐藏全部编辑界面，页面看起来仍是可交付成品。面板不得修改业务数据、调用真实后端或泄露调试信息。

## 5. 验证

逐项更改参数，确认影响范围正确；刷新后检查持久化；恢复默认值；在面板关闭时检查布局、键盘焦点和移动端遮挡。

## 示例

**输入：**“让我现场调这个落地页的颜色和间距。”

**输出：**在同一 `landing.html` 中加入可隐藏 Tweaks 面板，提供主色、强调色、紧凑/常规/宽松密度和基础字号四项控制；使用 CSS 变量实时更新，可恢复默认值并选择性持久化。

## 来源与许可

本 Skill 基于 Trystan Sarrade 的 [claude-design-system-prompt](https://github.com/Trystan-SA/claude-design-system-prompt) 进行中文化与 Claude Skill 规范适配。上游与本改编均按 MIT License 发布，详见 [LICENSE.txt](./LICENSE.txt)。