{"id":50596207,"url":"https://github.com/jicninja/redesigner","last_synced_at":"2026-06-05T14:30:34.466Z","repository":{"id":361888165,"uuid":"1256289453","full_name":"jicninja/redesigner","owner":"jicninja","description":"Skill de Claude Code: relevá una web con Playwright (login manual, solo lectura), auditá UX y rediseñá con Claude (React + Tailwind + Framer Motion). Export a HTML, Figma y Pencil.","archived":false,"fork":false,"pushed_at":"2026-06-01T18:05:14.000Z","size":48,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-01T18:19:15.972Z","etag":null,"topics":["claude-code","claude-code-plugin","claude-skill","design-tokens","playwright","redesign","ux-audit"],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jicninja.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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-06-01T16:28:57.000Z","updated_at":"2026-06-01T18:06:02.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/jicninja/redesigner","commit_stats":null,"previous_names":["jicninja/redisgner"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/jicninja/redesigner","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jicninja%2Fredesigner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jicninja%2Fredesigner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jicninja%2Fredesigner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jicninja%2Fredesigner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jicninja","download_url":"https://codeload.github.com/jicninja/redesigner/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jicninja%2Fredesigner/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33946818,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-05T02:00:06.157Z","response_time":120,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["claude-code","claude-code-plugin","claude-skill","design-tokens","playwright","redesign","ux-audit"],"created_at":"2026-06-05T14:30:33.851Z","updated_at":"2026-06-05T14:30:34.457Z","avatar_url":"https://github.com/jicninja.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# redesigner\n\n**A [Claude Code](https://claude.com/claude-code) skill to crawl a web/app and redesign it with Claude.**\n\nHybrid model: a **Node/Playwright engine** (deterministic and **read-only**) captures everything that defines a site's style; **Claude** (with vision) does the analysis, the UX audit, the logo, the questions and the redesign. The heavy steps (navigable mock, audit, redesign build, exports) are delegated to subagents to save context.\n\n\u003e Point it at any site — it surveys the style, then rebuilds it with Claude.\n\n*(Español más abajo ↓)*\n\n---\n\n## Install\n\nIt's a Claude Code plugin. From Claude Code:\n\n```text\n/plugin marketplace add jicninja/redesigner\n/plugin install redesigner@redesigner\n```\n\n**Requirements:** Node ≥ 20 and npm. On the **first run**, the skill installs its dependencies and downloads Playwright's Chromium automatically (`npm install` + `postinstall`).\n\nThen just ask Claude:\n\n```text\nredesign this site: https://app.example.com\n```\n\nor *\"survey the style of …\"*, *\"scrape this site\"*, *\"redesigner …\"*.\n\n---\n\n## Example — redesigning its own repo page\n\nredesigner was pointed at **its own GitHub repo page** and asked to redesign it — **twice, in two very different styles**. Both keep the exact same page (repo header, tabs, file list, README panel, About sidebar) and only swap the skin.\n\n**Before** — the plain GitHub repo page:\n\n![Before](docs/example/before.png)\n\n**After ① — dark glassmorphism** · 🔗 **[redesigner-glass.surge.sh](https://redesigner-glass.surge.sh)**\nFrosted translucent panels with `backdrop-blur`, a soft ambient blue glow and a single brand accent (`#3b82f6`).\n\n![Glassmorphism restyle](docs/example/after.png)\n\n**After ② — cyberpunk / neon** · 🔗 **[redesigner-cyber.surge.sh](https://redesigner-cyber.surge.sh)**\nNeon cyan + magenta on near-black, glowing borders, HUD corner brackets, CRT scanlines, angular clipped chrome and glitch micro-interactions.\n\n![Cyberpunk restyle](docs/example/cyber-after.png)\n\n*Same structure and content, two full re-skins — change only the design tokens. Produced end to end with redesigner (capture → analysis → Claude design with Tailwind v4 + Framer Motion), then deployed to Surge.*\n\n---\n\n## How it works (pipeline)\n\n1. **Capture** (Playwright, read-only) — crawls same-origin **without touching anything destructive** (skips logout/delete/checkout/…), and per page saves: screenshots (full + viewport), HTML, CSS (via network interception, CORS-immune), sampled computed styles, hovers/focus (pixels + diff), `transitions` and `@keyframes`. Detects the **logo** and aggregates **design tokens**.\n2. **preview.html** — lightweight gallery to eyeball what was scraped, without spending model context.\n3. **Navigable mock** (subagent) — recreates the surveyed site view by view, so you can walk through it before deciding.\n4. **Analysis** (Claude) — reports in `reports/`: overview, visual style, design tokens, logo.\n5. **UX audit** (subagent, senior designer role) — Nielsen heuristics, hierarchy, consistency, accessibility/contrast, states, and quick wins vs opportunities.\n6. **Logo** — if it's generic, it builds a **prompt for gpt-image** that you run yourself (no API, no cost).\n7. **Claude design** (subagent with the `frontend-design` skill) — scaffolds **React 19 + Vite + Tailwind v4 + Framer Motion** seeded with the tokens, and Claude fills in components and pages.\n8. **Show + iterate** — mandatory gate: the redesign is shown and iterated by prompt **until you approve**, before exporting.\n9. **Exports** (subagent, optional, only after approval) — static HTML mock, **Figma** (`html.to.design` + `tokens.figma.json` for Tokens Studio) and **Pencil** (.pen via MCP).\n\n`redesign/` (the React project) is the **source of truth** for exports.\n\n---\n\n## Security\n\n- **MANUAL login, no credentials.** The engine **never** receives or asks for a username/password. If the site has a login, a Chromium window opens (`--no-headless`) and **you log in by hand**; the engine detects on its own when you're in and continues. There are no credential flags or env vars — by design.\n- **Read-only.** The crawler does not delete, edit or submit forms (except the login you do yourself). It skips destructive links.\n- Always use a **test account**, never a production one.\n- Session cookies stay only in the local artifacts (`.auth/`, gitignored) — never published.\n\n---\n\n## Manual engine usage (optional)\n\nBeyond the skill, the engine can be run by hand from `skills/redesigner/`:\n\n```bash\ncd skills/redesigner\nnpm install                 # first time (downloads Chromium)\n\n# Survey (with a visible browser in case there's a manual login)\nnpm run capture -- --url https://example.com --out ./redesigner-artifacts --max-pages 25 --no-headless\n\n# Scaffold the redesign (React) and, optionally, the HTML mock\nnpm run scaffold -- --out . --artifacts ./redesigner-artifacts\nnpm run scaffold -- --out . --artifacts ./redesigner-artifacts --target html\n```\n\n**`capture` flags:** `--url` (req.), `--login-url`, `--out`, `--max-pages`, `--viewport WxH`, `--no-headless`, `--capture-trace`, `--page-timeout \u003cms\u003e`.\n**`scaffold` flags:** `--out` (req.), `--artifacts`, `--target react|html`.\n\n---\n\n## Artifacts (`redesigner-artifacts/`)\n\n```text\nmanifest.json   preview.html   tokens.json\nscreenshots/    html/          css/{computed,inline,transitions.json,animations.json,hover-states.json}\nlogo/{logo.png, candidates/, candidates.json}\nreports/{site-overview, visual-style, design-tokens, logo-analysis, logo-prompt, redesign-brief, uiux-expert-review}.md\n```\n\nThey are generated in the **project where you invoke** the skill, not in the plugin repo.\n\n---\n\n## Repo structure\n\n```text\n.claude-plugin/{plugin.json, marketplace.json}   ← marketplace + plugin\nskills/redesigner/\n  SKILL.md                                        ← orchestration (what Claude reads)\n  package.json, bin/, src/                        ← Node/Playwright engine\n```\n\n## License\n\nMIT — see [LICENSE](./LICENSE).\n\n\u003cbr\u003e\n\n---\n---\n\n\u003cbr\u003e\n\n# redesigner (Español)\n\n**Skill de [Claude Code](https://claude.com/claude-code) para relevar una web/app y rediseñarla con Claude.**\n\nModelo híbrido: un **motor Node/Playwright** (determinístico y de **solo lectura**) captura todo lo que define el estilo de un sitio; **Claude** (con visión) hace el análisis, la auditoría UX, el logo, las preguntas y el rediseño. Los pasos pesados (mock navegable, auditoría, build del rediseño, exports) se delegan a subagentes para no gastar contexto.\n\n\u003e Apuntalo a cualquier sitio — releva el estilo y lo reconstruye con Claude.\n\n---\n\n## Instalación\n\nEs un plugin de Claude Code. Desde Claude Code:\n\n```text\n/plugin marketplace add jicninja/redesigner\n/plugin install redesigner@redesigner\n```\n\n**Requisitos:** Node ≥ 20 y npm. En la **primera corrida**, el skill instala sus dependencias y baja Chromium de Playwright automáticamente (`npm install` + `postinstall`).\n\nDespués, simplemente pedíselo a Claude:\n\n```text\nrediseñá este sitio: https://app.ejemplo.com\n```\n\no *\"relevá el estilo de …\"*, *\"scrapeá este sitio\"*, *\"redesigner …\"*.\n\n---\n\n## Ejemplo — rediseñando su propia página del repo\n\nApuntamos redesigner a **su propia página de GitHub** y le pedimos que la rediseñe — **dos veces, en dos estilos bien distintos**. Ambos mantienen exactamente la misma página (header del repo, tabs, lista de archivos, panel del README, sidebar About) y solo cambian la piel.\n\n**Antes** — la página del repo en GitHub, pelada:\n\n![Antes](docs/example/before.png)\n\n**Después ① — glassmorphism oscuro** · 🔗 **[redesigner-glass.surge.sh](https://redesigner-glass.surge.sh)**\nPaneles de vidrio esmerilado translúcido con `backdrop-blur`, un glow azul ambiental suave y un único acento de marca (`#3b82f6`).\n\n![Restyle glassmorphism](docs/example/after.png)\n\n**Después ② — cyberpunk / neon** · 🔗 **[redesigner-cyber.surge.sh](https://redesigner-cyber.surge.sh)**\nNeon cyan + magenta sobre negro, bordes con glow, corner-brackets tipo HUD, scanlines CRT, chrome angular recortado y micro-glitches.\n\n![Restyle cyberpunk](docs/example/cyber-after.png)\n\n*Misma estructura y contenido, dos reskins completos — cambian solo los design tokens. Hecho de punta a punta con redesigner (capture → análisis → Claude design con Tailwind v4 + Framer Motion) y deployado a Surge.*\n\n---\n\n## Cómo funciona (pipeline)\n\n1. **Capture** (Playwright, solo lectura) — crawlea same-origin **sin tocar nada destructivo** (salta logout/delete/checkout/…), y por cada página guarda: screenshots (full + viewport), HTML, CSS (vía interceptación de red, inmune a CORS), computed styles muestreados, hovers/focus (píxeles + diff), `transitions` y `@keyframes`. Detecta el **logo** y agrega **design tokens**.\n2. **preview.html** — galería liviana para revisar a ojo lo scrapeado, sin gastar contexto del modelo.\n3. **Mock navegable** (subagente) — recrea el sitio relevado vista por vista, para que lo recorras antes de decidir.\n4. **Análisis** (Claude) — reportes en `reports/`: overview, estilo visual, design tokens, logo.\n5. **Auditoría UX** (subagente, rol de diseñador/a senior) — heurísticas de Nielsen, jerarquía, consistencia, accesibilidad/contraste, estados, y quick wins vs oportunidades.\n6. **Logo** — si es genérico, arma un **prompt para gpt-image** que vos lanzás a mano (sin API ni costo).\n7. **Claude design** (subagente con el skill `frontend-design`) — scaffold **React 19 + Vite + Tailwind v4 + Framer Motion** sembrado con los tokens, y Claude completa componentes y páginas.\n8. **Mostrar + iterar** — gate obligatorio: se muestra el rediseño y se itera por prompt **hasta que apruebes**, antes de exportar.\n9. **Exports** (subagente, opcional, solo tras aprobación) — mock HTML estático, **Figma** (`html.to.design` + `tokens.figma.json` para Tokens Studio) y **Pencil** (.pen vía MCP).\n\n`redesign/` (proyecto React) es la **fuente de verdad** de los exports.\n\n---\n\n## Seguridad\n\n- **Login MANUAL, sin credenciales.** El motor **nunca** recibe ni pide usuario/contraseña. Si el sitio tiene login, se abre una ventana de Chromium (`--no-headless`) y **logueás vos a mano**; el motor detecta solo cuando entraste y sigue. No hay flags ni env vars de credenciales — es intencional.\n- **Solo lectura.** El crawler no borra, edita ni envía formularios (salvo el login que hacés vos). Salta links destructivos.\n- Usá siempre una **cuenta de prueba**, nunca una productiva.\n- Las cookies de sesión quedan solo en los artefactos locales (`.auth/`, gitignored) — nunca se publican.\n\n---\n\n## Uso manual del motor (opcional)\n\nMás allá del skill, el motor se puede correr a mano desde `skills/redesigner/`:\n\n```bash\ncd skills/redesigner\nnpm install                 # primera vez (baja Chromium)\n\n# Relevar (con navegador visible por si hay login manual)\nnpm run capture -- --url https://ejemplo.com --out ./redesigner-artifacts --max-pages 25 --no-headless\n\n# Scaffold del rediseño (React) y, opcional, mock HTML\nnpm run scaffold -- --out . --artifacts ./redesigner-artifacts\nnpm run scaffold -- --out . --artifacts ./redesigner-artifacts --target html\n```\n\n**Flags de `capture`:** `--url` (req.), `--login-url`, `--out`, `--max-pages`, `--viewport WxH`, `--no-headless`, `--capture-trace`, `--page-timeout \u003cms\u003e`.\n**Flags de `scaffold`:** `--out` (req.), `--artifacts`, `--target react|html`.\n\n---\n\n## Artefactos (`redesigner-artifacts/`)\n\n```text\nmanifest.json   preview.html   tokens.json\nscreenshots/    html/          css/{computed,inline,transitions.json,animations.json,hover-states.json}\nlogo/{logo.png, candidates/, candidates.json}\nreports/{site-overview, visual-style, design-tokens, logo-analysis, logo-prompt, redesign-brief, uiux-expert-review}.md\n```\n\nSe generan en el **proyecto donde invocás** la skill, no en el repo del plugin.\n\n---\n\n## Estructura del repo\n\n```text\n.claude-plugin/{plugin.json, marketplace.json}   ← marketplace + plugin\nskills/redesigner/\n  SKILL.md                                        ← orquestación (lo que lee Claude)\n  package.json, bin/, src/                        ← motor Node/Playwright\n```\n\n## Licencia\n\nMIT — ver [LICENSE](./LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjicninja%2Fredesigner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjicninja%2Fredesigner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjicninja%2Fredesigner/lists"}