网页设计优化小助手

要解决的问题

很多前端需求不是缺少组件，而是页面缺少统一的设计判断：首屏不突出、间距混乱、配色不一致、移动端断行不适，改旧页面又容易破坏原有交互。网页设计优化小助手面向这些具体问题，提供从新建页面到美化已有页面的可执行流程。

工作方式与能力边界

该技能把网页设计拆成两类任务：

• 从零设计新页面：先收集页面目的、受众、风格与内容模块，再从内置模板中选择起点，例如 hero-basic.html、navbar.html、cards-grid.html、full-landing-page.html，最后调整配色、排版、内容并交付自包含 HTML。
• 美化已有页面：先审查现有页面的视觉问题，再给出可追溯的修改建议，逐项调整 CSS、结构和布局，同时保持功能与交互完整。

输出默认强调 移动优先、语义化 HTML5、CSS 自定义属性、无障碍和中文排版；需要更细的色彩、间距、规则指导时会参考 references/design-system.md。它适合落地页、首页、服务页、功能展示页等静态视觉优化，但不会自动替换复杂业务逻辑，也不适合依赖大量外部设计系统或需要完整后端状态的场景。