Introduction

"With Genspark, you can create apps even without programming experience."

This is half true and half false. While Genspark is powerful, without following the correct procedures, you will quickly become confused.

In this series, we have covered four issues: Genspark lying, forgetting, embedding bugs, and freezing.

This time, as a compilation, I will introduce a practical workflow for development using Genspark that I established while developing a website. By following this process, even beginners can complete projects without getting frustrated.

Overall AI Development Flow

Conception → Save to AI Drive → Prototype → Specification Creation
→ Quick Reference → Main Development → Continuous Updates

Let's look at each step in detail.

Step 1: Input Your Concept into Chat

First, convey your idea to Genspark. At this stage, minute technical details are not necessary.

How to Convey a Good Concept

I want to create a blog site called "Genspark Development Journey".

Purpose:
- Disseminate information about Genspark and AI technology
- Share development experiences
- Provide useful technical information to readers

Features:
- Main site (genspark-dev.net): Publish articles of 1500-2000 characters
- Hatena Blog integration: Automatically post summaries 3 times a week
- Article Categories: Development Experiences, Genspark Feature Introductions,
  Development Tool Introductions, General AI Technology

Technology Stack:
- Frontend: React + TypeScript + Vite
- Backend: Cloudflare Pages Functions
- Database: Cloudflare D1
- Storage: Cloudflare R2

Budget:
- Approximately $12 per year (Cloudflare free tier + domain fee)

Reference:
- I want to reuse 70-80% of the code from a previously built website

Key Points

  • what: What you want to create
  • why: Purpose/Background
  • how: Technical direction
  • Reference Information: Existing projects or images

It's okay to have vague parts. You can refine them through dialogue with the AI.

Step 2: Save Your Concept to AI Drive

Once your concept is solidified through dialogue with Genspark, immediately save it to GenSpark AI Drive.

Reasons to Save

  1. Even if the chat screen disappears, the concept remains.
  2. You can review it later to confirm your initial intentions.
  3. You can quickly share the situation even in a new chat screen.

Example Save Command

Based on the previous conversation, create a "Project Concept Document" and
save it to the following path:

/Genspark Development Journey/00_AI_Instructions.md

Content to include:
- Project purpose
- Key features
- Technology stack
- Budget and constraints
- Reference information
- AI (your) role
- Development schedule

Confirm the content created by Genspark and provide additional instructions if there are any corrections. Do not blindly trust the "Saved" report; always verify the content.

Step 3: Create a Prototype

Don't try to create something perfect all at once; first, create something that works.

Purpose of the Prototype

  • Confirm technical feasibility
  • Set up the development environment
  • Verify the connection of the overall basic flow

Scope of the Prototype (Example)

[Phase 1: Minimum Prototype]

  • ✅ Initial project setup (React + Vite)
  • ✅ Deployment to Cloudflare Pages
  • ✅ Page to display a single article
  • ✅ Fetch article data from D1

[Not Yet Created]

  • ❌ Admin screen
  • ❌ Hatena Blog integration
  • ❌ Automatic posting function
  • ❌ Complex design

Aim to complete the prototype in 2-3 days.

How to Request Prototype Development

I will create a prototype. Please implement the following features:

1. Create a React + TypeScript + Vite project
2. A page to display one article
3. An API to fetch article data from Cloudflare D1
4. Settings for deployment to Cloudflare Pages

Do not implement everything at once; let's proceed one by one.
First, please start with the initial project setup.

It is important to proceed incrementally.

Step 4: Create Specifications in AI Drive

Once the prototype is working, the next step is to create detailed specifications.

Why Are Specifications Needed?

  1. Genspark forgets: If you change chats, it doesn't remember previous conversations.
  2. Humans also forget: After a week, you'll ask, "What did we decide?"
  3. Change management: To keep a history of specification changes.
  4. New participants: So others can understand the project.

Example Specification Structure

# Project Specifications v1.0

## 1. Project Overview
[Project purpose, background]

## 2. System Architecture
[Technology stack, system configuration diagram]

## 3. Database Design
### 3.1 articles table
| Column Name | Type | Description |
|---------|-----|-----|
| id | INTEGER | Primary Key |
| title | TEXT | Article Title |
| content | TEXT | Body Content |

## 4. API Specifications
### 4.1 Get Article List
- Endpoint: GET /api/articles
- Response: { articles: [...] }

## 5. Screen Transitions
[User flow]

## 6. Development Phases
[Details of Phase 1-5]

Step 5: Create a Quick Reference

As specifications grow large, Genspark will stop loading everything.

Role of the Quick Reference

Even if the specifications reach 50 pages, it is a summary of the most important information condensed into 1-2 pages.

Example Quick Reference

# Quick Reference

