Now liveThe Skillselion MCP - thousands of ranked skills, loaded into your agent mid-task. No install.Get it →
nexu-io avatar

Tweaks

nexu-io/open-design

  • 248 installs
  • 83.7k repo stars
  • Updated August 5, 2026
  • nexu-io/open-design

tweaks is a UI design skill that applies targeted spacing, color, typography, and component polish for developers refining interfaces before release without a full redesign.

About

tweaks is a nexu-io/open-design skill for incremental UI refinement when a screen is structurally sound but spacing, color, typography, or component details feel off before release. The skill guides small layout adjustments, token-aligned color fixes, type scale corrections, and component edge polish rather than wholesale information-architecture changes. Developers reach for tweaks after feature-complete pages need a design pass that is faster than a redesign sprint. It fits design-system-backed React or web apps where margin, padding, contrast, and hierarchy tweaks unlock production readiness. The module assumes existing components and pages; it optimizes visual quality and consistency in place. Pair tweaks with broader open-design skills when the problem is polish, not new flows or brand exploration.

  • visual polish
  • spacing fixes
  • typography tweaks
  • pre-ship refinement
  • component adjustments

Tweaks by the numbers

  • 248 all-time installs (skills.sh)
  • +1 installs in the week ending Aug 4, 2026 (Skillselion tracking)
  • Ranked #875 of 1,880 Design & UI/UX skills by installs in the Skillselion catalog
  • Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/nexu-io/open-design --skill tweaks

Add your badge

Show developers this skill is listed on Skillselion. Paste this into your README.

Listed on Skillselion
Installs248
repo stars★ 83.7k
Last updatedAugust 5, 2026
Repositorynexu-io/open-design ↗

How do you polish UI spacing and typography before release?

Apply targeted visual and layout tweaks—spacing, color, typography, component polish—to refine UI before release without full redesigns.

Who is it for?

Frontend developers with feature-complete UIs who need fast spacing, color, typography, and component polish before release.

Skip if: Greenfield products needing full information architecture, new design systems, or brand identity exploration from scratch.

When should I use this skill?

An existing UI screen needs targeted spacing, color, typography, or component polish refinements before shipping.

What you get

Updated spacing, color, typography, and component polish specs applied to existing screens without redesign.

  • spacing and typography tweak spec
  • component polish checklist

Files

SKILL.mdMarkdownGitHub ↗

Tweaks Skill · 参数化变体面板

Wrap any HTML artifact with a side panel of live controls that rewrite CSS custom properties in real time and persist to localStorage. Inspired by the huashu-design tweak pattern.

What you produce

A single self-contained HTML file with two layers:

1. Stage — the original artifact (landing page / deck / dashboard) re-keyed so all visual decisions read from CSS custom properties: --accent, --scale, --density, --mode, --motion. 2. Panel — a fixed sidebar (or drawer on small viewports) with form controls bound to those custom properties via a tiny vanilla-JS bridge. Persists every change to localStorage keyed by the artifact identifier.

The user can:

  • Open the artifact and see the stage rendered with their saved

preferences (or sensible defaults).

  • Adjust accent / scale / density / mode / motion in the panel and

watch the stage update instantly — no rerender.

  • Press <kbd>T</kbd> to hide / reveal the panel; <kbd>R</kbd> to

reset to defaults.

  • Refresh the page — every choice is persisted.

When to use

  • The user generated something they like 80% of, and wants to dial

in the last 20% themselves.

  • You're presenting a design system / brand and want the audience to

feel the variants live (instead of you re-running the agent).

  • You're shipping a stand-alone demo (e.g. a portfolio piece) and

want viewers to play.

When not to use

  • One-shot artifacts that won't be iterated on (e.g. a runbook —

parameters don't help).

  • When the artifact's value is in fixed ratios (e.g. an infographic

with carefully balanced data viz — knobs would degrade it).

The 5 standard knobs

Pick a subset that suits the artifact. Don't ship all 5 if only 2
matter — clutter is a regression.

1. --accent — Accent color

A select with 5–8 curated swatches (don't ship a free color picker — the user will pick a bad color and blame you).

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: 'Graphite' },
];

The artifact uses var(--accent) everywhere it had a hard-coded accent before. Border / link / pull-quote rule / CTA all flip together.

2. --scale — Type scale (0.85 / 1.0 / 1.15)

Three settings: Compact (0.85), Normal (1.0), Generous (1.15). All font-size declarations multiply by var(--scale) via calc(... * var(--scale)).

Don't go beyond ±15% — beyond that the layout breaks (column flow, breakpoints, line counts).

3. --density — Layout density (Tight / Normal / Roomy)

