redesign-existing-projects

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

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.

应用于现有项目时，请遵循以下步骤：

扫描 — 读取代码库，识别框架、样式方法（Tailwind、原生CSS、styled-components等）以及当前设计模式。
诊断 — 执行下方的审核清单，列出所有通用模式、薄弱点和缺失的状态。
修复 — 针对现有技术栈进行定向升级，无需从零重写，优化现有内容即可。

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
```
.

检查并修复以下问题：

浏览器默认字体或全局使用Inter字体：替换为更具特色的字体。推荐选项：
```
Geist
```
、
```
Outfit
```
、
```
Cabinet Grotesk
```
、
```
Satoshi
```
。对于编辑类或创意项目，可将衬线字体标题与无衬线字体正文搭配使用。
标题缺乏存在感：增大展示文本的字号，收紧字间距，减小行高。标题应显得醒目且有设计感。
正文宽度过宽：将段落宽度限制在约65字符以内，增大行高提升可读性。
仅使用Regular（400）和Bold（700）字重：引入Medium（500）和SemiBold（600）字重，构建更细腻的层级结构。
比例字体中的数字：对于数据密集型界面，使用等宽字体或启用表格数字（
```
font-variant-numeric: tabular-nums
```
）。
缺少字间距调整：大标题使用负字间距，小型大写字母或标签使用正字间距。
子标题全大写：尝试使用小写斜体、句首大写或小型大写字母替代。
孤行：最后一行仅有单个单词。使用
```
text-wrap: balance
```
或
```
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. Tint all grays with a consistent hue (warm or cool, not both).
Purple/blue "AI gradient" aesthetic. This is the most common AI design fingerprint. Replace with neutral bases and a single, considered accent.
Generic
box-shadow
. Tint shadows to match the background hue. Use colored shadows (e.g., dark blue shadow on a blue background) instead of pure black at low opacity.
Flat design with zero texture. Add subtle noise, grain, or micro-patterns to backgrounds. Pure flat vectors feel sterile.
Perfectly even gradients. Break the uniformity with radial gradients, noise overlays, or mesh gradients instead of standard linear 45-degree fades.
Inconsistent lighting direction. Audit all shadows to ensure they suggest a single, consistent light source.
Random dark sections in a light mode page (or vice versa). A single dark-background section breaking an otherwise light page looks like a copy-paste accident. Either commit to a full dark mode or keep a consistent background tone throughout. If contrast is needed, use a slightly darker shade of the same palette — not a sudden jump to
```
#111
```
in the middle of a cream page.
Empty, flat sections with no visual depth. Sections that are just text on a plain background feel unfinished. Add high-quality background imagery (blurred, overlaid, or masked), subtle patterns, or ambient gradients. Use reliable placeholder sources like
```
https://picsum.photos/seed/{name}/1920/1080
```
when real assets are not available. Experiment with background images behind hero sections, feature blocks, or CTAs — even a subtle full-width photo at low opacity adds presence.

纯
#000000
背景：替换为近黑色、深炭灰色或带色调的深色（
```
#0a0a0a
```
、
```
#121212
```
或深海军蓝）。
饱和度过高的强调色：将饱和度控制在80%以下，降低强调色的饱和度，使其与中性色自然融合而非突兀刺眼。
使用多种强调色：仅选择一种强调色，移除其余颜色。一致性优于多样性。
混合冷暖灰色：坚持使用同一色系的灰色，所有灰色都添加统一的色调（暖色调或冷色调，不可同时使用）。
紫色/蓝色“AI渐变”风格：这是最常见的AI设计特征。替换为中性底色搭配单一、经过考量的强调色。
通用
box-shadow
：为阴影添加与背景一致的色调，使用彩色阴影（例如蓝色背景上的深蓝色阴影）替代低透明度的纯黑色阴影。
无纹理的扁平化设计：为背景添加细微的噪点、颗粒或微图案。纯扁平化矢量设计会显得生硬。
完全均匀的渐变：使用径向渐变、噪点叠加或网格渐变打破均匀性，替代标准的45度线性渐变。
光照方向不一致：审核所有阴影，确保它们暗示单一、一致的光源。
浅色模式页面中随机出现深色区块（反之亦然）：在整体浅色页面中突然出现深色区块会显得像是复制粘贴的失误。要么完全采用深色模式，要么保持整个页面背景色调一致。如果需要对比，使用同一调色板中稍深的色调——不要在奶油色页面中间突然跳转到
```
#111
```
。
无视觉深度的空白扁平区块：仅在纯色背景上放置文本的区块会显得未完成。添加高质量背景图片（模糊、叠加或遮罩处理）、细微图案或环境渐变。当没有真实资源时，可使用可靠的占位图源，如
```
https://picsum.photos/seed/{name}/1920/1080
```
。尝试在英雄区块、功能模块或CTA区域添加背景图片——即使是低透明度的细微全屏图片也能提升存在感。

