Agent skill · design visual · nexu-io
redesign-existing-projects
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.
Why this skill is useful
Provides detailed design audit criteria and high-end design standards that the AI wouldn't reliably generate on its own.
What it needs
About 9k tokens when loaded. Last updated 2026-08-07. 84,236 stars on the source repository.
What this skill does
Redesign Skill How This Works When applied to an existing project, follow this sequence: 1. Scan — Read the codebase. Identify the framework, styling method (Tailwind, vanilla CSS, styled-components, etc.), and current design patterns. 2. Diagnose — Run through the audit below. List every generic pattern, weak point, and missing state you find. 3. 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. Only Regular (400) and Bold (700) weights used. Introduce Medium (500) and SemiBold (600) for more subtle hierarchy. Numbers in proportional font. Use a monospace font or enable tabular figures (font-variant-numeric: tabular-nums) for data-heavy interfaces. Missing letter-spacing adjustments. Use negative tracking for large headers, positive tracking for small caps or labels. All-caps subheaders everywhere. Try lowercase italics, sentence case, or small-caps instead. Orphaned words. Single words sitting alone on the last line. Fix with text-wrap: balance or text-wrap: pretty. Color and Surfaces Pure #000000 background. Replace with off-black, dark charcoal, or tinted dark (#0a0a0a, #121212, or a dark navy). Oversaturated accent colors. Keep saturation below 80%. Desaturate accents so they blend with neutrals instead of screaming. More than one accent color. Pick one. Remove the rest. Consistency beats variety. Mixing warm and cool grays. Stick to one gray family. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills nexu-io/redesign-skill