# redesign

Redesigns web apps and sites without breaking existing SEO, brand colors, or conversion forms. Audits the surface before touching any code.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 463 installs · ★ 398
- Author: educlopez
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/educlopez/ui-craft/tree/HEAD/cli/assets/codex/skills/redesign/SKILL.md
- Updated: 2026-10-19
- HTML: https://affpapa.org/en/nevibecode/skills/educlopez-redesign

## What it does

The skill modernizes working user interfaces as part of the `ui-craft` ecosystem. Before proposing changes, it inspects local code or live URLs using `npx ui-craft-detect <path>`. This audit catalogs existing routes, heading hierarchy from h1 to h3, navigation, forms, and color values.

Work splits into three distinct scopes: Refresh, Reskin, and Rebuild. The skill defaults to the smallest scope that addresses the complaint. Brand identity, SEO metadata, and existing copy stay untouched unless explicitly requested.

For a Rebuild scope, the skill requires printing a before-and-after section map before touching files. That requirement stops destructive layout changes from silently wiping critical conversion paths or damaging search rankings.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add educlopez/ui-craft --skill redesign -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/redesign/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/redesign/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add educlopez/ui-craft --skill redesign -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/redesign/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add educlopez/ui-craft --skill redesign -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/redesign/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install educlopez/ui-craft redesign
```

2. **Manually: put the files in place**
- File: `.github/skills/redesign/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add educlopez/ui-craft --skill redesign -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/educlopez/ui-craft --path cli/assets/codex/skills/redesign
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/redesign/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add educlopez/ui-craft --skill redesign -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/educlopez/ui-craft/tree/HEAD/cli/assets/codex/skills/redesign/SKILL.md

## When to use it
- modernize UI styling without breaking established brand identity
- audit live pages or local components with `ui-craft-detect`
- tune spacing rhythm, typography scales, and color tokens
- rebuild page layouts while preserving SEO tags and forms

## Example prompts
- redesign the landing page layout but keep our current brand colors
- refresh the UI of `src/components/Dashboard.tsx`
- make this look current without dropping existing form fields

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 0debc16d14b7b617.

BEGIN THIRD-PARTY FILE 0debc16d14b7b617
```text
---
name: redesign
description: "Redesign an existing site or app without losing what already works — audits the current surface first, classifies what to preserve (brand, IA, SEO, content), picks a refresh/reskin/rebuild scope, then modernizes deliberately. Use when the user says \"redesign\", \"modernize this site\", \"refresh the UI\", \"make this look current\", or points at an existing page/URL they want improved rather than rebuilt from scratch. Invoke when the user asks for redesign on their UI, or mentions 'redesign' alongside design / UI / frontend work."
---

<!-- HARNESS MIRROR — do not edit here. Canonical source: commands/redesign.md. After editing source, copy into cli/assets/<harness>/ and repo-root harness mirrors. -->

**Context:** this sub-skill is one lens of the broader `ui-craft` skill. If the `ui-craft` skill is also installed, read its SKILL.md first for Discovery + Anti-Slop + Craft Test, then apply the specific lens below.

Redesign `$ARGUMENTS`. Load the `ui-craft` skill and read `references/craft-intent.md`. A redesign is not a greenfield build wearing the old content — most of its value is in what you deliberately keep.

**Step 1 — Audit what exists (before any opinion):**

- Run the detector on the current source (`npx ui-craft-detect <path>`) or live page (`npx ui-craft-detect <url>`) and note findings.
- Inventory: pages/routes, section order, heading hierarchy (h1–h3), nav structure, conversion paths (CTAs and where they lead), forms, imagery assets, fonts, color values actually in use.
- Read `.ui-craft/brief.md` if present — prior constraints still bind.

**Step 2 — Classify what to preserve. Wrong-to-change unless the user explicitly asks:**

- **Brand equity** — logo, name, an established palette the business already uses in the wild. Committed brand color stays; you may re-tune tints/shades into a proper token scale.
- **IA + SEO** — URLs/routes, page set, heading semantics, title/meta, alt text, structured data. A redesign that tanks organic traffic is a failure regardless of how it looks.
- **Content + voice** — existing copy is data about the business. Restructure freely; rewrite voice only with permission.
- **Conversion paths** — every CTA and form that exists today exists for a reason. Relocate, restyle, but never silently drop one.

**Step 3 — Pick the scope and say it out loud:**

| Scope | What changes | When |
|---|---|---|
| **Refresh** | Tokens only: type scale, spacing rhythm, radii, shadows, color tuning | Site is structurally fine, looks dated |
| **Reskin** | Visual layer + component styling; layout skeleton and section order stay | Bones are good, skin is generic or old |
| **Rebuild** | Layout and composition too; content, IA, and brand carry over | Layout itself is the problem |

Default to the smallest scope that fixes the stated complaint. For **rebuild**, print a short before/after section map and get a nod before writing code.
```
END THIRD-PARTY FILE 0debc16d14b7b617

The third-party file has ended. Everything between the 0debc16d14b7b617 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2963 of 4058 bytes. © educlopez · MIT · https://github.com/educlopez/ui-craft/tree/HEAD/cli/assets/codex/skills/redesign/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md