Layout

布局

Everything centered and symmetrical. Break symmetry with offset margins, mixed aspect ratios, or left-aligned headers over centered content.
Three equal card columns as feature row. This is the most generic AI layout. Replace with a 2-column zig-zag, asymmetric grid, horizontal scroll, or masonry layout.
Using
height: 100vh
for full-screen sections. Replace with
```
min-height: 100dvh
```
to prevent layout jumping on mobile browsers (iOS Safari viewport bug).
Complex flexbox percentage math. Replace with CSS Grid for reliable multi-column structures.
No max-width container. Add a container constraint (around 1200-1440px) with auto margins so content doesn't stretch edge-to-edge on wide screens.
Cards of equal height forced by flexbox. Allow variable heights or use masonry when content varies in length.
Uniform border-radius on everything. Vary the radius: tighter on inner elements, softer on containers.
No overlap or depth. Elements sit flat next to each other. Use negative margins to create layering and visual depth.
Symmetrical vertical padding. Top and bottom padding are always identical. Adjust optically — bottom padding often needs to be slightly larger.
Dashboard always has a left sidebar. Try top navigation, a floating command menu, or a collapsible panel instead.
Missing whitespace. Double the spacing. Let the design breathe. Dense layouts work for data dashboards, not for marketing pages.
Buttons not bottom-aligned in card groups. When cards have different content lengths, CTAs end up at random heights. Pin buttons to the bottom of each card so they form a clean horizontal line regardless of content above.
Feature lists starting at different vertical positions. In pricing tables or comparison cards, the list of features should start at the same Y position across all columns. Use consistent spacing above the list or fixed-height title/price blocks.
Inconsistent vertical rhythm in side-by-side elements. When placing cards, columns, or panels next to each other, align shared elements (titles, descriptions, prices, buttons) across all items. Misaligned baselines make the layout look broken.
Mathematical alignment that looks optically wrong. Centering by the math doesn't always look centered to the eye. Icons next to text, play buttons in circles, or text in buttons often need 1-2px optical adjustments to feel right.

所有内容居中且对称：通过偏移边距、混合宽高比或左对齐标题搭配居中内容打破对称性。
功能行使用三列等宽卡片：这是最通用的AI布局。替换为两列交错布局、非对称网格、横向滚动或瀑布流布局。
使用
height: 100vh
实现全屏区块：替换为
```
min-height: 100dvh
```
，避免移动浏览器（iOS Safari视口bug）出现布局跳动。
复杂的flexbox百分比计算：使用CSS Grid构建可靠的多列结构。
无最大宽度容器：添加容器约束（约1200-1440px）并设置自动边距，避免内容在宽屏上撑满整个屏幕。
通过flexbox强制卡片等高：当内容长度不同时，允许卡片高度变化或使用瀑布流布局。
所有元素使用统一的圆角：变化圆角大小：内部元素使用更紧凑的圆角，容器使用更柔和的圆角。
无重叠或深度：元素平铺排列。使用负边距创建层叠效果和视觉深度。
对称的垂直内边距：上下内边距始终相同。进行视觉调整——底部内边距通常需要稍大一些。
仪表板始终使用左侧侧边栏：尝试顶部导航、浮动命令菜单或可折叠面板替代。
缺少留白：将间距加倍，让设计呼吸。密集布局适用于数据仪表板，不适用于营销页面。
卡片组中的按钮未底部对齐：当卡片内容长度不同时，CTA按钮会处于随机高度。将按钮固定在每个卡片的底部，使它们无论上方内容如何都能形成一条整齐的水平线。
功能列表起始垂直位置不一致：在定价表或对比卡片中，功能列表应在所有列中从相同的Y轴位置开始。在列表上方使用一致的间距或固定高度的标题/价格区块。
并排元素的垂直节奏不一致：当放置卡片、列或面板时，对齐所有项目中的共享元素（标题、描述、价格、按钮）。基线对齐错误会使布局看起来破碎。
数学上对齐但视觉上不协调：数学上的居中在视觉上并不总是居中。图标旁的文本、圆形中的播放按钮或按钮内的文本通常需要1-2px的视觉调整才能看起来协调。

