wigtn

Wigss — AI skill for Claude Code

AI community

Visual AI code refactoring tool — select, redesign, and apply Tailwind CSS changes with an always-on AI agent.

How to install Wigss

This entry records only its repository, not the path inside it, so there is no exact command to give. Open wigtn/wigss and copy the folder into ~/.claude/skills/, or the file into ~/.claude/agents/.

What Wigss does

Visual AI code refactoring tool — select, redesign, and apply Tailwind CSS changes with an always-on AI agent. npx wigss

Alternatives in AI

Artifacts Builder — Suite of tools for creating elaborate, multi-component claude.ai HTML artifacts using modern frontend web tech 97.5k ★
Agent Rules Books — AGENTS.md rules / skills for AI coding agents: Codex, Cursor & Claude Code 2.6k ★
Paul — Plan-Apply-Unify Loop — Structured AI-assisted development for Claude Code 1.2k ★

README

WIGSS

Drag your UI components — the source code rewrites itself.

[![npm version](https://img.shields.io/npm/v/wigss?style=flat-square)](https://npmjs.com/package/wigss) [![npm downloads](https://img.shields.io/npm/dm/wigss?style=flat-square)](https://npmjs.com/package/wigss) [![License: Apache 2.0](https://img.shields.io/badge/License-Apache%202.0-blue.svg?style=flat-square)](./LICENSE)

[한국어 (Korean)](README.ko.md) | **English**

Quick Start

cd my-project
npm run dev                          # Your dev server on port 3000

# In another terminal:
npx wigss@latest --port          # Prompts for API key, then opens browser

Or try the built-in demo (no existing project needed):

npx wigss@latest --demo

If you've previously installed `wigss` globally, run `npm uninstall -g wigss` first to ensure npx always uses the latest version.

What is WIGSS?

**WIGSS** (Style Shaper) is a visual code refactoring tool with an always-on AI agent. Frontend developers can visually **drag and resize UI components** on their live web page, and WIGSS **automatically rewrites the source code** to match.

No Figma-to-code. No CSS guessing. Just drag it — the code changes.

The Problem

AI coding agents (Cursor, Claude Code, Trae) can scaffold UI fast. But **fine-tuning the design** is still painful:

"Make this card a bit wider" — hard to describe precisely in words
CSS tweaking → refresh → check → repeat — slow and tedious
No designer available — developers do it alone

How to Use

1. Scan

Hover the top arrow tab to reveal the toolbar. Click **Scan** — the AI detects all UI components on the page and labels them (Navbar, Card, Footer, etc.).