skills.rest
Loringtonian
LoringtonianCOMMUNITY
Explore all skills by this author →
𝕏@loringtonGitHub

html-tweaker

Restyle LLM-generated HTML artifacts via interactive CSS custom property controls.

12|2|Updated Jun 8, 2026
Search Tags:#html#design system#css#styling#presets#tweakpane#browser tool
One-click install
npx skills add https://github.com/Loringtonian/second-brain-template --skill html-tweaker
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: html-tweaker
Source: https://github.com/Loringtonian/second-brain-template/tree/main/.claude/skills/html-tweaker
Command: npx skills add https://github.com/Loringtonian/second-brain-template --skill html-tweaker

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It removes the friction of repeatedly editing and re-running HTML just to tune visual style, letting you shape the look of generated pages interactively instead of by trial-and-error prompts.

Core Features & Use Cases

  • Live styling controls: Adjust CSS custom properties through sliders, toggles, and color pickers in a browser-based playground.
  • Preset exploration: Switch between ready-made aesthetics like Cockpit, Manuscript, and Ares to compare visual directions quickly.
  • Artifact export: Save either the restyled HTML or a reusable Claude Code skill bundle so future generations match the same taste.
  • Use case: A designer or agent-generated page can be dropped into the tool, tuned to the desired visual language, and exported without manual source hacking.

Quick Start

Open the HTML Tweaker in your browser and drag in an HTML file to start restyling it with the available controls and presets.

Frequently Asked Questions about html-tweaker

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I restyle LLM-generated HTML without manually editing the source code?▼

To restyle LLM-generated HTML without manual editing, use a browser-based playground with interactive visual controls. You adjust CSS custom properties through sliders, toggles, and color pickers, allowing you to shape the look of generated pages interactively instead of by trial-and-error prompts.

Can I compare different design system presets for generated HTML pages?▼

Yes, you can compare design system presets for generated HTML pages using built-in aesthetic options like Cockpit, Manuscript, and Ares. Switching between these ready-made presets lets you quickly compare visual directions and refine design-system preferences before finalizing the page styling.

How do I export reusable styling bundles after adjusting CSS custom properties?▼

To export reusable styling bundles after adjusting CSS custom properties, save your restyled HTML or export a Claude Code skill bundle. This exports reusable token assets so future LLM-generated pages match the exact visual taste and design system you configured.

Do I need a local HTTP server to use visual controls for CSS styling?▼

Yes, you need a local HTTP server to use visual controls for CSS styling. The restyling workflow requires browser-based file loading, meaning you must serve the HTML locally to enable Tweakpane controls and interactive CSS custom property adjustments.

What is the best way to adjust design system preferences for browser-based HTML artifacts?▼

The best way to adjust design system preferences for browser-based HTML artifacts is dropping the file into a visual playground. You interactively tune CSS custom properties using Tweakpane controls, avoiding repeated source code hacking and prompt iterations.

Why does my HTML file need to be loaded locally for visual tuning?▼

Your HTML file needs to be loaded locally for visual tuning because the tool relies on a local browser workflow. Local HTTP server hosting enables browser-based file loading, which is required to interactively adjust CSS custom properties and export restyled HTML.

Related Skills

Explore More Design & Creative Skills→
bruno0henriquebruno0henrique

image-creator

Render self-contained HTML and CSS into PNG images using Playwright.

Community
Advanced
shaprisshapris

theme-factory

Apply font and color themes to slide decks, documents, and HTML artifacts.

Community
Intermediate
paxlabs-incpaxlabs-inc
7

popular-web-designs

Generates HTML and CSS prototypes from54 design system token templates for brands like Stripe, Linear, and Vercel.

Community
Intermediate
Clos01Clos01
3

tweaks

Add interactive CSS custom property controls to HTML prototypes.

Community
Advanced