Interactivity and States

交互与状态

No hover states on buttons. Add background shift, slight scale, or translate on hover.
No active/pressed feedback. Add a subtle
```
scale(0.98)
```
or
```
translateY(1px)
```
on press to simulate a physical click.
Instant transitions with zero duration. Add smooth transitions (200-300ms) to all interactive elements.
Missing focus ring. Ensure visible focus indicators for keyboard navigation. This is an accessibility requirement, not optional.
No loading states. Replace generic circular spinners with skeleton loaders that match the layout shape.
No empty states. An empty dashboard showing nothing is a missed opportunity. Design a composed "getting started" view.
No error states. Add clear, inline error messages for forms. Do not use
```
window.alert()
```
.
Dead links. Buttons that link to
```
#
```
. Either link to real destinations or visually disable them.
No indication of current page in navigation. Style the active nav link differently so users know where they are.
Scroll jumping. Anchor clicks jump instantly. Add
```
scroll-behavior: smooth
```
.
Animations using
top
,
left
,
width
,
height
. Switch to
```
transform
```
and
```
opacity
```
for GPU-accelerated, smooth animation.

按钮无悬停状态：添加背景变化、轻微缩放或位移效果。
无激活/按下反馈：按下时添加细微的
```
scale(0.98)
```
或
```
translateY(1px)
```
效果，模拟物理点击感。
零时长的即时过渡：为所有交互元素添加平滑过渡（200-300ms）。
缺少焦点环：确保键盘导航有可见的焦点指示器。这是无障碍要求，并非可选。
无加载状态：使用与布局形状匹配的骨架屏替代通用的圆形加载动画。
无空状态：空仪表板什么都不显示是错失机会。设计一个精心制作的“入门引导”视图。
无错误状态：为表单添加清晰的内联错误提示。不要使用
```
window.alert()
```
。
无效链接：链接到
```
#
```
的按钮。要么链接到真实目标，要么视觉上禁用它们。
导航中无当前页面标识：对活动导航链接进行不同样式设置，让用户知道自己所在位置。
滚动跳跃：锚点点击时立即跳转。添加
```
scroll-behavior: smooth
```
。
使用
top
、
left
、
width
、
height
实现动画：切换为
```
transform
```
和
```
opacity
```
以实现GPU加速的平滑动画。

Content

内容

Generic names like "John Doe" or "Jane Smith". Use diverse, realistic-sounding names.
Fake round numbers like
99.99%
,
50%
,
$100.00
. Use organic, messy data:
```
47.2%
```
,
```
$99.00
```
,
```
+1 (312) 847-1928
```
.
Placeholder company names like "Acme Corp", "Nexus", "SmartFlow". Invent contextual, believable brand names.
AI copywriting cliches. Never use "Elevate", "Seamless", "Unleash", "Next-Gen", "Game-changer", "Delve", "Tapestry", or "In the world of...". Write plain, specific language.
Exclamation marks in success messages. Remove them. Be confident, not loud.
"Oops!" error messages. Be direct: "Connection failed. Please try again."
Passive voice. Use active voice: "We couldn't save your changes" instead of "Mistakes were made."
All blog post dates identical. Randomize dates to appear real.
Same avatar image for multiple users. Use unique assets for every distinct person.
Lorem Ipsum. Never use placeholder latin text. Write real draft copy.
Title Case On Every Header. Use sentence case instead.

