AI Agent Use Cases
Views —

AI Agent Use Cases

Added today

44All 189

Prompt to Prepare a Shopping Cart from a Recipe Photo

The author reports that Grok Bot receives a recipe photo, organizes the ingredients and quantities, and creates a shopping list by excluding ingredients already available at home.

Grok Bot
Life & Hobbies

1–20 of 189

Marketing & Design

Creating a Portfolio Site Using an AI Coding Agent

This case introduces the process of creating a portfolio site based on HTML, CSS, and JS using an AI coding agent.

Claude Code

How it works

  1. The author organizes the required features and design elements for the site.
  2. They design the basic structure and style using HTML, CSS, and JavaScript.
  3. The author provides rule files and decision logs to the AI coding agent (Claude Code) and proceeds with code reviews and commits step by step.
  4. They self-host necessary resources such as fonts and SVG graphics.
  5. The author checks accessibility, performance, and SEO standards using Lighthouse and WCAG tools.
  6. They deploy the site to Vercel and add a configuration file (vercel.json) to ensure links work correctly.

Results

The author reports that, with the help of the AI coding agent, they completed a portfolio site that runs solely on HTML, CSS, and JS. They state that, even without external frameworks or build tools, they were able to implement the desired features and design through code reviews and commit processes. The accessibility, performance, and SEO scores were also reported to be at a high level.

Notes

The author disclosed that they used Claude Code as the coding agent, but did not share detailed examples of the actual code generation or modification process. They state that all sensitive information, such as client names, was removed. Automation cases such as n8n workflows are organized in a separate folder, but this article focuses on site creation.

Source

GrayTupas/gray-tupas-portfolio (GitHub) Original post ↗

Example prompt · Claude Code

Goal: Use an AI coding agent to create a portfolio site that works with only HTML, CSS, and JavaScript, and meets accessibility, performance, and SEO standards.

Inputs and environment:
- Main features, design elements, and page structure to include in the site (e.g., home, portfolio, etc.)
- Resource files such as fonts and SVG graphics to be self-hosted
- Rule files and decision logs to record the code review and commit process
- Deployment environment: Vercel or other static file server

Implementation and setup steps:
1. Organize the required features and design elements for the site.
2. Design the basic structure and style using HTML, CSS, and JavaScript.
3. Provide rule files and decision logs to an AI coding agent such as Claude Code, and proceed with code reviews and commits at each stage.
4. Self-host necessary resources such as fonts and SVG graphics. Do not use external requests or tracking scripts.
5. Check accessibility (e.g., WCAG AA contrast, keyboard navigation, skip links), performance, and SEO standards using Lighthouse and WCAG tools.
6. Deploy the site to Vercel and add a configuration file (vercel.json) to ensure links work correctly.

Deliverables:
- Completed portfolio site including HTML, CSS, JS files, and resources
- Code review and commit logs, rule files
- Lighthouse and WCAG evaluation results

Verification requirements:
- Must work without external frameworks or build tools
- Accessibility, performance, and SEO scores must be 90 or higher
- All text color pairs must meet WCAG AA contrast standards
- All major features, such as screenshot viewer, must be usable via keyboard