skills.rest
phuhao00
phuhao00COMMUNITY
Explore all skills by this author →
WebsiteGitHub

redesign-existing-projects

Audit and refine typography, layout, and interactivity in existing web interfaces.

12|3|Updated Jun 17, 2026
Search Tags:#design#ui#refactoring#frontend#css#ux
One-click install
npx skills add https://github.com/phuhao00/bony-agent --skill redesign-existing-projects-phuhao00
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: redesign-existing-projects
Source: https://github.com/phuhao00/bony-agent/tree/main/.agent/skills/redesign-existing-projects
Command: npx skills add https://github.com/phuhao00/bony-agent --skill redesign-existing-projects-phuhao00

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill addresses the common issue of generic, unpolished AI-generated web designs by applying professional design principles to existing codebases without requiring a full rewrite.

Core Features & Use Cases

  • Design Audit: Systematically identifies weak typography, poor color usage, and generic layout patterns.
  • Targeted Refinement: Provides actionable instructions to improve visual hierarchy, spacing, and interactivity using the existing tech stack.
  • Use Case: If you have a functional but visually sterile dashboard, use this Skill to audit the UI and apply high-end design standards like improved typography, refined color palettes, and better component spacing.

Quick Start

Apply the redesign skill to the current project to audit the existing design and suggest specific CSS improvements for the landing page.

Frequently Asked Questions about redesign-existing-projects

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

FAQPage Schema
How do I upgrade my web interface to a premium design standard?▼

To upgrade a web interface to a premium design standard, you need to audit and refine typography, layout, and interactivity. This process targets existing CSS to eliminate generic AI design patterns and improve visual hierarchy.

What is the best way to fix generic AI web design patterns in an existing project?▼

Fixing generic AI web design patterns requires a systematic design audit to identify weak typography and poor layout. You apply professional design principles to refine visual hierarchy and spacing without altering core functionality.

Does this UI refactoring approach work with vanilla CSS and existing frontend frameworks?▼

Yes, UI refactoring for premium design standards works with any CSS framework or vanilla CSS. It provides actionable instructions to improve component spacing and interactivity using your existing tech stack.

How do I audit my web application UI for visual hierarchy and spacing issues?▼

To audit a web application UI for visual hierarchy and spacing, systematically identify weak typography, poor color usage, and generic layout patterns. Then apply targeted refinements for consistent spacing and modern UX.

Can I improve my dashboard typography and color palette without a full codebase rewrite?▼

Yes, you can improve dashboard typography and color palettes without a full rewrite. This approach applies targeted CSS refinements to your existing codebase to achieve high-end design standards while maintaining functionality.

Related Skills

Explore More Design & Creative Skills→
lagarcesslagarcess
1

redesign-existing-projects

Audit web and app codebases for UI deficiencies and recommend non-breaking fixes.

Community
Intermediate
viably-labsviably-labs

google-design-md

Lint DESIGN.md and export design tokens to CSS variables or framework formats.

Official
Intermediate
GyananoGyanano
5

arrange

Assess interface layouts and propose consistent spacing scales and hierarchy adjustments.

Community
Advanced
TehminanazTehminanaz
1

frontend-component-architect

Design and implement pixel-perfect UI components for Next.js 16 with Tailwind CSS and Shadcn UI.

Community
Advanced