通用名称如“John Doe”或“Jane Smith”：使用多样化、听起来真实的名称。
虚假的整数如
99.99%
、
50%
、
$100.00
：使用自然、真实的数据：
```
47.2%
```
、
```
$99.00
```
、
```
+1 (312) 847-1928
```
。
占位公司名称如“Acme Corp”、“Nexus”、“SmartFlow”：创造符合上下文、可信的品牌名称。
AI文案陈词滥调：切勿使用“Elevate”、“Seamless”、“Unleash”、“Next-Gen”、“Game-changer”、“Delve”、“Tapestry”或“In the world of...”。使用平实、具体的语言。
成功消息中的感叹号：移除感叹号。保持自信，而非喧闹。
“Oops!”错误消息：直接表述：“连接失败，请重试。”
被动语态：使用主动语态：“我们无法保存您的更改”而非“出现了错误”。
所有博客文章日期相同：随机化日期使其看起来真实。
多个用户使用相同的头像：为每个不同的用户使用独特的资源。
Lorem Ipsum占位文本：切勿使用拉丁文占位文本。编写真实的草稿文案。
所有标题使用标题大小写：改用句首大写。

Component Patterns

组件模式

Generic card look (border + shadow + white background). Remove the border, or use only background color, or use only spacing. Cards should exist only when elevation communicates hierarchy.
Always one filled button + one ghost button. Add text links or tertiary styles to reduce visual noise.
Pill-shaped "New" and "Beta" badges. Try square badges, flags, or plain text labels.
Accordion FAQ sections. Use a side-by-side list, searchable help, or inline progressive disclosure.
3-card carousel testimonials with dots. Replace with a masonry wall, embedded social posts, or a single rotating quote.
Pricing table with 3 towers. Highlight the recommended tier with color and emphasis, not just extra height.
Modals for everything. Use inline editing, slide-over panels, or expandable sections instead of popups for simple actions.
Avatar circles exclusively. Try squircles or rounded squares for a less generic look.
Light/dark toggle always a sun/moon switch. Use a dropdown, system preference detection, or integrate it into settings.
Footer link farm with 4 columns. Simplify. Focus on main navigational paths and legally required links.

通用卡片样式（边框+阴影+白色背景）：移除边框，或仅使用背景色，或仅使用间距。仅当分层能传达层级结构时才使用卡片。
始终使用一个填充按钮+一个幽灵按钮：添加文本链接或三级样式以减少视觉噪音。
药丸形状的“New”和“Beta”徽章：尝试方形徽章、旗帜或纯文本标签。
手风琴式FAQ区块：使用并排列表、可搜索帮助或内联渐进式披露替代。
带指示点的三卡片轮播 testimonial：替换为瀑布流墙、嵌入的社交帖子或单个旋转引用。
三列定价表：使用颜色和强调突出推荐套餐，而非仅增加高度。
所有操作都使用模态框：对于简单操作，使用内联编辑、滑入面板或可展开区块替代弹出窗口。
仅使用圆形头像：尝试圆角方形或圆角矩形以获得更独特的外观。
明暗切换始终是太阳/月亮开关：使用下拉菜单、系统偏好检测或集成到设置中。
四列链接农场式页脚：简化页脚，专注于主要导航路径和法律要求的链接。

Iconography

图标

Lucide or Feather icons exclusively. These are the "default" AI icon choice. Use Phosphor, Heroicons, or a custom set for differentiation.
Rocketship for "Launch", shield for "Security". Replace cliche metaphors with less obvious icons (bolt, fingerprint, spark, vault).
Inconsistent stroke widths across icons. Audit all icons and standardize to one stroke weight.
Missing favicon. Always include a branded favicon.
Stock "diverse team" photos. Use real team photos, candid shots, or a consistent illustration style instead of uncanny stock imagery.

