Web界面设计质感重构

许多由 AI 快速生成或开发人员初建的 Web 页面往往充斥着典型的“模板感”：滥用 Inter 字体、纯黑背景、蓝紫渐变、对称三列卡片以及缺失悬停和加载状态。本能力提供了一套严密的设计审计规范与渐进式重构方法，能在不推翻现有技术栈（如 Tailwind、styled-components、原生 CSS 等）的前提下，从字体层级、材质阴影、非对称网格、微交互反馈、文案去模板化等维度，将现有网站或 Web 应用逐项提升至现代高阶视觉水准。

它会先理解你的原始内容和目标，再按清晰的步骤完成处理。你不需要学习复杂命令，也不用理解背后的技术细节。

常见场景

它能帮你做什么？

三步完成

怎么使用

1安装 Skill

把右侧安装请求发给你的 AI。

2说清楚目标

告诉 AI 你想完成什么，或直接贴入内容。

3检查结果

按需要继续调整语气、范围或格式。

复制就能用

你可以直接这样说

“请扫描我当前 Next.js 项目中的 Landing Page 代码，列出所有泛滥的 AI 设计痕迹并基于 Tailwind 给出渐进式升级方案。”

“审查这个 pricing 卡片组件的布局与状态，帮我解决按钮底边不对齐和缺乏点击反馈的问题，同时替换默认的 Inter 字体。”

“我有一个纯原生 CSS 的个人博客，请帮我重构它的色彩系统与阴影层级，去除生硬的纯黑背景并增加微质感噪点。”

适用人群

适合谁？

希望提升产品视觉质感独立开发者负责将AI原型落地交付的前端工程师对现有官网排版和交互不满意的创业团队负责人

上手门槛

使用难度

进阶

需要了解任务流程，页面已整理好使用步骤。

兼容范围

支持哪些 AI？

Codex可直接使用

Claude Code可直接使用

OpenClaw可直接使用

Hermes可直接使用

国内 Agent可直接使用

中文用户增强

Skill Px 做了什么？

中文说明简化使用方式补充中文案例整理安装流程降低理解难度

Web界面设计质感重构.Skill