现代 Web 指南 | Modern Web Guidance

这是 Modern Web Guidance 的抢先体验版 。我们正在积极添加新内容，欢迎您在 GitHub 上提供贡献或反馈。

Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

根据现代 Web 指南进行构建

现代 Web 指南是一组经过专家审核的常青技能，可指导 AI 编码代理在许多常见用例中构建现代 Web 体验，确保其无障碍、高性能且安全。

使用 modern-web-guidance CLI 进行安装（推荐）：

npx modern-web-guidance@latest install

开始使用在 GitHub 上查看

支持您偏好的 AI 编码智能体

您可以将 Modern Web Guidance 与自己喜爱的 AI 编码智能体搭配使用，确保在自己偏好的工作流程中获得有关现代 Web 最佳实践的指导。

查看所有安装选项

`npx skills`

使用 Vercel 的 Agent Skills 在项目中安装 Modern Web Guidance：

npx skills add GoogleChrome/modern-web-guidance

Claude Code

为 Claude Code 安装 Modern Web Guidance 技能：

# 1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Install the plugin
/plugin install modern-web-guidance@googlechrome
# 3. Reload plugins
/reload-plugins

Copilot CLI

安装适用于 Copilot CLI 的 Modern Web Guidance 技能：

# 1. Add the marketplace:
/plugin marketplace add GoogleChrome/modern-web-guidance
# 2. Install the plugin
/plugin install modern-web-guidance@googlechrome

Gemini CLI

在 Gemini CLI 中安装 Modern Web Guidance 技能：

gemini extensions install https://github.com/GoogleChrome/modern-web-guidance --auto-update

提示可带来更优质的用户体验

在 AI 辅助编码工作流程中尝试以下几个示例提示，以利用现代 Web 指导来构建新功能、实现旧版代码现代化并加快应用开发速度。

打造全新用户体验

Create an accordion-style stats component that smoothly animates on open and close.

Build a tab bar with a sliding highlight that tracks active items using CSS Anchor Positioning.

Design a dashboard card that uses container queries to adapt its layout to its own width.

对旧版代码进行现代化改造

Update legacy modal window implementations to use the <dialog> element and animate them using modern CSS features.

Migrate legacy tooltips to use the Popover API and CSS Anchor Positioning.

提高安全性

Implement a passkey-based login flow using the latest WebAuthn features.

Implement a starter Content Security Policy (CSP) without breaking my app.

Perform a security audit of my site and suggest improvements.

提升性能

Set up my app to begin preloading pages when users hover over important links.

My app has lots of long tasks, and its INP is affected. Help me fix it.

Help me improve my app's LCP.

将“现代 Web 指南”技能与 Chrome 开发者工具搭配使用（面向代理）

将面向代理的 Chrome 开发者工具与“现代 Web 指南”技能相结合，可改进您的 Web 开发工作流程。运行实时性能审核、检查无障碍树和捕获控制台日志，然后自动应用精确的现代 Web 代码修复。

了解详情

了解如何做贡献

您是否对如何改进“现代 Web 指南”有任何想法？了解如何贡献内容！

了解详情