AI 智能体应用案例
Views —

AI 智能体应用案例

今日新增

44全部 189 条

共 189 条，第 1–20 条

营销·设计

用AI编码代理制作作品集网站

介绍作者用AI编码代理制作基于HTML、CSS、JS的作品集网站的过程。

Claude Code

使用方法

  1. 整理网站所需的功能和设计元素。
  2. 用HTML、CSS、JavaScript设计基本结构和样式。
  3. 向AI编码代理（Claude Code）提供规则文件和决策日志，分阶段进行代码审查和提交。
  4. 自行托管所需的字体和SVG图形等资源。
  5. 使用Lighthouse和WCAG工具检查可访问性、性能和SEO标准。
  6. 将网站部署到Vercel，并添加配置文件（vercel.json）以确保链接正常工作。

结果

作者表示，在AI编码代理的帮助下，仅用HTML、CSS、JS就完成了作品集网站。即使没有外部框架或构建工具，也能通过代码审查和提交过程实现所需的功能和设计。可访问性、性能和SEO得分也达到了较高水平。

注意事项

作者说明使用了Claude Code作为编码代理，但没有公开实际代码生成和修改过程的详细示例。所有敏感信息如客户名称等都已移除。n8n工作流等自动化案例被整理在单独的文件夹中，本文仅聚焦于网站制作。

来源

GrayTupas/gray-tupas-portfolio (GitHub) 原文 ↗

示例提示词 · Claude Code

目标：利用AI编码代理，仅用HTML、CSS、JavaScript制作作品集网站，并完成符合可访问性、性能、SEO标准的成果。

输入与环境：
- 网站需包含的主要功能、设计元素、页面结构（如首页、作品案例等）
- 需自行托管的字体、SVG图形等资源文件
- 用于记录代码审查和提交过程的规则文件及决策日志
- 部署环境：Vercel或其他静态文件服务器

实现与设置顺序：
1. 请整理网站所需的功能和设计元素。
2. 请用HTML、CSS、JavaScript设计基本结构和样式。
3. 向Claude Code等AI编码代理提供规则文件和决策日志，并在每个阶段进行代码审查和提交。
4. 请自行托管字体和SVG图形等所需资源。请勿使用外部请求或跟踪脚本。
5. 请用Lighthouse和WCAG工具检查可访问性（如符合WCAG AA对比、键盘导航、跳转链接）、性能和SEO标准。
6. 请将网站部署到Vercel，并添加配置文件（vercel.json）以确保链接正常工作。

成果：
- 包含HTML、CSS、JS文件及资源的完整作品集网站
- 代码审查及提交日志、规则文件
- Lighthouse及WCAG检查结果

验证条件：
- 必须在无外部框架或构建工具的情况下运行
- 可访问性、性能、SEO得分需达到90分以上
- 所有文本颜色组合需符合WCAG AA对比标准
- 主要功能（如截图查看器）需可通过键盘操作