仅使用Lucide或Feather图标：这些是AI的“默认”图标选择。使用Phosphor、Heroicons或自定义图标集以实现差异化。
“Launch”使用火箭图标，“Security”使用盾牌图标：用不那么陈词滥调的图标替代（闪电、指纹、火花、保险库）。
图标描边宽度不一致：审核所有图标，统一描边权重。
缺少favicon：始终包含品牌化的favicon。
库存“多元化团队”照片：使用真实团队照片、 candid shots或一致的插画风格替代不自然的库存图片。

Code Quality

代码质量

Div soup. Use semantic HTML:
```
<nav>
```
,
```
<main>
```
,
```
<article>
```
,
```
<aside>
```
,
```
<section>
```
.
Inline styles mixed with CSS classes. Move all styling to the project's styling system.
Hardcoded pixel widths. Use relative units (
```
%
```
,
```
rem
```
,
```
em
```
,
```
max-width
```
) for flexible layouts.
Missing alt text on images. Describe image content for screen readers. Never leave
```
alt=""
```
or
```
alt="image"
```
on meaningful images.
Arbitrary z-index values like
9999
. Establish a clean z-index scale in the theme/variables.
Commented-out dead code. Remove all debug artifacts before shipping.
Import hallucinations. Check that every import actually exists in
```
package.json
```
or the project dependencies.
Missing meta tags. Add proper
```
<title>
```
,
```
description
```
,
```
og:image
```
, and social sharing meta tags.

Div嵌套地狱：使用语义化HTML：
```
<nav>
```
、
```
<main>
```
、
```
<article>
```
、
```
<aside>
```
、
```
<section>
```
。
内联样式与CSS类混合使用：将所有样式移至项目的样式系统中。
硬编码像素宽度：使用相对单位（
```
%
```
、
```
rem
```
、
```
em
```
、
```
max-width
```
）实现灵活布局。
图片缺少alt文本：为屏幕阅读器描述图片内容。切勿在有意义的图片上设置
```
alt=""
```
或
```
alt="image"
```
。
任意z-index值如
9999
：在主题/变量中建立清晰的z-index层级。
注释掉的死代码：发布前移除所有调试残留。
不存在的导入：检查每个导入是否确实存在于
```
package.json
```
或项目依赖中。
缺少元标签：添加合适的
```
<title>
```
、
```
description
```
、
```
og:image
```
和社交分享元标签。

Strategic Omissions (What AI Typically Forgets)

常见遗漏（AI通常会忽略的内容）

No legal links. Add privacy policy and terms of service links in the footer.
No "back" navigation. Dead ends in user flows. Every page needs a way back.
No custom 404 page. Design a helpful, branded "page not found" experience.
No form validation. Add client-side validation for emails, required fields, and format checks.
No "skip to content" link. Essential for keyboard users. Add a hidden skip-link.
No cookie consent. If required by jurisdiction, add a compliant consent banner.

无法律链接：在页脚添加隐私政策和服务条款链接。
无“返回”导航：用户流程中的死胡同。每个页面都需要返回路径。
无自定义404页面：设计一个有用、品牌化的“页面未找到”体验。
无表单验证：添加客户端验证，包括邮箱、必填字段和格式检查。
无“跳转到内容”链接：这对键盘用户至关重要。添加隐藏的跳转链接。
无Cookie同意提示：如果司法管辖区要求，添加合规的同意横幅。

Upgrade Techniques

升级技巧

When upgrading a project, pull from these high-impact techniques to replace generic patterns:

升级项目时，可从以下高影响力技巧中选择，替换通用模式：

Typography Upgrades

排版升级

Variable font animation. Interpolate weight or width on scroll or hover for text that feels alive.
Outlined-to-fill transitions. Text starts as a stroke outline and fills with color on scroll entry or interaction.
Text mask reveals. Large typography acting as a window to video or animated imagery behind it.

可变字体动画：在滚动或悬停时插值字重或宽度，让文本更具活力。
描边到填充的过渡：文本在滚动进入或交互时从描边轮廓变为填充颜色。
文本遮罩揭示：大尺寸排版作为窗口，显示背后的视频或动画图像。

Layout Upgrades

布局升级

