两种方式
- 网页源码粘贴模式（claude.ai / Artifacts）：把HTML+CSS+JS粘贴到prompt上方，直接让Claude重构、美化、性能优化。适合单页、静态页面。
- Browse网页抓取（Claude Opus/Sonnet，开启Browse Page工具）：直接给网页URL，Claude读取线上页面，做全站审计+优化方案。只能读取公开页面，不能直接在线修改网页，输出优化后的代码/修改建议。>
注意：Claude不能直接远程修改线上网站，只能输出优化后的完整代码或者diff，你手动替换部署；如果是本地项目，用Claude Code（CLI/VSCode插件），可以直接读取项目文件，自动修改代码文件。
核心Prompt合集（直接复制）
1. 全能综合优化Prompt（粘贴源码用，最常用）
你是资深前端工程师+UI设计师+性能优化专家。下面是网页完整源码，请对页面进行全方位优化，**严禁改动原有业务逻辑、页面内容、功能行为**。
优化维度：
1. 语义化HTML：修正标签，增加合理h1-h6层级，补充图片alt，优化SEO元标签，增加schema；
2. 可访问性WCAG2.1 AA：颜色对比度≥4.5:1，键盘可访问，focus样式，表单label，支持prefers-reduced-motion；
3. 性能优化：精简冗余CSS/JS，移除未使用样式，图片增加lazyload，字体优化，减少重排重绘，优化CLS；
4. 响应式：移动端优先，修复移动端溢出、换行、触摸按钮尺寸≥44px；
5. UI视觉优化：统一间距、排版层级，使用CSS变量管理色彩，消除AI通用模板感，增加细腻微交互；
6. 代码整洁：整理缩进，删除重复样式，注释关键改动。
输出规则：
① 先输出【改动摘要】，列出所有修改点；
② 输出完整可直接运行的优化后完整HTML代码；
③ 最后输出【QA检查清单】，我用来验证优化效果。
下面是源码：
【粘贴你的网页源码】
2. 网页审计Prompt（给URL，开启Browse工具）
你是高级前端UX&性能审计专家。使用Browse读取这个网页：【填入URL】
完成Lighthouse维度全量审计，评估Core Web Vitals、UX、可访问性、SEO、移动端适配。
输出内容：
1. 问题分级：Critical / High / Medium / Low，每个问题写清楚：现象、影响、修复方案；
2. 分模块：性能、可访问性、SEO、移动端UX、视觉层级；
3. 给出最小改动的代码片段，不要全盘重写；
4. 生成Lighthouse优化优先级路线图，区分快速修复和长期改造项。
3. 纯性能优化Prompt（只提速，不改UI）
作为前端性能专家，优化下面网页源码，**保持页面UI、交互完全不变**，只提升Lighthouse分数，优化Core Web Vitals指标（LCP、INP、CLS）。
优化方向：
- 识别并移除无用JS、冗余CSS；
- 第三方脚本defer/async延迟加载；
- 图片懒加载、指定宽高防止布局偏移CLS；
- 字体font-display策略；
- 提取关键CSS，减少阻塞渲染资源；
- 减少DOM节点数量，优化事件监听。
输出：改动清单 + 完整优化源码。
源码：
【粘贴代码】
4. UI美化专用Prompt（Anthropic官方前端美学指令，解决AI模板丑、千篇一律问题）
<frontend_aesthetics>
避免通用AI流水线廉价UI。打造独特、有质感的界面。
排版：选用有辨识度字体，不要默认Inter、Roboto、Arial。
色彩：一套主色+一个强调色，全部使用CSS变量统一管理，避免烂大街紫蓝渐变。
动效：优先CSS动画；只保留高价值入场动画，减少零散多余微动效；尊重prefers-reduced-motion。
背景：使用渐变/几何纹理营造层次感，不要单纯纯色。
禁止：
- 大量卡片、圆角、淡阴影堆砌的AI模板风格；
- 所有元素都加hover上浮；
- 无意义、干扰阅读的动画。
</frontend_aesthetics>
基于下面源码美化页面，保留原有页面结构、文字内容、功能。输出完整代码+改动说明。
源码：
【粘贴代码】
5. 安全重构diff模式（适合生产项目，最小改动，降低风险）
重构下面的网页代码，**硬性约束：页面行为、视觉效果完全不变，不能引入任何新bug**。
只做：精简重复代码、语义化、清理冗余样式、代码可读性提升。
输出：
1. 变更diff，标出每一处修改；
2. 完整优化代码；
3. 风险提示：任何可能影响原有行为的改动，单独标注，不直接写入代码。
代码：
【粘贴源码】
最佳实践（减少翻车）
- 不要一次性让Claude大改全站：分页面、分模块迭代，先审计，再小范围优化；
- 约束很重要：一定要写「保持原有业务逻辑不变」，否则Claude经常擅自改动交互；
- 多轮迭代：第一轮拿审计报告，第二轮只修复高优先级问题，第三轮微调视觉；
- Claude Code（本地项目）：在项目根目录放
CLAUDE.md，写死项目技术栈、设计规范，后续所有优化自动遵守这套规则，不用每次重复写约束； - 风险：AI生成代码务必本地预览、测试移动端、可访问性、功能，再上线。
进阶：系统提示词（一次性设置，后续所有对话自动生效）
放到Claude的自定义系统prompt，后续每次优化网页自动启用这套规则：
你是资深前端、UI、性能、可访问性工程师。处理网页代码优化时遵守：
1. 优先保留原有页面内容、业务交互逻辑，不擅自修改功能；
2. 输出改动清单，再输出完整代码；
3. 优化包含：语义HTML、WCAG AA、Core Web Vitals性能、移动端响应式；
4. UI设计避免千篇一律AI模板，使用CSS变量管理主题；
5. 代码优先原生CSS，不随意引入额外第三方库；
6. 任何可能破坏原有功能的改动，必须单独标记，不直接合并进代码。
你想要哪一类侧重？我可以精简成一行极简prompt，或者针对Tailwind/React/原生HTML单独定制版本。