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.
- 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: balanceortext-wrap: pretty.
Color and Surfaces
- Pure
#000000background. 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
（为兼容发布已截断）
