AvatarStudio Hit-an

Categories

Project write-ups and solution ideas, organized by category. Pick a theme that interests you.

8Categories
190Articles

AI Agent Solutions & Business Automation

Practical LLM-powered solutions — AI-OCR order intake, reply drafting for support tickets, a daily research agent, and AI-driven product concierge

20 articles5 series
Featured

A Daily AI Research Agent — Proposal & Approval Workflow

An AI agent investigates your data every morning and registers improvement proposals. Humans approve before anything runs

AIエージェントClaude Code自動調査承認フロー
Read article

AI Draft Replies for Support Tickets — Automation Where Humans Send

AI generates reply drafts for CRM support tickets. Humans always review and send — safe, realistic CS automation

AI-OCR for Fax Orders — Turning Paper Orders into Data

AI reads fax order sheets arriving by email and registers them as order data. A realistic bridge between paper culture and automation

AI Product Concierge — Interactive Diagnosis & Recommendations

Bringing in-store service to EC: an AI that interviews customers and makes grounded product recommendations

AI Newsletter Creation — Generating Email-Safe HTML

AI drafts the newsletter and generates HTML that won't break. Humans just review and send

View 15 more articles

AI-Powered Site Development & Deployment

Non-engineer-friendly workflow for publishing and managing sites using Claude Code × GitHub × Vercel

9 articles1 series
Featured

Claude Code × GitHub × Vercel Workflow

AI coding with Claude Code or Cursor → Push to GitHub → Auto-deploy with Vercel. From preview environment checks to PR merging, a low-cost setup for running the 'build → verify → publish' cycle. A practical workflow that even non-engineers can start using.

Claude CodeGitHubVercelAIコーディング
Read article

Development Environment Setup

For simple HTML-based pages or single-page landing pages, Cursor is convenient—GUI-based operations make file creation and editing visually intuitive. For projects spanning multiple files or adding API-powered features, I work with Claude Code running in the terminal, where it can oversee the entire project.

GitHub × Vercel Integration Setup

Link GitHub and Vercel, and your site automatically deploys whenever you push to GitHub. Setup is simple—just select your GitHub repository from the Vercel project and sync. Once configured, synchronization happens automatically without you thinking about it.

Utilizing Vercel Services

Vercel is more than just a hosting service. It offers Storage features including databases (KV, Postgres), scheduled execution (QStash), and email sending (Resend). Claude Code can handle coding that leverages these services when instructed. Speed Insight, available for about $10/month, quantifies site performance and usability issues.

Low-Cost Operations Strategy

For small scale, both GitHub and Vercel can barely manage within free tiers. Claude Code starts at about $20/month for modest use, enabling low-cost 'build → publish' workflows. Even at larger scale, Claude Code $100, Cursor $20, Vercel Pro $20 plus some usage fees lets you manage multiple sites and pages.

View 4 more articles

Headless EC with Shopify

Shopify Storefront API, Next.js ISR, member pricing - fast and flexible headless EC site design

65 articles17 series
Featured

Headless EC Site with Shopify

Using Shopify Storefront API as backend with fully customizable Next.js frontend

ShopifyStorefront APIHeadlessNext.js
Read article

Fast Page Loading with Next.js ISR

Improve EC site performance with static generation and automatic updates

Shopify Cart API Integration

Page-transition-free cart operations via Shopify Storefront API

B2B Auto-Discount & Invoice Payment System

Code-change-free B2B pricing using customer tags and coupon integration

Cloudinary Image Delivery Optimization

Solving headless EC image load problems with Cloudinary

View 60 more articles

HubSpot CRM/CMS Setup & External Integration

From HubSpot implementation to custom API integrations beyond standard connectors and external tool integrations

45 articles11 series
Featured

HubSpot CRM/CMS Setup & External Integration

Custom API integrations for fine-tuning and capabilities beyond standard connectors

HubSpotShopify連携CRMMA
Read article

HubSpot CMS Implementation Guide

Website building, operations, and marketing integration with CMS Hub Professional + Marketing Hub Professional

Automation Design

Business automation with HubSpot workflows

HubDB × Spreadsheet Sync

Automatically sync spreadsheet data to HubDB using GAS

Birthday Coupon Campaigns

B2C birthday marketing with HubSpot workflows

View 40 more articles

POS & Omnichannel Integration

Unifying online and offline customer data for seamless customer experience

25 articles6 series
Featured

Customer Data Strategy

Secure customer data management with Shopify × POS

顧客データShopifyセキュリティ設計思想
Read article

POS Sync Architecture

Data synchronization design between Shopify and POS

Point to Coupon Conversion

Converting POS points to Shopify coupons

Point Balance Retrieval

Real-time point balance retrieval from POS

Customer Matching

Matching online and offline customers

View 20 more articles

Accounting & Invoice Automation

Auto-generate invoices from spreadsheets with idempotency control and retry mechanisms

11 articles1 series
Featured

Spreadsheet as the Central Input Hub

Design approach to automatically generate invoices from spreadsheets without changing existing workflows

スプレッドシートGAS業務フロー自動化
Read article

Security Design for Safe Operations

Defense-in-depth security architecture that small businesses can trust

System Resilient to Retries

Duplicate prevention and auto-retry design for easy recovery from operational errors

Smooth Handling of Large Data Volumes

Design for efficiently processing hundreds of records during month-end aggregation

Pre-Production Testing Features

Dry-run mode and input validation for testing without risking production data

View 6 more articles

Order Management Integration

Bidirectional sync with order management systems and secure OAuth-based API integration

6 articles1 series
Featured

EC Order Management Automation

System design for automating order processing between Shopify and NextEngine

EC自動化受注管理NextEngineWebhook
Read article

Order Data Integration

Automatic integration to order management systems via Webhook and CSV conversion

Fulfillment Notification Automation

Automatically sync tracking numbers and carrier info to Shopify

Spreadsheet Integration

Export order data to Google Sheets and sync inventory

Reliability Design

Error resilience through token refresh, locking, and idempotency

View 1 more article

Other Solutions & Ideas

Business improvement and problem-solving ideas and project examples that don't fit specific categories

9 articles2 series
Featured

Internal AI Assistant Implementation Overview

Integrate internal wiki and support history with RAG-based AI chat to achieve 'consistent quality responses for everyone.' We introduce the overall picture of the project, including eliminating dependency on specific staff, centralizing information, and practical AI utilization points.

社内WikiRAGAIアシスタントカスタマーサポート
Read article

RAG System Design Approach

Why we chose RAG (Retrieval-Augmented Generation). The difference from simple ChatGPT usage, the importance of being able to cite sources, and an explanation of how RAG works that even non-engineers can understand.

Integrating Distributed Data with Vector Search

Integrating multiple data sources—manuals, support history, estimate data—into a single database. We introduce the mechanism that enables cross-searching all data in one query and the concept of vector search.

AI Chat UI/UX Design and Operations

Chat widget available on every page, friendly design, clear disclaimers, and transparency through audit logs. We explain the UI/UX design and operational points aimed at creating an AI chat that people actually use.

Cost Optimization Through Differential Sync

Processing thousands of records every time takes both time and money. We introduce the differential sync mechanism that uses content hashing to detect changes and reprocesses only what has changed.

View 4 more articles