skills.rest
vp-k
vp-kCOMMUNITY
Explore all skills by this author →
GitHub

design-renewal

Renew design systems by replacing palettes, typography, components, and layouts.

Updated Mar 5, 2026
Search Tags:#typography#accessibility#design system#color palette#component library#UI renewal
One-click install
npx skills add https://github.com/vp-k/design-polish --skill design-renewal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-renewal
Source: https://github.com/vp-k/design-polish/tree/main/skills/design-renewal
Command: npx skills add https://github.com/vp-k/design-polish --skill design-renewal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires puppeteer, axe-core, and includes scripts (resource) and references (resource) and data (resource) and knowledge (resource) components.

What problem does it solve?

This Skill tackles the complex challenge of a complete design system overhaul, enabling large-scale visual transformations for your application.

Core Features & Use Cases

  • Full Design System Renewal: Replaces color palettes, typography, components, and layouts for a modern aesthetic.
  • Integrated Analysis: Leverages a knowledge base, visual comparison, and WCAG accessibility checks.
  • Use Case: Transform a dated application's UI into a sleek, modern interface by applying a new design system, ensuring consistency and improved user experience across the board.

Quick Start

Initiate a full design renewal of your project.

Frequently Asked Questions about design-renewal

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

FAQPage Schema
How do I perform a full design system overhaul for an existing application UI?▼

A design system overhaul replaces your existing color palettes, typography, components, and layouts. You can initiate a full renewal by applying a new design system to transform a dated application into a modern, consistent interface.

What is the best way to ensure WCAG accessibility compliance during a UI renewal?▼

WCAG accessibility checks during a UI renewal are automated using axe-core. This integrates automated accessibility testing directly into your design system transformation to validate visual comparisons and ensure compliance.

Can I use reference sites and style keywords to guide a component library redesign?▼

Yes, you can use style keywords and reference site inputs to guide a component library redesign. This allows the design system renewal to generate tailored visual transformations based on your specific aesthetic targets.

How does visual comparison work when replacing a color palette and typography?▼

Visual comparison during a color palette and typography replacement leverages an integrated knowledge base. It captures visual states to evaluate large-scale UI transformations and ensure the new design system maintains aesthetic consistency.

Do I need Puppeteer installed to automate large-scale UI transformations?▼

Yes, Puppeteer is required to automate large-scale UI transformations. It drives the visual comparison and interface interaction processes needed to execute the comprehensive design system renewal.

When should I not use an automated design system renewal approach?▼

You should avoid automated design system renewal for highly bespoke interfaces requiring manual, pixel-level custom artwork. This approach targets large-scale, systematic visual transformations rather than specialized, custom illustration work.

Related Skills

Explore More Design & Creative Skills→
lucidlabs-hqlucidlabs-hq
2

visual-verify

Capture interactive states and visual snapshots of a running frontend with agent-browser.

Official
Advanced
sjoerdbeentjessjoerdbeentjes

frontend-design

Design production-grade frontend interfaces with accessible, responsive HTML/CSS/JS.

Community
Intermediate
fgarofalo56fgarofalo56
6

frontend-testing

Run unit, component, E2E, visual regression, and accessibility tests for React applications.

Community
Advanced
Hack23Hack23
9

design-system-management

Creates a cohesive design system with centralized CSS tokens and component patterns for multilingual UI theming.

Official
Intermediate