redesign-existing-projects
Audit and upgrade existing websites to premium design standards without breaking functionality.
- Provides a comprehensive design audit checklist covering typography, color, layout, interactivity, content, components, and iconography to identify generic AI patterns and weak points
- Works with any CSS framework (Tailwind, vanilla CSS, styled-components) or tech stack by scanning and improving existing code rather than rewriting from scratch
- Includes strategic upgrade techniques for typography animation, asymmetric layouts, motion design, and surface effects to replace cliche patterns with high-end alternatives
- Prioritizes fixes by visual impact: font swaps, color cleanup, interactive states, layout refinement, component replacement, and state design in sequence
Redesign Skill
How This Works
When applied to an existing project, follow this sequence:
- Scan — Read the codebase. Identify the framework, styling method (Tailwind, vanilla CSS, styled-components, etc.), and current design patterns.
- Diagnose — Run through the audit below. List every generic pattern, weak point, and missing state you find.
- Fix — Apply targeted upgrades working with the existing stack. Do not rewrite from scratch. Improve what's there.
Design Audit
Typography
Check for these problems and fix them:
- Browser default fonts or Inter everywhere. Replace with a font that has character. Good options:
Geist,Outfit,Cabinet Grotesk,Satoshi. For editorial/creative projects, pair a serif header with a sans-serif body. - Headlines lack presence. Increase size for display text, tighten letter-spacing, reduce line-height. Headlines should feel heavy and intentional.
- Body text too wide. Limit paragraph width to roughly 65 characters. Increase line-height for readability.
More from leonxlnx/taste-skill
design-taste-frontend
Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
51.9Khigh-end-visual-design
Teaches the AI to design like a high-end agency. Defines the exact fonts, spacing, shadows, card structures, and animations that make a website feel expensive. Blocks all the common defaults that make AI designs look cheap or generic.
45.7Kminimalist-ui
Clean editorial-style interfaces. Warm monochrome palette, typographic contrast, flat bento grids, muted pastels. No gradients, no heavy shadows.
41.8Kfull-output-enforcement
Overrides default LLM truncation behavior. Enforces complete code generation, bans placeholder patterns, and handles token-limit splits cleanly. Apply to any task requiring exhaustive, unabridged output.
40.7Kindustrial-brutalist-ui
Raw mechanical interfaces fusing Swiss typographic print with military terminal aesthetics. Rigid grids, extreme type scale contrast, utilitarian color, analog degradation effects. For data-heavy dashboards, portfolios, or editorial sites that need to feel like declassified blueprints.
38.8Kstitch-design-taste
Semantic Design System Skill for Google Stitch. Generates agent-friendly DESIGN.md files that enforce premium, anti-generic UI standards — strict typography, calibrated color, asymmetric layouts, perpetual micro-motion, and hardware-accelerated performance.
38.8K