{"id":49618255,"url":"https://github.com/wigtn/wigss","last_synced_at":"2026-05-05T00:02:16.468Z","repository":{"id":347361706,"uuid":"1192375136","full_name":"wigtn/wigss","owner":"wigtn","description":"Visual AI code refactoring tool — select, redesign, and apply Tailwind CSS changes with an always-on AI agent. npx wigss","archived":false,"fork":false,"pushed_at":"2026-04-10T19:52:08.000Z","size":3502,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-04-10T21:25:40.535Z","etag":null,"topics":["code-editor","developer-tools","npx","ui-design","visual-editor"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/wigss","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wigtn.png","metadata":{"files":{"readme":"README.ko.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2026-03-26T06:38:39.000Z","updated_at":"2026-04-10T19:52:12.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/wigtn/wigss","commit_stats":null,"previous_names":["wigtn/wigss"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/wigtn/wigss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wigtn%2Fwigss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wigtn%2Fwigss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wigtn%2Fwigss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wigtn%2Fwigss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wigtn","download_url":"https://codeload.github.com/wigtn/wigss/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wigtn%2Fwigss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32629704,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-04T10:08:07.713Z","status":"ssl_error","status_checked_at":"2026-05-04T10:08:02.005Z","response_time":58,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["code-editor","developer-tools","npx","ui-design","visual-editor"],"created_at":"2026-05-05T00:02:13.555Z","updated_at":"2026-05-05T00:02:16.461Z","avatar_url":"https://github.com/wigtn.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\n\u003cimg src=\"https://raw.githubusercontent.com/wigtn/wigss/main/assets/wigtn-logo.png\" alt=\"WIGTN Logo\" width=\"240\" /\u003e\n\n# WIGSS\n\n\u003e UI 컴포넌트를 드래그하세요 — 소스 코드가 자동으로 바뀝니다.\n\n[![npm version](https://img.shields.io/npm/v/wigss?style=flat-square)](https://npmjs.com/package/wigss)\n[![npm downloads](https://img.shields.io/npm/dm/wigss?style=flat-square)](https://npmjs.com/package/wigss)\n[![License: Apache 2.0](https://img.shields.io/badge/License-Apache%202.0-blue.svg?style=flat-square)](./LICENSE)\n\n\u003c!-- TODO: 터미널 데모 GIF 추가 (권장: vhs 또는 asciinema) --\u003e\n\n**한국어** | [English](README.md)\n\n\u003c/div\u003e\n\n---\n\n## 빠른 시작\n\n```bash\ncd my-project\nnpm run dev                          # 개발 서버 기동 (3000번 포트)\n\n# 다른 터미널에서:\nnpx wigss@latest --port \u003c포트번호\u003e         # API 키 입력 후 브라우저 자동 오픈\n```\n\n또는 키를 인라인으로:\n\n```bash\nnpx wigss@latest --port \u003c포트번호\u003e --key sk-proj-...\n```\n\n데모 체험 (기존 프로젝트 없어도 됨):\n\n```bash\nnpx wigss@latest --demo\n```\n\n\u003e 이전에 `wigss`를 전역 설치한 적 있다면, `npm uninstall -g wigss`로 먼저 제거하세요. 그래야 npx가 항상 최신 버전을 실행합니다.\n\n---\n\n## WIGSS란?\n\n**WIGSS** (Style Shaper)는 **항시 떠있는 AI 에이전트** 기반의 비주얼 코드 리팩토링 도구입니다. 프론트엔드 개발자가 실제 웹 페이지 위에서 **UI 컴포넌트를 드래그/리사이즈**하면, AI가 **소스코드를 자동으로 수정**합니다.\n\nFigma 없이. CSS 수동 수정 없이. 그냥 드래그하면 코드가 바뀝니다.\n\n### 문제\n\n코딩 에이전트(Cursor, Claude Code, Trae)로 화면을 대충 만드는 건 잘 됩니다. 하지만 **디자인을 다듬는 건 여전히 고통**입니다:\n\n- \"이 카드를 좀 더 크게\" — 말로 정확히 설명하기 어려움\n- CSS 수정 → 새로고침 → 확인 → 반복 — 느리고 비효율적\n- 디자이너 없이 개발자 혼자 다듬어야 하는 상황\n\n---\n\n## 사용 방법\n\n### 1. 스캔\n\n**Scan** 클릭 — AI가 페이지의 모든 UI 컴포넌트를 자동 인식하고 레이블을 붙입니다 (Navbar, Card, Footer 등).\n\n### 2. 편집\n\n1. 컴포넌트 **클릭** → 선택 (파란 테두리 + 리사이즈 핸들)\n2. **드래그**로 이동, **핸들**로 크기 조절\n3. AI가 **실시간 피드백** — \"8px 차이납니다. 맞출까요?\"\n4. **채팅**으로 AI에게 질문 — \"푸터 어떻게 수정하지?\" 또는 \"알아서 해줘\"\n\n### 3. 저장\n\n**Save** 클릭 → AI가 Tailwind diff 생성 → 소스 파일 수정 → iframe 자동 새로고침.\n\n---\n\n## CLI\n\n```bash\nnpx wigss@latest [옵션]\n```\n\n| 플래그                | 기본값 | 설명                                           |\n| --------------------- | ------ | ---------------------------------------------- |\n| `-p, --port \u003cport\u003e`   | `3000` | 대상 dev 서버 포트                             |\n| `--wigss-port \u003cport\u003e` | `4000` | WIGSS 에디터 포트                              |\n| `--key \u003ckey\u003e`         | —      | OpenAI API 키 (또는 `OPENAI_API_KEY` 환경변수) |\n| `--demo`              | —      | 내장 데모 페이지로 실행                        |\n| `-V, --version`       | —      | 버전 표시                                      |\n\n`--key` 미제공 + `OPENAI_API_KEY` 환경변수 미설정 시, WIGSS가 **대화형으로 키를 입력받습니다**.\n\n---\n\n## 동작 원리\n\n1. 포트 4000에 Next.js 에디터를 실행해 개발 서버를 iframe으로 감쌉니다\n2. 소프트웨어 기반 DOM 스캔으로 컴포넌트를 감지하고 소스 파일에 매핑합니다\n3. 오버레이가 각 컴포넌트에 정렬된 드래그/리사이즈 박스를 렌더링합니다\n4. 드래그/리사이즈 이벤트가 WebSocket으로 AI 에이전트에 스트리밍됩니다\n5. Save 시 직접 Tailwind 클래스 매핑으로 diff를 생성하고 `fs`가 소스에 직접 적용합니다\n\n---\n\n## AI 에이전트: 5가지 자율 행동\n\n| #   | 행동                   | 모델    | 시점                       |\n| --- | ---------------------- | ------- | -------------------------- |\n| 1   | **컴포넌트 자동 인식** | GPT-4o  | Scan 후                    |\n| 2   | **디자인 제안**        | GPT-4o  | 인식 후 (신뢰도 점수 포함) |\n| 3   | **실시간 편집 피드백** | GPT-4o  | 드래그/리사이즈 후         |\n| 4   | **채팅 상담**          | GPT-4o  | 사용자 질문 또는 위임      |\n| 5   | **코드 리팩토링**      | Direct Tailwind mapping | Save 시              |\n\n### \"도구\"가 아닌 \"에이전트\"인 이유\n\n|            | 일반 AI 도구     | WIGSS 에이전트           |\n| ---------- | ---------------- | ------------------------ |\n| **주도성** | 명령을 기다림    | 능동적으로 개선 제안     |\n| **범위**   | 요청당 단일 액션 | 멀티스텝 자율 파이프라인 |\n| **통신**   | 요청 → 응답      | 항시 연결 WebSocket      |\n| **결과물** | 텍스트 생성      | 실제 소스 파일 수정      |\n\n---\n\n## 요구 사항\n\n- Node.js 18+\n- OpenAI API 키 (GPT-4o 분석 및 제안용)\n- 편집할 dev 서버 (React/Next.js + Tailwind 권장)\n\n---\n\n## 아키텍처\n\n```\n브라우저 (localhost:4000)\n├── 플로팅 툴바 [Scan] [Save] [Mobile] [Undo/Redo]\n├── 비주얼 에디터\n│   ├── iframe (내 페이지 — 읽기 전용 배경)\n│   └── 오버레이 (드래그/리사이즈 가능한 컴포넌트 박스)\n└── Agent Panel\n    ├── 실시간 피드백  → [바로 적용]\n    ├── AI 제안        → [적용] [무시]\n    └── 채팅\n\n    WebSocket (항시 연결, 이벤트 기반)\n    ▼\nWIGSS Agent (Node.js)\n├── OpenAI GPT-4o  — 제안, 피드백, 채팅\n├── Direct Tailwind mapping — 결정론적 코드 리팩토링\n└── fs             — 소스 파일 읽기/쓰기 (.bak 백업 포함)\n```\n\n### 데이터 흐름\n\n```\n[1] 스캔\n    FloatingToolbar → ws.send('scan')\n                          │\n                    ws-server.ts (origin 검증 + rate limit)\n                          │\n                    agent-loop.ts (mutex 큐잉)\n                      └─ ws.send('components_detected')\n                          │\n                    AgentStore → iframe.postMessage('wigss-scan-request')\n                          │\n                    iframe (개발 서버)\n                      └─ DOM 순회 → RawScanElement[]\n                      └─ postMessage('wigss-scan-result')\n                          │\n[2] 감지\n    VisualEditor.tsx\n      └─ component-detector.ts (순수 소프트웨어 — AI 없음)\n          ├─ 시멘틱 태그 인식 (nav, header, footer)\n          ├─ Flex/Grid 레이아웃 분석\n          ├─ 반복 형제 감지 (카드 그리드)\n          └─ fullClassName 추출 ← 리팩토링의 핵심 키\n                          │\n                    EditorStore.setComponents()\n                    ws.send('components_synced')\n                          │\n                    openai-client.ts → suggestImprovements()\n                      └─ GPT-4o (function calling)\n                      └─ ws.send('suggestion')\n\n[3] 편집 (드래그/리사이즈)\n    VisualEditor: handleMouseMove (30fps 스로틀)\n      ├─ EditorStore.setState() → 화면 업데이트\n      └─ iframe.postMessage('wigss-live-style') → 실시간 미리보기\n    handleMouseUp\n      ├─ EditorStore.applyChange() → 히스토리 기록 (최대 50)\n      └─ ws.send('drag_end' | 'resize_end')\n                          │\n                    openai-client.ts → provideFeedback()\n                      └─ GPT-4o → ws.send('feedback')\n\n[4] 저장\n    FloatingToolbar\n      ├─ POST /api/refactor {changes, components, projectPath}\n      │     └─ refactor-client.ts → directRefactor()\n      │         ├─ fullClassName 기반 줄 단위 소스 매칭\n      │         ├─ Tailwind 클래스 px↔토큰 변환 (TW_MAP)\n      │         └─ CodeDiff[] 반환 (줄 번호 포함)\n      │\n      └─ POST /api/apply {diffs, projectPath}\n            ├─ 경로 순회 공격 방지\n            ├─ diff 검증 (className/style만, JS 변경 거부)\n            ├─ .bak 백업 생성\n            └─ fs.writeFile → 소스 수정 완료\n\n[5] 리로드\n    iframe.reload() → 3초 후 자동 재스캔\n```\n\n### 의존성 맵\n\n| 레이어 | 기술 | 역할 |\n|--------|------|------|\n| 진입점 | `bin/cli.js` (commander) | CLI 파싱, 환경 설정, Next.js 기동 |\n| 초기화 | `instrumentation.ts` | 서버 부팅 시 WS 서버 + 에이전트 시작 |\n| 실시간 통신 | `ws` (포트 4001) | 양방향 이벤트 스트리밍 |\n| AI | `openai` → GPT-4o | 제안, 피드백, 채팅 (function calling) |\n| 리팩토링 | `refactor-client.ts` | 결정론적 Tailwind 매핑 (AI 없음) |\n| 상태 관리 | `zustand` (2 stores) | editor-store + agent-store |\n| 프레임워크 | `next` (App Router) | SSR + API 라우트 + 정적 페이지 |\n\n---\n\n## 기여\n\nPull Request를 환영합니다! 변경 전 Issue를 먼저 열어서 논의해 주세요.\n\n---\n\n## 라이선스\n\n[Apache 2.0](./LICENSE) © Team WIGSS (WIGTN Crew)\n\n---\n\n\u003cdiv align=\"center\"\u003e\n\n**Trae.ai 해커톤 2026 출품작 — 주제: \"에이전트\"**\n\n\u003c/div\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwigtn%2Fwigss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwigtn%2Fwigss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwigtn%2Fwigss/lists"}