skills.rest
ItamarZand88
ItamarZand88COMMUNITY
Explore all skills by this author →
GitHub

redesign

Restyle existing UI code to match a target brand's design system tokens.

5|Updated Apr 10, 2026
Search Tags:#branding#theming#ui#design system#css#redesign#restyle
One-click install
npx skills add https://github.com/ItamarZand88/design-skills --skill redesign-itamarzand88
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: redesign
Source: https://github.com/ItamarZand88/design-skills/tree/main/.claude/skills/redesign
Command: npx skills add https://github.com/ItamarZand88/design-skills --skill redesign-itamarzand88

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Restyling an existing app to match a brand like Stripe, Linear, or Apple requires manually hunting down every color, font, spacing, and shadow value in the codebase and replacing it consistently, which is error-prone and often breaks visual coherence or functionality. ## Core Features & Use Cases - Systematic Token Mapping: Inventories current design tokens (colors, typography, spacing, shadows, radius) and builds an explicit mapping to the target design system's equivalents. - Layered Transformation: Applies changes in a controlled order — colors, typography, spacing, components, depth, responsive — while preserving component logic, accessibility attributes, and semantic HTML. - Partial Redesigns: Supports scoped restyling such as "make just the header look like Linear" with boundary coherence checks. - Use Case: You have a working dashboard built with Tailwind and want it to look like Notion. The skill loads Notion's DESIGN.md, maps your existing tokens to Notion's palette and typography, and rewrites only the visual CSS. ## Quick Start Ask Claude to redesign your existing dashboard or landing page to look like Linear using the design-md catalog.

Frequently Asked Questions about redesign

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

FAQPage Schema
How do I redesign my app to look like Stripe or Linear?▼

Request the redesign in natural language, such as "make my app look like Linear". The skill inventories your current design tokens, loads the target DESIGN.md from the design-md catalog, and systematically replaces colors, typography, spacing, and shadows.

How to restyle only part of a UI, like just the header?▼

Specify the scope in your request, for example "make just the header look like Linear". The skill loads the full target DESIGN.md but only transforms tokens within that scope, and warns if the partial redesign creates visual inconsistency at the boundary.

Does redesigning UI change my component logic or functionality?▼

No. The skill only modifies visual presentation: colors, fonts, spacing, shadows, borders, and layout CSS. It explicitly preserves event handlers, state management, API calls, accessibility attributes, semantic HTML, and test selectors.

What styling frameworks does UI redesign support?▼

The analysis step identifies your stack, including React, Vue, Svelte, or plain HTML with Tailwind, CSS modules, styled-components, inline styles, or CSS custom properties. The token mapping adapts to whichever styling approach your codebase uses.

What design systems are available for restyling?▼

The catalog in design-md/_index.md lists 58 curated design systems including Apple, Stripe, Linear, Vercel, Airbnb, Tesla, and Notion. Each DESIGN.md captures colors, typography, spacing, shadows, components, and guardrails.

Related Skills

Explore More Design & Creative Skills→
vikingokftvikingokft

design-md

Extract Stitch project design metadata and generate a structured DESIGN.md file.

Official
Intermediate
RuggeryRuggery

reversa-design-system

Extracts design tokens from CSS, theme files, and screenshots into documentation.

Community
Intermediate
codesour-designcodesour-design

apply-design-system

Reconnects existing Figma designs to published design system components.

Community
Advanced
Project-N-E-K-OProject-N-E-K-O
2.4k

🎨 UI 设计规范

Codifies a reusable UI design system for N.E.K.O capsule interfaces and brand-blue tokens.

Official
Basic