make-tweakable
Skill1 starsChanged 2 months agoMITView on GitHub
在已完成的单文件 HTML 设计或原型中加入可隐藏的浮动参数面板，让用户现场调整颜色、字体、密度、文案、布局变体或功能开关，并在一个文件中比较方案。用户要求“可调参数”“让我自己试几版”“加 Tweaks 面板”或实时调整设计时使用；不要未经要求给普通交付物添加编辑控件。
3 other projects use a version of this.
Adopted by
Most recently taken up by
- Onevium/skillsword for word, first seen Sep 4, 2026
- aiatelie/ai-atelietheir own version, first seen May 9, 2026
- bluzir/claude-code-designtheir own version, first seen Apr 20, 2026
Other versions3 projects use a version of this.
Word for word · 1
- Onevium/skills★ 1100% same
Edited · 0
None found.
Wrote their own version · 2
- bluzir/claude-code-design★ 102same name
- aiatelie/ai-atelie★ 9same name
How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.
In this repository16 other files it gives its agents.
- narrative-video-directorSkill
- portrait-shoot-directorSkill
- accessibility-auditSkill
- ai-slop-checkSkill
- component-extractSkill
- design-system-extractSkill
- discovery-questionsSkill
- frontend-aesthetic-directionSkill
- generate-variationsSkill
- hierarchy-rhythm-reviewSkill
- interaction-states-passSkill
- make-a-deckSkill
- make-a-prototypeSkill
- polish-passSkill
- wireframeSkill
- code-quality-reviewSkill
The file
Files
添加可调参数面板
在不制造多个版本文件的前提下，让用户探索少量高价值设计轴。参数面板服务于评审，不应变成简陋的 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。
Does it work?
Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.
No reviews yet
People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.
- It worked
- Partly
- It didn't
Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.
Your trail
Files you open will collect here, so you can find them again.
Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.
Now do this for your own.
Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.