Three settings that swap the spacing scale: Tight (0.75) / Normal (1.0) / Roomy (1.4). All padding / gap / margin declarations multiply by var(--density).

This is the highest-impact knob — it's also the most fragile, so every layout-critical container must declare its base spacing in custom properties before you wrap.

4. --mode — Light / Dark

A 2-state toggle. Sets data-mode="light" vs "dark" on the <html> element and the artifact's :root selector responds with two color sets.

If the artifact already has a media-query-based dark mode, replace it with the data-attr version — the user's choice should win over their OS.

5. --motion — Off / Subtle / Lively

Three settings. Maps to a CSS variable --motion-mult that scales all transition-duration / animation-duration declarations:

  • Off — 0s (also disables WebGL canvases / decorative animation).
  • Subtle — 1.0 (the artifact's authored timing).
  • Lively — 1.6 (slower transitions, more visible motion).

Respect prefers-reduced-motion: default to Off if the user has that set, regardless of stored preference.

Host integration contract (REQUIRED)

The Open Design viewer toolbar has a Tweaks toggle that drives panel visibility from outside the iframe. For the toggle to bind to your panel, your artifact must speak one of these two protocols (pick one; don't mix). The toolbar enables itself the moment it sees either signal.

Protocol A — postMessage (recommended for agent-generated artifacts)

Use this when the panel mounts via JS (React, vanilla, anything dynamic).

Artifact → host:

  • On mount, post { type: '__edit_mode_available', visible?: boolean } to

window.parent. Tells the toolbar a panel exists; the optional visible reports the panel's initial state so the toolbar toggle starts in sync. Omit visible for the common "panel is already on screen" case (the host treats a missing field as true so the legacy zero-arg message keeps working). Pass visible: false to declare a default-closed panel.

  • When the user closes the panel locally (× button, Esc, etc.), post

{ type: '__edit_mode_dismissed' }. Toolbar flips to "off".

Host → artifact:

  • { type: '__activate_edit_mode' } — open the panel (setOpen(true)).
  • { type: '__deactivate_edit_mode' } — close the panel (setOpen(false)).

Minimal listener:

window.addEventListener('message', (e) => {
  const t = e?.data?.type;
  if (t === '__activate_edit_mode') setOpen(true);
  else if (t === '__deactivate_edit_mode') setOpen(false);
});
// Or, for a default-closed panel:
//   window.parent.postMessage({ type: '__edit_mode_available', visible: open }, '*');
window.parent.postMessage({ type: '__edit_mode_available' }, '*');
// in your close handler:
const dismiss = () => {
  setOpen(false);
  window.parent.postMessage({ type: '__edit_mode_dismissed' }, '*');
};

Panel may default to open or closed — the host syncs its toggle to whichever state the artifact reports.

Protocol B — class-based (used by assets/wrap.html)

Use this only when you wrap the template verbatim. The artifact ships a .tw-panel element and toggles a .tw-hidden class for visibility. The viewer's iframe bridge (in apps/web/src/runtime/srcdoc.ts) hides the panel on initial paint, watches the class via MutationObserver, and relays state both directions. No JS required in the artifact beyond what the template already includes.

Selectors are fixed: .tw-panel (the panel root) and .tw-hidden (the hidden state). If you rename either, the bridge can't find it.

Anti-pattern

Don't invent a third protocol or rename either set of identifiers. The toolbar toggle only binds to A or B. Custom panels with custom classes and no postMessage will leave the toolbar greyed out.

Implementation primitives

Read assets/wrap.html — it ships the panel + bridge as an inert template. Your job is to:

1. Take the user's existing artifact HTML. 2. Lift its accent / mode / spacing / scale into custom properties (search for hard-coded #hex / Npx / Nrem and convert). 3. Paste the contents into the marked region of wrap.html. 4. Edit assets/wrap.html's KNOBS array to keep only the knobs you decided are relevant to this artifact. Don't ship 5 if 2 matter. 5. Patch the STORAGE_KEY to a unique slug (tweaks-<artifact-slug>).

The bridge in wrap.html:

  • Loads localStorage[STORAGE_KEY] JSON on first paint.
  • Applies values as document.documentElement.style.setProperty('--accent', ...).
  • Listens to every form control's change event and writes back.
  • Exposes <kbd>T</kbd> (toggle panel) and <kbd>R</kbd> (reset).

Workflow

Step 1 — Acquire the artifact

Same options as the critique skill:

1. Project file (index.html in the project folder). 2. Pasted HTML in the chat. 3. Generated by you in this turn.

Step 2 — Decide which knobs apply

Read the artifact's CSS first. For each knob, decide yes / no:

  • --accent — yes if the artifact has 1 accent color used ≥ 3 times.
  • --scale — yes if the artifact is type-driven (article, deck,

pricing page).

  • --density — yes if the artifact has consistent gap / padding

rhythm (deck, dashboard, landing). No for runbooks (already dense).

  • --mode — yes if the artifact has authored dark mode tokens, or

you're willing to derive them.

  • --motion — yes if the artifact has any transition / animation

worth scaling. No for static reports / critique reports.

Default: 3 knobs is the sweet spot. Five is too busy, one is not worth a panel.

Step 3 — Lift hard-coded values into custom properties

Open assets/wrap.html's <style> block — copy its custom-property naming scheme (--accent, --scale, etc.). In the user's artifact, find every place those concerns live and rewrite:

  • color: #c96442 → color: var(--accent)
  • font-size: 18px → font-size: calc(18px * var(--scale))
  • padding: 24px 32px → padding: calc(24px * var(--density)) calc(32px * var(--density))
  • transition: opacity 200ms → transition: opacity calc(200ms * var(--motion-mult))

If the artifact uses clamp() or vw already, multiply the outer value by the custom property — don't tear apart clamp(...).

Step 4 — Paste into the wrap

Copy the artifact's <style> and <body> into the marked regions of wrap.html. Keep the panel + bridge intact.

Step 5 — Test the loop

Open the result, click each knob at least once, refresh the page, confirm the choice persists. If a knob breaks the layout — remove it, don't ship it.

Output contract

<artifact identifier="tweaks-<artifact-slug>" type="text/html" title="<Artifact Title> · Tweaks">
<!doctype html>
<html>...</html>
</artifact>

One sentence before the artifact ("Wrapped X with a 3-knob tweak panel — accent / scale / mode."). Stop after </artifact>.

Hard rules

  • Don't ship a free color picker — only curated swatches. Users

pick bad colors when given freedom; saving them from that is the whole point.

  • Persist by artifact identifier — tweaks-<slug>, not a global

key. Two artifacts open in two tabs must not share state.

  • Respect `prefers-reduced-motion` — default to Off for motion

if the user has that set, override only on explicit click.

  • Single-file — no external CSS / JS / fonts beyond the artifact's

existing imports. Inline the panel + bridge.

  • Panel hidden by default on viewports < 720px — slide-in drawer

via a "T" button at top-right.

  • Don't ship more than 5 knobs. Three is the sweet spot.

Related skills

anthropicsFrontend DesignGenerate distinctive, production-grade frontend interfaces and components that avoid generic AI aesthetics.716k165kvercel-labsWeb Design GuidelinesAutomatically audit frontend code against the latest Vercel Web Interface Guidelines for consistency, accessibility, and UX quality.498k29.6klarksuiteLark WhiteboardGenerate valid Lark Whiteboard (Feishu Board) documents with correctly placed connectors, automatic routing, and proper schema compliance directly from agent inst389k16ksleekdotdesignSleek Design Mobile AppsGenerate mobile app screens and UI from plain English descriptions using the Sleek.design API.315k476leonxlnxDesign Taste FrontendOverride generic LLM frontend output with intentional, metric-driven UI/UX taste.301k69.4knextlevelbuilderUi Ux Pro MaxGet instant, high-quality UI/UX decisions, component recommendations, style guidance, and code improvements across web and mobile projects.290k112k

FAQ

What does the tweaks skill change?

tweaks applies targeted spacing, color, typography, and component polish on existing UI screens. The skill refines visual details in place rather than replacing information architecture or running a full redesign project.

When should developers use tweaks versus a redesign?

tweaks fits feature-complete interfaces that need margin, contrast, type scale, or component edge fixes before release. Full redesigns with new flows or brand exploration sit outside tweaks scope.

Design & UI/UXuiux
Browse by category
AI & AgentsFrontend & DesignBackend & DataDev ToolsAutomationTesting & ReviewSecurityMonitoring & CloudDocs & Planning
Design & frontend
Design systemsAnimation & motionAccessibility (a11y)CSS & TailwindUI designUXDesign to codeshadcn/uiLanding pagesBest design skills
Most searched skills
find-skillscavemanfrontend-designbrainstormingsystematic-debuggingstop-slopemil-design-engui-ux-pro-maxkarpathy-guidelinesweb-design-guidelinesreact-best-practicesgrill-meimprovemicrosoft-foundryagent-browser
Browse all listings
All agent skillsAll MCP serversAll marketplacesAll plugins

This week in AI coding

Five minutes, every Monday - the tools, releases and tactics for developers.

unsubscribe anytime.