Broken grid / asymmetry. Elements that deliberately ignore column structure — overlapping, bleeding off-screen, or offset with calculated randomness.
Whitespace maximization. Aggressive use of negative space to force focus on a single element.
Parallax card stacks. Sections that stick and physically stack over each other during scroll.
Split-screen scroll. Two halves of the screen sliding in opposite directions.

打破网格/非对称：故意忽略列结构的元素——重叠、超出屏幕或通过计算好的偏移实现。
最大化留白：大量使用负空间，将焦点集中在单个元素上。
视差卡片堆叠：滚动时区块固定并物理堆叠在彼此之上。
分屏滚动：屏幕的两个半部分向相反方向滑动。

Motion Upgrades

动效升级

Smooth scroll with inertia. Decouple scrolling from browser defaults for a heavier, cinematic feel.
Staggered entry. Elements cascade in with slight delays, combining Y-axis translation with opacity fade. Never mount everything at once.
Spring physics. Replace linear easing with spring-based motion for a natural, weighty feel on all interactive elements.
Scroll-driven reveals. Content entering through expanding masks, wipes, or draw-on SVG paths tied to scroll progress.

带惯性的平滑滚动：将滚动与浏览器默认行为解耦，获得更厚重、电影感的体验。
** staggered入场动画**：元素依次进入，伴随轻微延迟，结合Y轴位移和透明度淡入。切勿一次性加载所有元素。
弹簧物理动效：用基于弹簧的运动替代线性缓动，让所有交互元素获得自然、有重量感的体验。
滚动驱动的揭示：内容通过与滚动进度绑定的扩展遮罩、擦除或SVG路径绘制效果进入视野。

Surface Upgrades

背景升级

True glassmorphism. Go beyond
```
backdrop-filter: blur
```
. Add a 1px inner border and a subtle inner shadow to simulate edge refraction.
Spotlight borders. Card borders that illuminate dynamically under the cursor.
Grain and noise overlays. A fixed, pointer-events-none overlay with subtle noise to break digital flatness.
Colored, tinted shadows. Shadows that carry the hue of the background rather than using generic black.

真实玻璃态效果：超越
```
backdrop-filter: blur
```
，添加1px内边框和细微内阴影模拟边缘折射。
** spotlight边框**：卡片边框在光标下方动态发光。
颗粒与噪点叠加：固定的、无指针事件的叠加层，带有细微噪点以打破数字扁平化。
带色调的彩色阴影：阴影带有背景的色调，而非使用通用的黑色。

Fix Priority

修复优先级

Apply changes in this order for maximum visual impact with minimum risk:

Font swap — biggest instant improvement, lowest risk
Color palette cleanup — remove clashing or oversaturated colors
Hover and active states — makes the interface feel alive
Layout and spacing — proper grid, max-width, consistent padding
Replace generic components — swap cliche patterns for modern alternatives
Add loading, empty, and error states — makes it feel finished
Polish typography scale and spacing — the premium final touch

按照以下顺序应用更改，以最小风险获得最大视觉影响：

字体替换 — 即时提升最大，风险最低
调色板清理 — 移除冲突或饱和度过高的颜色
悬停与激活状态 — 让界面更具活力
布局与间距 — 合理的网格、最大宽度、一致的内边距
替换通用组件 — 用现代替代方案替换陈词滥调的模式
添加加载、空状态和错误状态 — 让界面显得完整
优化排版比例与间距 — 高端质感的最后一步

Rules

规则

Work with the existing tech stack. Do not migrate frameworks or styling libraries.
Do not break existing functionality. Test after every change.
Before importing any new library, check the project's dependency file first.
If the project uses Tailwind, check the version (v3 vs v4) before modifying config.
If the project has no framework, use vanilla CSS.
Keep changes reviewable and focused. Small, targeted improvements over big rewrites.

适配现有技术栈。不要迁移框架或样式库。
不要破坏现有功能。每次更改后进行测试。
在导入任何新库之前，先检查项目的依赖文件。
如果项目使用Tailwind，在修改配置前检查版本（v3 vs v4）。
如果项目没有框架，使用原生CSS。
保持更改可审核且聚焦。优先进行小的定向改进，而非大规模重写。",