nexu-io/tweaks

为任意 HTML 产物包裹一个带有实时、可参数化控件（强调色、字号比例、密度、动效、主题）的侧边面板，这些控件会实时重写 CSS 自定义属性并持久化到 localStorage。让用户无需重新提示 agent 即可探索设计的变体。当简报中包含 "variants"、"side-by-side options"、"tweak this"、 "let me adjust"、"live knobs" 或 "实时调参" 时使用。

设计多媒体开发 Agent Agent 技能调研仓库问答 HTML实时调参设计面板控件 CSS变量改写主题参数切换设计变体预览

技术栈: cursor9.1万+许可证: Apache-2.0开发者: nexu-io

Skill 介绍Skill 文件

重要提示：本站仅作 Skill 资源导航与收录，正文以 GitHub 原仓库为准，版权归原项目所有。

在 GitHub 查看 ↗

原文译文

以下为摘要预览，完整内容请查看 GitHub 原文。

Tweaks Skill · 参数化变体面板

为任意 HTML 产物包裹一个带有实时控件的侧边面板，这些控件会实时重写 CSS 自定义属性并持久化到 localStorage。灵感来自 huashu-design 的 tweak 模式。

产出内容

一个完整的自包含 HTML 文件，包含两层：

Stage（舞台区） — 原始产物（落地页 / 演示文稿 / 仪表盘），重新键控以使所有视觉决策都从 CSS 自定义属性读取：--accent、--scale、--density、--mode、--motion。
Panel（面板） — 一个固定的侧边栏（小视口下为抽屉），通过一个轻量 vanilla-JS 桥接器与这些自定义属性绑定。每次修改都会按产物标识符为键持久化到 localStorage。

用户可以：

打开产物，按其保存的偏好（或合理默认）查看舞台渲染。
在面板中调整 accent / scale / density / mode / motion，并即时看到舞台更新——无需重新渲染。
按 <kbd>T</kbd> 隐藏 / 显示面板；<kbd>R</kbd> 重置为默认值。
刷新页面——所有选择都会被保留。

适用场景

用户已生成的内容有 80% 满意，希望自己微调最后 20%。
你正在展示一个设计系统 / 品牌，希望观众能实时感受变体（而不是让你重新运行 agent）。
你正在交付一个独立演示（例如作品集作品），希望查看者可以动手把玩。

不适用场景

一次性产物且不会被迭代（例如 runbook——参数帮不上忙）。
当产物的价值在于固定比例时（例如精心平衡的数据可视化信息图——加入控件反而会劣化它）。

5 个标准控件

选择适合产物的子集。如果只有 2 个相关，就不要全部上 5 个——杂乱是一种倒退。

1. `--accent` — 强调色

一个带有 5–8 个精选色板的下拉选择（不要提供自由取色器——用户会选到糟糕的颜色然后怪你）。

const ACCENT_PRESETS = [
  { id: 'rust',    val: '#c96442', label: 'Rust' },
  { id: 'cobalt',  val: '#2c4d8e', label: 'Cobalt' },
  { id: 'sage',    val: '#4a7a3f', label: 'Sage' },
  { id: 'plum',    val: '#7a3f6a', label: 'Plum' },
  { id: 'graphite',val: '#3a3a3a', label: 'Gra…

重要提示：源文件不在本站托管，请通过 GitHub 查看与下载。

索引更新于 8/25/2026, 9:18:05 PMGitHub ↗

SKILL.md11.2 KB在 GitHub 查看 ↗

相关资源

按类型、任务、场景与标签加权推荐

yair4Data/mcp-security-analyzer

MCP · 安全审计 · 配置扫描 · 权限分析 · 开发工具

Comprehensive security testing framework for Model Context Protocol (MCP) server

itsPremkumar/mcptest

MCP · Model · Context · Protocol · 测试工具 · 调试 · 开发框架

Automated MCP Server Testing Framework

first-reader

编程协作 · 代码阅读 · 仓库概览 · 文档摘要 · agent技能 · 首读

Beta readers for any draft, run by simulating how a real reader experiences it,

13万+

Web Search Agents by Nimble

web · search · real-time · data · AI · agent · scraping · structured

网络搜索代理是针对您特定领域（例如公司信息丰富、法规研究等）的专业网络爬虫和研究代理。它们会自主学习您的使用场景，深入挖掘对您最重要的资源，从而为您的 AI 提供更深入、更相关的网络上下文

Demovanta

AI · Agent · 演示平台 · 评测 · 开发工具

。只需粘贴URL，一个真实浏览器就会打开你的网页，模拟浏览操作，并用你的母语旁白讲解屏幕上的内容

Krevios

AI代理 · 企业自动化 · 研究 · 工作流

你可以生成与编辑图像、制作视频、合成文本与排版——全程只需以可视化方式连接节点，无需编写代码

nexu-io/tweaks

Tweaks Skill · 参数化变体面板

What you produce

When to use

Tweaks Skill · 参数化变体面板

产出内容

适用场景

不适用场景