## Project Basic Information
- Name: Genspark Development Journey
- URL: genspark-dev.net
- Technology: React + TS + Cloudflare
- Budget: $12/year

## Important Constraints/Decisions
1. Use Hatena Blog only (do not use Twitter)
2. Main site link once every 3 times
3. Articles posted on Monday, Wednesday, Friday
4. Reuse 70-80% of code from web app

## Common Problems and Solutions
### Problem 1: Environment variables cannot be read
→ Set both wrangler.toml and .dev.vars

### Problem 2: D1 connection error
→ Check if binding name is correct (DB)

## Next Tasks
- [ ] Implement article management API
- [ ] Hatena Blog integration
- [ ] Automatic posting function

How to Use the Quick Reference

Execute first in a new chat screen:

Load the following files to understand the project:

1. /Project Name/01_Design_Documents/Quick_Reference.md
2. /Project Name/02_Work_Records/Latest.md

After loading, please provide a summary.

This will help the AI understand the situation within 5 minutes.

Step 6: How to Deal with AI Forgetting

As development progresses, Genspark might say:

Genspark: "I apologize. I don't have the details for that project."

This is normal. Genspark is a creature that forgets, so we need to remind it.

Commands to Remind It

[Pattern 1: Forgot basic information]
"Load /Project Name/01_Design_Documents/Quick_Reference.md and tell me the project overview."

[Pattern 2: Forgot technical details]
"Load the 'Database Design' section of /Project Name/01_Design_Documents/Technical_Specifications_v1.0.md and tell me the structure of the articles table."

[Pattern 3: Forgot past decisions]
"Load /Project Name/02_Work_Records/2025-12-03.md and tell me how the Twitter API issue was resolved."

Partial Loading is Key

If you have it read the entire specifications, important parts will get buried. The trick is to specify and have it read only the necessary parts.

Step 7: Constantly Update Specifications

If specifications change during development, update the specifications immediately.

Timing of Updates

  • ✅ New feature added
  • ✅ Existing feature specifications changed
  • ✅ Important issue resolved
  • ✅ Database schema changed
  • ✅ API specifications changed

How to Update

Please update the specifications:

File: /Project Name/01_Design_Documents/Technical_Specifications_v1.0.md

Update content:
- Add a new `hatena_post_counter` table to the "3. Database Design" section
- Columns: id (INTEGER), counter (INTEGER), updated_at (DATETIME)

After updating, please summarize the changes.

Practical Example: A Project That Started as a Website

I will introduce my actual workflow.

Day 1: Concept and AI Drive Saving

  1. Consulted in chat, "I want to create a web app."
  2. Refined features through dialogue (3 hours)
  3. Saved the concept to /Fortune-telling_Project/00_AI_Instructions.md
  4. 👉 At this point, reset the chat screen once

Day 2: Prototype Creation

  1. Loaded 00_AI_Instructions.md in a new chat screen
  2. Basic React + Vite setup
  3. Created a page to display one fortune-telling result
  4. Successfully deployed to Cloudflare Pages
  5. Saved work records to /Fortune-telling_Project/02_Work_Records/2025-11-01.md

Day 3-5: Specification Creation and Main Development

  1. Created detailed specifications (Technical_Specifications_v1.0.md)
  2. Database design
  3. Implemented Twitter API integration
  4. 👉 At this stage, the AI encountered the "forgot the project" problem
  5. Created a quick reference

Day 6-10: Efficiency with Quick Reference

  1. Resumed development in a new chat screen
  2. Always load the quick reference first
  3. Development progresses efficiently
  4. Updated work records daily

Day 11-: Operations and Continuous Improvement

  1. Deployment completed
  2. If problems occur, record them in the troubleshooting document
  3. If there are specification changes, update the specifications immediately

Summary: 7 Iron Rules of AI Development

7 Iron Rules of AI Development:
  1. Refine your concept in chat and immediately save it to AI Drive - Saving before it disappears is fundamental.
  2. Verify feasibility early with a prototype - Create something that works in 2-3 days.
  3. Manage detailed specifications in AI Drive - A "blueprint" you can refer back to later.
  4. Quickly remind with a quick reference - A 1-2 page summary of key points.
  5. If Genspark forgets, have it read only the necessary parts - Reading the entire text will bury important information.
  6. Update specifications with every change - Outdated information is a source of confusion.
  7. Save work records to AI Drive daily - So it's okay if the chat disappears.

By following this workflow, you can minimize problems such as Genspark "lying," "forgetting," "embedding bugs," and "freezing."

AI development is a collaborative effort between humans and AI. By understanding Genspark's weaknesses and utilizing appropriate tools (Genspark's AI Drive), even beginners can complete full-fledged applications.

Why not use what you've learned in this series to actually try AI development yourself? With Genspark, everything from concept to implementation can be advanced through dialogue with AI.