Claude Design 的 make-tweakable 技能让设计内建一套克制、高影响力的 Tweaks 可调面板【免费下载链接】system_prompts_leaksExtracted system prompts from Anthropic - Claude Fable 5.1, Opus 5, Claude Design, Claude Code. OpenAI - ChatGPT GPT-6-Astra, Codex. Google - Gemini 3.8 Flash, 3.1 Pro, Antigravity. xAI - Grok, Grok Bot, Cursor, Kimi and more! Updated regularly.项目地址: https://gitcode.com/GitHub_Trending/sy/system_prompts_leaks导读make-tweakable是 Claude DesignAnthropic/claude-design 环境内置的 19 个技能之一用于保证 Agent 产出的每一个 HTML 设计稿都「支持 Tweaks」——即用户不需要懂代码就能在宿主提供的侧边调节面板里实时切换配色、布局变体与功能开关。本文以仓库中 make-tweakable/SKILL.md 的技能定义为骨架结合 claude-design.md 系统提示词与 tweaks-panel.jsx 真实实现源码讲清哪些值该被做成可调、怎么调、面板做到多小三个问题读完即可在自己的 Design Component 或独立页面中落地一套专业的可调控制。一、技能本体三段话定义了全部纪律make-tweakable属于 Claude Design 内置技能里的Enhance增强类目位于 skills/README.md 表格中是 11 个 Create 技能之后的增强型入口user-invocable: true即用户在斜杠菜单中可以主动调用。其 SKILL.md 全文保留了如下提示词原文Make sure your design supports Tweaks. If the user tells you what to make tweakable, do that. If not, pick a few high-impact values — key colors, a layout variant, a feature flag, headline copy. Keep the Tweaks panel small and tasteful; hide it completely when Tweaks is off.虽然只有两句话但浓缩出四条硬性纪律全篇将在下文逐一展开默认必须支持 Tweaks这是交付标准不是可选项用户指定什么就调什么否则自行挑选高影响值并给出四类推荐——关键色、布局变体、功能开关、主标题文案面板要小且克制small and tastefulTweaks 关闭时彻底隐藏面板。需要先明确本仓库中大部分 SKILL.md 是动词即内容的精简指令卡frontmatter 只含name/description/user-invocable见 skills/README.md它真正的规格展开在宿主系统提示词与 starter 组件里。下面就以仓库证据逐条还原这条指令背后的完整机制。二、理解 Tweaks 的前提它是什么、什么时候不该用2.1 Tweaks 的本质宿主渲染出的可调控制在 claude-design.md 中可编辑条目editable entries也会以宿主的Tweaks面板形式呈现到独立页面第 58 行附近。也就是说Claude Design 的设计稿有两种调节途径就地直接编辑任何文本copy与任何单一颜色用户可以在编辑器里直接点选改写无需经过 AgentTweaks 面板针对就地编辑做不到的事——功能行为、备选 UI 形态alternative UI treatments、一个能一次性影响多个元素上文案/配色的开关以及其他只能靠代码改的变化。2.2 分工原则别把能就地编辑的东西重复做成 tweak这是 make-tweakable 纪律中最容易被忽略的一条。系统提示词原文claude-design.mdUsers can already edit any copy text and any single color directly in the editor, so dont add tweaks for those — reserve tweaks for things in-place editing cant do: functional behavior, alternative UI treatments, one flag that changes copy/color across many elements at once, and other code-only changes. Add 2-3 of those by default even when the DC isnt meant for embedding.关键结论面板只承载四种东西功能行为、备选 UI 形态、全局联动开关、纯代码类变更即使设计稿不需要被嵌入默认也应该追加 23 个这种 tweak——它们既是增强用户控制的手段也是让设计显得可继续打磨的信号。2.3 两种工作模式下的 Tweaks 形态Claude Design 系统提示词区分两种场景claude-design.md独立页面Tweaks 由宿主基于 DC 的可编辑条目自动生成上文第 58 行路径嵌入模式embedding明确写道In this mode, tweaks means props on the root Design Component第 138 行。当用户要求把某个东西做成可调时正确的做法是把它们声明为根组件的 props宿主会为每个带非空editor的 prop 自动渲染一个 Tweaks 覆盖层——严禁手写一个自制的控制面板Dont hand-roll a controls panel for these。三、落地方式一通过d_props_json声明可调 props3.1 props 元数据 schema当一个 Design Component 打算被别人嵌入、或需要暴露可调项时需要在script>{ editor: text | color | int | float | range | boolean | enum | null, default: …, tsType: …, options: 仅 enum / color 需要, min: 0, max: 100, step: 1, unit: px }各字段要点据系统提示词原文整理字段说明editor决定宿主生成哪种控件。color传 34 个 hex 字符串或 25 色 palette 数组时会渲染成精选 swatch数值类配合min/max/step/unitenum用options给选项default只负责播种编辑器初始值不是运行时回退值——运行时应写this.props.x ?? …兜底tsType声明值的类型section把相关 props 归组到同一个标题下3.2 修改已有 DC 用dc_set_props对一个已经存在的 DC 增删可调 props应调用dc_set_props工具整体替换data-propsJSON工具定义见 claude-design.md 中 dc_set_props 一节。注意它的输入是完整替换表示清空所以修改时要把$preview与所有既有 prop 一起带上。3.3 两个容易踩的坑default不落入运行时逻辑类里必须this.props.x ?? default否则未设 props 时会渲染出undefined不要发明组件没有读取的 props——每个声明都必须对应一处真实的读取。四、落地方式二独立页面上的 Tweaks 面板starter 组件对非嵌入型、无 DC 逻辑类的独立页面仓库提供了开箱即用的可复用面板tweaks_panel.jsx。在系统提示词的 copy_starter_component 工具说明中它被定位为已经接好宿主协议的 Tweaks 面板外壳并给出加载顺序Load withscript typetext/babel srctweaks-panel.jsx/scriptafter React, before your app script.4.1 源码里导出了什么按 tweaks-panel.jsx 文件顶部注释与底部Object.assign(window, …)导出的完整集合是状态与协议useTweaks/TweaksPanel布局辅助TweakSection分组标题、TweakRow标签行控件TweakSlider/TweakToggle/TweakRadio/TweakSelect/TweakText/TweakNumber/TweakColor/TweakButton4.2 最小可用示例源码 usage 块原样tweaks-panel.jsx 第 1649 行给出了完整可复制的骨架以下为节选const TWEAK_DEFAULTS /*EDITMODE-BEGIN*/{ primaryColor: #D97757, palette: [#D97757, #29261b, #f6f4ef], fontSize: 16, density: regular, dark: false }/*EDITMODE-END*/; function App() { const [t, setTweak] useTweaks(TWEAK_DEFAULTS); return ( div style{{ fontSize: t.fontSize, color: t.primaryColor }} Hello TweaksPanel TweakSection labelTypography / TweakSlider labelFont size value{t.fontSize} min{10} max{32} unitpx onChange{(v) setTweak(fontSize, v)} / TweakToggle labelDark mode value{t.dark} onChange{(v) setTweak(dark, v)} / /TweaksPanel /div ); }几个值得注意的工程细节都有源码注释背书持久化协议useTweaks内部的setTweak会向宿主postMessage一条__edit_mode_set_keys宿主据此把/*EDITMODE-BEGIN*/…/*EDITMODE-END*/块直接回写进源文件所以用户拨动的值能跨刷新保留同时派发同窗口的tweakchange自定义事件供页面内监听。打开/关闭协议TweaksPanel监听__activate_edit_mode/__deactivate_edit_mode先注册监听再广播__edit_mode_available注释明确说明顺序错了宿主开关会静默失效关闭按钮回发__edit_mode_dismissed让宿主工具栏按钮同步归位。TWEAK_DEFAULTS字面量必须用普通内联script/*EDITMODE-BEGIN*/约定声明才能被编辑器定位并写回。控件选择有讲究TweakRadio是 23 个短选项的分段控件单个标签超过约 16/10 字符会自动回退成下拉颜色永远给 34 个精选 swatch 或整组 25 色 palette绝不用自由取色器见文件头部注释现有控件是地板而非天花板不够时可以在面板内部自建自定义控件。4.3 隐藏当 Tweaks 关闭在源码里如何成立make-tweakable 要求hide it completely when Tweaks is off。在组件实现中TweaksPanel内部open状态初始为false只有收到宿主的__activate_edit_mode才置真而if (!open) return null;tweaks-panel.jsx 第 267 行保证未激活时不渲染任何 DOM——面板在关闭态是彻底消失而非收成一个按钮。这个关闭即不挂载的行为就是技能指令的代码级答案。五、如何挑选高影响值key colors / layout variant / feature flag / headline copy当用户没有明确指出要调什么时技能要求 Agent 从高影响力、低数量的原则出发选值。下面结合仓库中两个真实技能用法解释每一类为什么值得调5.1 把字号体系暴露成 Slider连 CSS 变量make-a-deck/SKILL.md 要求讲演稿的字号/间距全部收敛为 CSS 自定义属性--type-title、--gap-*等并指出这些值作为 CSS 而非 JS 常量用户既可以自己在style里改一个数字也可以通过绑定同一变量的 Tweaks 滑块来调。这正是布局变体/间距密度类高影响值的最佳载体改一处全 deck 生效。5.2 Feature flag 型motionEditor 开关animated-video/SKILL.md 的实践极具代表性每个动效工程都带 tweaks 面板且TWEAK_DEFAULTS中必须包含motionEditor: true并配一个TweakToggle labelMotion editorThat key is the host timeline editors visibility gate: the user flips it in the Tweaks panel to hide or show the editor bar, and the animation, its timing data, and export are untouched either way.这就是技能里 a feature flag 的教科书用法——一个布尔开关控制宿主编辑器条的显隐动画本体、时间轴数据、导出全部不受影响。5.3 颜色与 palette 型联动整页主题回到 tweaks-panel.jsx 的 usageprimaryColor用精选色板palette用整组 25 色方案选项——一次切换带动全局所有引用点变色正好命中one flag that changes copy/color across many elements at once。5.4 主标题文案headline copy注意一个边界技能里 headline copy 属于建议的高影响值但系统提示词同时规定copy text 已可就地直接编辑不要为它加 tweak。合理解读是——单选文案不要做成 tweak但在多版 headline 之间切换A/B variant 式开关属于跨多处/备选形态范畴可以做。仓库中 options/SKILL.md 与 hi-fi-design/SKILL.md 展示了类似的取舍逻辑需要用户在多版之间反馈挑选时应走多文件候选路线而不是把每个小变体都塞进 tweak。六、小而克制的实操清单综合技能指令与 tweaks-panel.jsx 源码注释可归纳出以下可直接执行的面板设计规范数量少默认 23 个每加一个都自问用户能不能就地改/值不值得为一个值多占一行面板不重复就地编辑能力单色、单段文案不进面板颜色走精选而非自由取色34 个 hex 或 25 色 paletteTweakColor无 options 时才回退原生色板见其组件实现控件类型匹配语义23 短选项用TweakRadio多或长的用TweakSelect布尔用TweakToggle数值/范围用TweakSlider/TweakNumber数值支持按住标签横向拖动 scrub用TweakSection分组并控制总行数保持小而克制的视觉密度关闭即消失依赖宿主的 activate/deactivate 协议不要自己做常驻入口自定义控件放面板内Tweak* 家族没覆盖时在面板 children 里自建而不是绕开面板另起炉灶面板是控制面不是内容面见 make-a-deck/SKILL.md 的例外说明——deck 的幻灯片本体必须保持静态 HTML 可点选直接改写Tweaks 面板作为standalone exception与其并存不会破坏就地编辑链路。七、配套工具链与最佳实践闭环要让一个设计真正make tweakable仓库证据指向这样一条完整链路建 DC 时即预留模板之外用d_props_json给 props 写editor/default/tsType元数据独立页面则引入 tweaks_panel.jsx 并提供TWEAK_DEFAULTS改既有 DC优先dc_set_props整体替换 props 元数据而不是重写文件宿主自动接管渲染凡editor非 null 的 prop宿主渲染 Tweaks 覆盖层——不再手写控制面板运行时兜底逻辑类renderVals()内统一this.props.x ?? default面板关闭态零残留依赖协议让TweaksPanel直接return null。这套做法与 skills/README.md 记录的技能分工一致make-tweakable 归类于Enhance是在 Create 类技能deck、prototype、wireframe…产出初稿之后被调用的打磨阶段能力。可以说仓库中 make-a-deck、animated-video、deck-stage.js其源码 335 行起注释亦可见由 TweaksPanel 开关驱动的用户显隐逻辑等实现正是 make-tweakable 指令在不同载体上的三次具体作答。结语make-tweakable虽是 Claude Design 技能库中最短的一条指令之一但它锁定的却是设计交付链上一个高频痛点如何把再帮我试试别的配色 / 别的密度 / 开个暗色这类迭代请求从每次都走聊天往返变成用户手边一个即拉即用的面板。按本文整理的四类高影响值key colors、layout variant、feature flag、headline copy去选点用d_props_json或 tweaks_panel.jsx 声明机制去落地并始终守住小而克制、关闭即隐藏、不与就地编辑打架三条边界即可在 Claude Design 生态内交付自带可调能力的专业设计稿。【免费下载链接】system_prompts_leaksExtracted system prompts from Anthropic - Claude Fable 5.1, Opus 5, Claude Design, Claude Code. OpenAI - ChatGPT GPT-6-Astra, Codex. Google - Gemini 3.8 Flash, 3.1 Pro, Antigravity. xAI - Grok, Grok Bot, Cursor, Kimi and more! Updated regularly.项目地址: https://gitcode.com/GitHub_Trending/sy/system_prompts_leaks创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
Claude Design 的 make-tweakable 技能让设计内建一套克制、高影响力的 Tweaks 可调面板【免费下载链接】system_prompts_leaksExtracted system prompts from Anthropic - Claude Fable 5.1, Opus 5, Claude Design, Claude Code. OpenAI - ChatGPT GPT-6-Astra, Codex. Google - Gemini 3.8 Flash, 3.1 Pro, Antigravity. xAI - Grok, Grok Bot, Cursor, Kimi and more! Updated regularly.项目地址: https://gitcode.com/GitHub_Trending/sy/system_prompts_leaks导读make-tweakable是 Claude DesignAnthropic/claude-design 环境内置的 19 个技能之一用于保证 Agent 产出的每一个 HTML 设计稿都「支持 Tweaks」——即用户不需要懂代码就能在宿主提供的侧边调节面板里实时切换配色、布局变体与功能开关。本文以仓库中 make-tweakable/SKILL.md 的技能定义为骨架结合 claude-design.md 系统提示词与 tweaks-panel.jsx 真实实现源码讲清哪些值该被做成可调、怎么调、面板做到多小三个问题读完即可在自己的 Design Component 或独立页面中落地一套专业的可调控制。一、技能本体三段话定义了全部纪律make-tweakable属于 Claude Design 内置技能里的Enhance增强类目位于 skills/README.md 表格中是 11 个 Create 技能之后的增强型入口user-invocable: true即用户在斜杠菜单中可以主动调用。其 SKILL.md 全文保留了如下提示词原文Make sure your design supports Tweaks. If the user tells you what to make tweakable, do that. If not, pick a few high-impact values — key colors, a layout variant, a feature flag, headline copy. Keep the Tweaks panel small and tasteful; hide it completely when Tweaks is off.虽然只有两句话但浓缩出四条硬性纪律全篇将在下文逐一展开默认必须支持 Tweaks这是交付标准不是可选项用户指定什么就调什么否则自行挑选高影响值并给出四类推荐——关键色、布局变体、功能开关、主标题文案面板要小且克制small and tastefulTweaks 关闭时彻底隐藏面板。需要先明确本仓库中大部分 SKILL.md 是动词即内容的精简指令卡frontmatter 只含name/description/user-invocable见 skills/README.md它真正的规格展开在宿主系统提示词与 starter 组件里。下面就以仓库证据逐条还原这条指令背后的完整机制。二、理解 Tweaks 的前提它是什么、什么时候不该用2.1 Tweaks 的本质宿主渲染出的可调控制在 claude-design.md 中可编辑条目editable entries也会以宿主的Tweaks面板形式呈现到独立页面第 58 行附近。也就是说Claude Design 的设计稿有两种调节途径就地直接编辑任何文本copy与任何单一颜色用户可以在编辑器里直接点选改写无需经过 AgentTweaks 面板针对就地编辑做不到的事——功能行为、备选 UI 形态alternative UI treatments、一个能一次性影响多个元素上文案/配色的开关以及其他只能靠代码改的变化。2.2 分工原则别把能就地编辑的东西重复做成 tweak这是 make-tweakable 纪律中最容易被忽略的一条。系统提示词原文claude-design.mdUsers can already edit any copy text and any single color directly in the editor, so dont add tweaks for those — reserve tweaks for things in-place editing cant do: functional behavior, alternative UI treatments, one flag that changes copy/color across many elements at once, and other code-only changes. Add 2-3 of those by default even when the DC isnt meant for embedding.关键结论面板只承载四种东西功能行为、备选 UI 形态、全局联动开关、纯代码类变更即使设计稿不需要被嵌入默认也应该追加 23 个这种 tweak——它们既是增强用户控制的手段也是让设计显得可继续打磨的信号。2.3 两种工作模式下的 Tweaks 形态Claude Design 系统提示词区分两种场景claude-design.md独立页面Tweaks 由宿主基于 DC 的可编辑条目自动生成上文第 58 行路径嵌入模式embedding明确写道In this mode, tweaks means props on the root Design Component第 138 行。当用户要求把某个东西做成可调时正确的做法是把它们声明为根组件的 props宿主会为每个带非空editor的 prop 自动渲染一个 Tweaks 覆盖层——严禁手写一个自制的控制面板Dont hand-roll a controls panel for these。三、落地方式一通过d_props_json声明可调 props3.1 props 元数据 schema当一个 Design Component 打算被别人嵌入、或需要暴露可调项时需要在script>{ editor: text | color | int | float | range | boolean | enum | null, default: …, tsType: …, options: 仅 enum / color 需要, min: 0, max: 100, step: 1, unit: px }各字段要点据系统提示词原文整理字段说明editor决定宿主生成哪种控件。color传 34 个 hex 字符串或 25 色 palette 数组时会渲染成精选 swatch数值类配合min/max/step/unitenum用options给选项default只负责播种编辑器初始值不是运行时回退值——运行时应写this.props.x ?? …兜底tsType声明值的类型section把相关 props 归组到同一个标题下3.2 修改已有 DC 用dc_set_props对一个已经存在的 DC 增删可调 props应调用dc_set_props工具整体替换data-propsJSON工具定义见 claude-design.md 中 dc_set_props 一节。注意它的输入是完整替换表示清空所以修改时要把$preview与所有既有 prop 一起带上。3.3 两个容易踩的坑default不落入运行时逻辑类里必须this.props.x ?? default否则未设 props 时会渲染出undefined不要发明组件没有读取的 props——每个声明都必须对应一处真实的读取。四、落地方式二独立页面上的 Tweaks 面板starter 组件对非嵌入型、无 DC 逻辑类的独立页面仓库提供了开箱即用的可复用面板tweaks_panel.jsx。在系统提示词的 copy_starter_component 工具说明中它被定位为已经接好宿主协议的 Tweaks 面板外壳并给出加载顺序Load withscript typetext/babel srctweaks-panel.jsx/scriptafter React, before your app script.4.1 源码里导出了什么按 tweaks-panel.jsx 文件顶部注释与底部Object.assign(window, …)导出的完整集合是状态与协议useTweaks/TweaksPanel布局辅助TweakSection分组标题、TweakRow标签行控件TweakSlider/TweakToggle/TweakRadio/TweakSelect/TweakText/TweakNumber/TweakColor/TweakButton4.2 最小可用示例源码 usage 块原样tweaks-panel.jsx 第 1649 行给出了完整可复制的骨架以下为节选const TWEAK_DEFAULTS /*EDITMODE-BEGIN*/{ primaryColor: #D97757, palette: [#D97757, #29261b, #f6f4ef], fontSize: 16, density: regular, dark: false }/*EDITMODE-END*/; function App() { const [t, setTweak] useTweaks(TWEAK_DEFAULTS); return ( div style{{ fontSize: t.fontSize, color: t.primaryColor }} Hello TweaksPanel TweakSection labelTypography / TweakSlider labelFont size value{t.fontSize} min{10} max{32} unitpx onChange{(v) setTweak(fontSize, v)} / TweakToggle labelDark mode value{t.dark} onChange{(v) setTweak(dark, v)} / /TweaksPanel /div ); }几个值得注意的工程细节都有源码注释背书持久化协议useTweaks内部的setTweak会向宿主postMessage一条__edit_mode_set_keys宿主据此把/*EDITMODE-BEGIN*/…/*EDITMODE-END*/块直接回写进源文件所以用户拨动的值能跨刷新保留同时派发同窗口的tweakchange自定义事件供页面内监听。打开/关闭协议TweaksPanel监听__activate_edit_mode/__deactivate_edit_mode先注册监听再广播__edit_mode_available注释明确说明顺序错了宿主开关会静默失效关闭按钮回发__edit_mode_dismissed让宿主工具栏按钮同步归位。TWEAK_DEFAULTS字面量必须用普通内联script/*EDITMODE-BEGIN*/约定声明才能被编辑器定位并写回。控件选择有讲究TweakRadio是 23 个短选项的分段控件单个标签超过约 16/10 字符会自动回退成下拉颜色永远给 34 个精选 swatch 或整组 25 色 palette绝不用自由取色器见文件头部注释现有控件是地板而非天花板不够时可以在面板内部自建自定义控件。4.3 隐藏当 Tweaks 关闭在源码里如何成立make-tweakable 要求hide it completely when Tweaks is off。在组件实现中TweaksPanel内部open状态初始为false只有收到宿主的__activate_edit_mode才置真而if (!open) return null;tweaks-panel.jsx 第 267 行保证未激活时不渲染任何 DOM——面板在关闭态是彻底消失而非收成一个按钮。这个关闭即不挂载的行为就是技能指令的代码级答案。五、如何挑选高影响值key colors / layout variant / feature flag / headline copy当用户没有明确指出要调什么时技能要求 Agent 从高影响力、低数量的原则出发选值。下面结合仓库中两个真实技能用法解释每一类为什么值得调5.1 把字号体系暴露成 Slider连 CSS 变量make-a-deck/SKILL.md 要求讲演稿的字号/间距全部收敛为 CSS 自定义属性--type-title、--gap-*等并指出这些值作为 CSS 而非 JS 常量用户既可以自己在style里改一个数字也可以通过绑定同一变量的 Tweaks 滑块来调。这正是布局变体/间距密度类高影响值的最佳载体改一处全 deck 生效。5.2 Feature flag 型motionEditor 开关animated-video/SKILL.md 的实践极具代表性每个动效工程都带 tweaks 面板且TWEAK_DEFAULTS中必须包含motionEditor: true并配一个TweakToggle labelMotion editorThat key is the host timeline editors visibility gate: the user flips it in the Tweaks panel to hide or show the editor bar, and the animation, its timing data, and export are untouched either way.这就是技能里 a feature flag 的教科书用法——一个布尔开关控制宿主编辑器条的显隐动画本体、时间轴数据、导出全部不受影响。5.3 颜色与 palette 型联动整页主题回到 tweaks-panel.jsx 的 usageprimaryColor用精选色板palette用整组 25 色方案选项——一次切换带动全局所有引用点变色正好命中one flag that changes copy/color across many elements at once。5.4 主标题文案headline copy注意一个边界技能里 headline copy 属于建议的高影响值但系统提示词同时规定copy text 已可就地直接编辑不要为它加 tweak。合理解读是——单选文案不要做成 tweak但在多版 headline 之间切换A/B variant 式开关属于跨多处/备选形态范畴可以做。仓库中 options/SKILL.md 与 hi-fi-design/SKILL.md 展示了类似的取舍逻辑需要用户在多版之间反馈挑选时应走多文件候选路线而不是把每个小变体都塞进 tweak。六、小而克制的实操清单综合技能指令与 tweaks-panel.jsx 源码注释可归纳出以下可直接执行的面板设计规范数量少默认 23 个每加一个都自问用户能不能就地改/值不值得为一个值多占一行面板不重复就地编辑能力单色、单段文案不进面板颜色走精选而非自由取色34 个 hex 或 25 色 paletteTweakColor无 options 时才回退原生色板见其组件实现控件类型匹配语义23 短选项用TweakRadio多或长的用TweakSelect布尔用TweakToggle数值/范围用TweakSlider/TweakNumber数值支持按住标签横向拖动 scrub用TweakSection分组并控制总行数保持小而克制的视觉密度关闭即消失依赖宿主的 activate/deactivate 协议不要自己做常驻入口自定义控件放面板内Tweak* 家族没覆盖时在面板 children 里自建而不是绕开面板另起炉灶面板是控制面不是内容面见 make-a-deck/SKILL.md 的例外说明——deck 的幻灯片本体必须保持静态 HTML 可点选直接改写Tweaks 面板作为standalone exception与其并存不会破坏就地编辑链路。七、配套工具链与最佳实践闭环要让一个设计真正make tweakable仓库证据指向这样一条完整链路建 DC 时即预留模板之外用d_props_json给 props 写editor/default/tsType元数据独立页面则引入 tweaks_panel.jsx 并提供TWEAK_DEFAULTS改既有 DC优先dc_set_props整体替换 props 元数据而不是重写文件宿主自动接管渲染凡editor非 null 的 prop宿主渲染 Tweaks 覆盖层——不再手写控制面板运行时兜底逻辑类renderVals()内统一this.props.x ?? default面板关闭态零残留依赖协议让TweaksPanel直接return null。这套做法与 skills/README.md 记录的技能分工一致make-tweakable 归类于Enhance是在 Create 类技能deck、prototype、wireframe…产出初稿之后被调用的打磨阶段能力。可以说仓库中 make-a-deck、animated-video、deck-stage.js其源码 335 行起注释亦可见由 TweaksPanel 开关驱动的用户显隐逻辑等实现正是 make-tweakable 指令在不同载体上的三次具体作答。结语make-tweakable虽是 Claude Design 技能库中最短的一条指令之一但它锁定的却是设计交付链上一个高频痛点如何把再帮我试试别的配色 / 别的密度 / 开个暗色这类迭代请求从每次都走聊天往返变成用户手边一个即拉即用的面板。按本文整理的四类高影响值key colors、layout variant、feature flag、headline copy去选点用d_props_json或 tweaks_panel.jsx 声明机制去落地并始终守住小而克制、关闭即隐藏、不与就地编辑打架三条边界即可在 Claude Design 生态内交付自带可调能力的专业设计稿。【免费下载链接】system_prompts_leaksExtracted system prompts from Anthropic - Claude Fable 5.1, Opus 5, Claude Design, Claude Code. OpenAI - ChatGPT GPT-6-Astra, Codex. Google - Gemini 3.8 Flash, 3.1 Pro, Antigravity. xAI - Grok, Grok Bot, Cursor, Kimi and more! Updated regularly.项目地址: https://gitcode.com/GitHub_Trending/sy/system_prompts_leaks创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
