bild-styleflow-online-clothing-store

Build StyleFlow: An Online Clothing Store with an Agentic Workflow

In the previous articles, we learned how AI automation, agentic workflows, Claude, VS Code, Skills, tools, APIs, databases, MCP, and Git can work together.

Now we are going to put these ideas into practice.

We will build:

StyleFlow — a modern online clothing store developed with Claude Code and an agentic WAT workflow.

WAT means:

W = Workflow
A = Agent
T = Tools

Instead of asking an AI chatbot to generate an entire application from one enormous prompt, we will create a structured development environment.

Our project will contain:

Product Goal
     +
Workflow
     +
Agent Instructions
     +
Specialist Skills
     +
Development Tools
     +
Testing
     +
Human Review

Claude Code will later operate inside this environment.

The important difference is that we are not simply asking:

“Create an online clothing store.”

We are defining what should be built, how the agent should work, which specialist instructions it should use, what it is allowed to do, and how its work should be tested and reviewed.

This article follows the project exactly as we build it in VS Code.

1. What We Are Going to Build

StyleFlow Version 1 will eventually contain:

StyleFlow
│
├── Home page
├── Product catalogue
├── Categories
├── Product details
├── Search
├── Shopping cart
├── Checkout
├── Orders
├── Basic admin area
├── Database
└── Automated tests

The application should work on desktop and mobile.

For this first application version, we will not implement:

Real payments
Production deployment
Complex customer authentication
Multi-tenant SaaS
Subscription billing

Those belong to later development stages.

Before Claude writes the application, however, we need to build its working environment.

2. Understanding the StyleFlow WAT Environment

Our development model is:

WORKFLOW
    ↓
AGENT
    ↓
TOOLS
    ↓
ACTION
    ↓
RESULT
    ↓
FEEDBACK
    ↓
AGENT DECIDES WHAT TO DO NEXT

For StyleFlow:

Workflow
   │
   ├── PRODUCT.md
   ├── WORKFLOW.md
   └── project rules
        ↓
Agent
   │
   └── Claude Code
        ↓
Skills
   │
   ├── UI Design
   ├── Frontend
   ├── Backend
   ├── Database
   ├── Testing
   ├── Security
   └── Deployment
        ↓
Tools
   │
   ├── Files
   ├── Terminal
   ├── Python
   ├── Database
   ├── Tests
   └── Git

The first thing we will create is therefore not the store itself.

We will create the environment that Claude will later use to build the store.

3. Create the StyleFlow Project Folder

On Windows, create a folder for the project.

For this tutorial we use:

C:\Utvecklingprogram\AI\styleflow-wat

You can use another location on your own computer.

Now start Visual Studio Code.

Select:

File
↓
Open Folder...

Open:

C:\Utvecklingprogram\AI\styleflow-wat

If this is a new project, the VS Code Explorer may show only:

STYLEFLOW-WAT

with nothing underneath it.

That is exactly what we want.

We will now build the WAT environment ourselves, one file at a time.

4. Create PRODUCT.md

In VS Code Explorer:

Right-click STYLEFLOW-WAT.
Select New File.
Enter:

PRODUCT.md

Paste:

# StyleFlow Product Definition

## Product

StyleFlow is a modern online clothing store.

Version 1 is an MVP that demonstrates how an agentic
development workflow can build a real web application.

## Business Goal

Create an elegant, responsive online clothing store where
customers can browse products, search the catalogue, view
product details, add products to a shopping cart, complete
checkout, and create orders.

The application should also provide a basic admin area for
viewing products and orders.

## Target Users

The first version has two primary users:

1. Customer
2. Store administrator

## Customer Features

Customers should be able to:

- open the home page
- browse products
- browse categories
- search products
- view product details
- choose a size
- choose quantity
- add products to the cart
- update the cart
- remove products from the cart
- proceed to checkout
- enter customer information
- create an order
- receive an order reference
- view an order confirmation

## Admin Features

The basic admin area should allow:

- viewing products
- viewing orders
- viewing basic inventory information

Version 1 does not require a complete production
administration system.

## Product Data

Products should support:

- name
- description
- price
- category
- stock
- image
- active/inactive status

## Order Data

Orders should support:

- customer name
- email
- phone
- address information
- order items
- quantity
- selected size
- unit price
- total
- order reference
- order status

## User Interface

The application should be:

- modern
- elegant
- clean
- responsive
- mobile friendly
- easy to navigate

The visual style should be appropriate for a modern
clothing store.

## Technical Direction

Prefer a simple architecture suitable for an MVP.

A possible stack is:

- Python
- Flask
- SQLAlchemy
- SQLite
- Jinja templates
- HTML
- CSS
- minimal JavaScript where necessary
- Pytest

Claude may recommend reasonable changes before
implementation.

## Version 1 Boundaries

Do not implement:

- real payment processing
- public production deployment
- complex customer authentication
- multi-tenant SaaS functionality
- subscription billing

These belong to later versions.

## Definition of Done

Version 1 is complete when:

- the application starts locally
- products can be displayed
- search works
- product details work
- cart operations work
- checkout validates input
- an order can be created
- order data is persisted
- an order reference is generated
- the basic admin area works
- important automated tests pass
- the interface works on desktop and mobile
- known security limitations are documented
- README contains instructions for running the project

PRODUCT.md answers:

What are we building?

5. Create WORKFLOW.md

Create another file in the project root:

WORKFLOW.md

Paste:

# StyleFlow Agentic Development Workflow

## Purpose

This file defines how the StyleFlow development agent
should approach implementation work.

## Development Workflow

For substantial tasks, follow this process:

1. Understand the requested goal.
2. Read PRODUCT.md.
3. Read CLAUDE.md.
4. Inspect relevant Skills.
5. Inspect the existing project before changing it.
6. Create or update an implementation plan when needed.
7. Make the smallest reasonable set of changes.
8. Run relevant automated tests.
9. Inspect failures.
10. Determine the likely root cause.
11. Correct the implementation.
12. Run the tests again.
13. Review security implications.
14. Update documentation when necessary.
15. Report what changed and any remaining limitations.

## Agentic Feedback Loop

After creating a plan, work in a continuous feedback loop:

Plan
↓
Act
↓
Observe
↓
Evaluate
↓
Correct if necessary
↓
Test
↓
Continue or finish

Do not consider a task complete simply because code
was generated.

Inspect the result and decide what should happen next
based on what actually occurred.

## Human Approval Boundaries

Claude may make normal development decisions, but human
approval is required before:

- public deployment
- real payment integration
- destructive database operations
- deleting important project data
- changing production infrastructure
- exposing or transmitting secrets
- creating paid external resources
- performing irreversible external actions

Agentic development gives the agent autonomy within
defined boundaries. It does not give the agent unlimited
control.

## Testing and Correction

After implementing functionality:

1. Run the relevant tests.
2. Inspect the results.
3. If a test fails, identify the likely root cause.
4. Correct the implementation when appropriate.
5. Run the test again.
6. Repeat until the functionality works or the remaining
   problem requires human input.

Do not modify a correct test merely to make incorrect
code pass.

## Security

During development:

- never hard-code real secrets
- never commit passwords, API keys, or tokens
- validate user-controlled input
- calculate sensitive values such as product prices
  on the server
- do not expose sensitive configuration
- use environment variables for secrets when required

Use the security-review Skill for a more complete
security review.

## Completion

A development task is complete only when:

- requested functionality is implemented
- relevant tests pass or failures are clearly explained
- important security issues are reported
- documentation is updated when necessary
- the final result is summarized

WORKFLOW.md answers:

How should the work proceed?

Notice that we have not added Git commands here.

Git exists as a development tool, but the agent does not need to run git diff simply because this workflow file exists.

We will create our Git repository ourselves later in this article.

6. Create CLAUDE.md

Create:

CLAUDE.md

Paste:

# Claude Instructions for StyleFlow

You are the development agent for the StyleFlow project.

## Primary Objective

Build and improve StyleFlow according to:

- PRODUCT.md — defines what we are building
- WORKFLOW.md — defines how the agentic development process should work
- relevant Skills under the skills/ folder

## Before Making Changes

Before substantial implementation:

1. Read PRODUCT.md.
2. Read WORKFLOW.md.
3. Inspect the existing project.
4. Inspect the Skills relevant to the current task.
5. Understand the requested goal.
6. Create a short implementation plan when appropriate.

Do not assume that files, features, tools, or configuration
exist without checking them first.

## Development Principles

Prefer:

- simple solutions
- readable code
- maintainable architecture
- clear naming
- focused modules
- reusable logic
- server-side validation
- automated testing

Avoid unnecessary complexity.

Do not add a framework, library, service, or dependency
unless it provides a clear benefit.

## Technical Direction

For StyleFlow Version 1, the preferred stack is:

- Python
- Flask
- SQLAlchemy
- SQLite
- Jinja templates
- HTML
- CSS
- minimal JavaScript where necessary
- Pytest

If another approach would provide a significant advantage,
explain the reason before making a major architectural
change.

## Skills

Specialist instructions are stored under:

skills/

Use the relevant Skill when performing specialized work.

Examples:

UI design:
skills/ui-design/SKILL.md

Frontend development:
skills/frontend-development/SKILL.md

Backend development:
skills/backend-development/SKILL.md

Database design:
skills/database-design/SKILL.md

Testing:
skills/testing/SKILL.md

Security review:
skills/security-review/SKILL.md

Deployment:
skills/deployment/SKILL.md

A task may require more than one Skill.

## Tool Use

Use available development tools when they help accomplish
or verify the goal.

Examples include:

- reading and writing project files
- terminal commands
- Python
- application execution
- database operations
- automated tests
- Git

Do not use a tool simply because it is available.

Choose tools according to the current task and inspect
their results before deciding what to do next.

## Agentic Behavior

Do not simply generate code and stop.

Follow the workflow:

Plan
↓
Act
↓
Observe
↓
Evaluate
↓
Correct when necessary
↓
Test
↓
Continue or finish

The result of one action should influence the next decision.

If something fails, investigate the cause rather than
blindly repeating the same action.

## When Tests Fail

When a relevant test fails:

1. Read the failure.
2. Identify the affected behavior.
3. Inspect the relevant implementation.
4. Determine the likely root cause.
5. Make a focused correction.
6. Run the relevant test again.

Do not silently ignore failing tests.

Do not change a correct test merely to make incorrect
code pass.

## Important Restrictions

Do not:

- implement real payment processing in Version 1
- deploy publicly without explicit human approval
- expose secrets
- commit credentials or API keys
- perform destructive database operations without approval
- delete important project data without approval
- create paid external resources without approval
- perform irreversible external actions without approval

## Security

Treat user-controlled data as untrusted.

Validate important data on the server.

Never trust product prices supplied by the browser.

During checkout, obtain authoritative product information
and prices from the database and calculate totals
server-side.

Use environment variables for secrets when required.

Use the security-review Skill when performing a security
review.

## Human Role

The human developer remains responsible for important
decisions and final approval.

Ask for clarification or approval when:

- requirements are materially ambiguous
- a major architecture change is proposed
- an action could be destructive
- an external paid service would be created
- production deployment is involved
- real payments are involved

Normal low-risk implementation decisions may be made
autonomously within PRODUCT.md, WORKFLOW.md, and these
instructions.

## Reporting

After completing substantial work, summarize:

- what was implemented
- files created
- files modified
- important technical decisions
- Skills used
- tests run
- test results
- security concerns
- known limitations
- recommended next step

We now have three different instruction layers:

PRODUCT.md
     ↓
WHAT are we building?

WORKFLOW.md
     ↓
HOW should work proceed?

CLAUDE.md
     ↓
HOW should Claude behave?

7. Create README.md

Create:

README.md

Paste:

# StyleFlow

StyleFlow is a learning project demonstrating how to
build a modern online clothing store using an agentic
development workflow.

The project uses the WAT concept:

- Workflow
- Agent
- Tools

## Current Status

The StyleFlow WAT development environment has been created.

The actual StyleFlow application will be implemented in
the next development stage with Claude Code.

## Planned Version 1 Features

- product catalogue
- categories
- product search
- product details
- shopping cart
- checkout
- order creation
- basic admin area
- database persistence
- automated tests
- responsive interface

## Development Instructions

See:

- PRODUCT.md
- WORKFLOW.md
- CLAUDE.md
- skills/

## Important

This is currently a development and learning project.

It does not include real payments or production deployment.

Claude can later update the README with the actual installation and application run instructions.

8. Create .gitignore

Create:

.gitignore

Paste:

# Python
__pycache__/
*.py[cod]
*.pyo

# Virtual environments
.venv/
venv/

# Environment variables and secrets
.env
.env.*

# Database
*.db
*.sqlite
*.sqlite3

# Testing
.pytest_cache/
.coverage
htmlcov/

# IDE / OS
.vscode/
.DS_Store
Thumbs.db

# Logs
*.log

This helps prevent local development files, databases and secrets from accidentally being committed.

However, .gitignore is not a substitute for careful secret handling.

Never put real passwords, API keys or tokens into committed source files.

9. Create the Skills Folder

Now right-click STYLEFLOW-WAT and select:

New Folder

Name it:

skills

Inside skills, create seven folders:

ui-design
frontend-development
backend-development
database-design
testing
security-review
deployment

Inside each folder create a file named exactly:

SKILL.md

Use uppercase SKILL.

Our structure now begins to look like:

skills/
│
├── ui-design/
│   └── SKILL.md
│
├── frontend-development/
│   └── SKILL.md
│
├── backend-development/
│   └── SKILL.md
│
├── database-design/
│   └── SKILL.md
│
├── testing/
│   └── SKILL.md
│
├── security-review/
│   └── SKILL.md
│
└── deployment/
    └── SKILL.md

Now we give each Skill its specialist instructions.

10. Create the UI Design Skill

Open:

skills/ui-design/SKILL.md

Paste:

# UI Design Skill

## Purpose

Use this Skill when designing or reviewing the StyleFlow
user interface.

## Design Goal

StyleFlow should feel like a modern, elegant clothing
store.

The interface should be:

- clean
- premium
- simple
- responsive
- easy to understand
- visually consistent

## Guidelines

Use:

- clear visual hierarchy
- consistent spacing
- readable typography
- strong product imagery
- consistent buttons
- clear navigation
- accessible form labels
- responsive layouts
- useful empty states
- clear validation messages

Avoid:

- clutter
- excessive animation
- unnecessary visual effects
- inconsistent spacing
- tiny touch targets
- confusing navigation

## Responsive Design

Review important pages at:

- desktop width
- tablet width
- mobile width

Important mobile flows include:

- navigation
- product browsing
- product details
- cart
- checkout

## Completion Check

Before considering UI work complete, check:

- visual consistency
- readability
- mobile usability
- forms
- buttons
- navigation
- error states

11. Create the Frontend Development Skill

Open:

skills/frontend-development/SKILL.md

Paste:

# Frontend Development Skill

## Purpose

Use this Skill for HTML, Jinja templates, CSS,
browser interactions, and responsive frontend work.

## Principles

Prefer:

- semantic HTML
- reusable templates
- simple CSS
- progressive enhancement
- minimal JavaScript
- accessible forms
- responsive layouts

## Templates

Use a shared base template for common elements such as:

- document structure
- header
- navigation
- footer
- shared messages

Avoid duplicating the same markup across many pages.

## Forms

Forms should:

- have labels
- use appropriate input types
- show understandable validation messages
- preserve user input when practical
- support keyboard navigation

Client-side validation may improve usability, but
server-side validation remains required.

## Product Pages

Product interfaces should clearly display:

- product name
- image
- description
- price
- size
- stock information
- quantity
- add-to-cart action

## Cart and Checkout

The user should always understand:

- what is in the cart
- quantity
- selected size
- subtotal
- what action happens next

## Completion Check

Test important pages on desktop and mobile before
considering frontend work complete.

12. Create the Backend Development Skill

Open:

skills/backend-development/SKILL.md

Paste:

# Backend Development Skill

## Purpose

Use this Skill for Flask routes, services, business
logic, validation, sessions, and server-side behavior.

## Principles

Keep routes focused.

Separate business logic into services when doing so
improves readability or testability.

Prefer:

- explicit validation
- clear error handling
- small functions
- predictable behavior
- reusable services
- meaningful names

## Validation

Never rely only on browser validation.

Validate server-side:

- required fields
- quantities
- product existence
- product availability
- customer information
- allowed values

## Shopping Cart

The server must not trust a product price submitted
by the browser.

During checkout:

1. read product identifiers from the cart
2. reload products from the database
3. use database prices
4. calculate totals server-side

## Orders

Order creation should be handled consistently.

Prefer a transaction so that an incomplete order is
not partially saved.

## Errors

Do not expose:

- stack traces
- secrets
- database credentials
- internal implementation details

to normal users.

## Completion Check

Backend functionality should have relevant automated
tests before it is considered complete.

13. Create the Database Design Skill

Open:

skills/database-design/SKILL.md

Paste:

# Database Design Skill

## Purpose

Use this Skill when designing or modifying StyleFlow
database models and persistence.

## Version 1 Entities

The initial model may include:

- Category
- Product
- Order
- OrderItem

Do not introduce unnecessary entities.

## Product

A Product should support information such as:

- id
- name
- description
- price
- category
- stock
- image
- active status

## Order

An Order should support:

- id
- order reference
- customer information
- total
- status
- creation time
- order items

## OrderItem

Preserve historical purchase information.

An OrderItem should store information such as:

- product id
- product name
- unit price at purchase time
- selected size
- quantity

Do not rely on the current Product price to reconstruct
the historical order total.

## Money

Use an appropriate decimal representation for money.

Avoid floating-point arithmetic for financial values.

## Data Integrity

Use:

- required fields
- foreign keys
- sensible constraints
- transactions where appropriate

## Future Direction

Keep the persistence layer reasonably structured so
SQLite can later be replaced by PostgreSQL without
rewriting the entire application.

14. Create the Testing Skill

Open:

skills/testing/SKILL.md

Paste:

# Testing Skill

## Purpose

Use this Skill whenever creating, changing, or reviewing
StyleFlow functionality.

Testing is an important part of the agentic workflow.

Claude should not consider functionality complete simply
because code was generated.

The implementation must be tested and the results evaluated.

## Testing Framework

For StyleFlow Version 1, use:

- Pytest
- Flask test client
- isolated test database where appropriate

Keep the testing setup simple and maintainable.

## Testing Principles

Tests should verify important application behavior.

Prefer tests that are:

- focused
- readable
- repeatable
- independent
- deterministic
- easy to understand

Avoid tests that depend unnecessarily on:

- execution order
- external services
- production data
- internal implementation details
- manually prepared database state

## Important Test Areas

Test important behavior including:

- home page
- product listing
- categories
- product search
- product details
- add to cart
- update cart
- remove from cart
- invalid quantities
- checkout validation
- order creation
- invalid product requests
- database persistence
- basic admin pages

## Test Structure

Tests should be stored under:

tests/

A possible structure is:

tests/
├── conftest.py
├── test_home.py
├── test_products.py
├── test_search.py
├── test_cart.py
├── test_checkout.py
├── test_orders.py
└── test_admin.py

This structure is a guideline.

Create only the test files that are useful for the
implementation.

## Test Fixtures

Use fixtures where they improve test clarity.

Possible fixtures include:

- application
- test client
- isolated database
- sample category
- sample product
- sample order

Tests should not depend on production data.

## Test Behavior, Not Implementation Details

Prefer tests that verify observable application behavior.

Avoid unnecessary dependence on internal implementation
details.

For example, test that:

- a product appears on the catalogue page
- search returns the expected product
- a cart item can be added
- invalid checkout data is rejected
- a valid checkout creates an order

rather than testing private implementation details.

## When a Test Fails

Follow this process:

1. Read the complete failure.
2. Identify which behavior failed.
3. Inspect the relevant implementation.
4. Determine the likely root cause.
5. Fix the implementation.
6. Run the relevant test again.
7. Run the broader suite when appropriate.

Do not weaken a correct test simply to make it pass.

## Regression Tests

When fixing an important bug, add a regression test
when practical.

The regression test should demonstrate that the bug does
not return later.

## Completion

After testing, report:

- tests run
- passed tests
- failed tests
- unresolved problems

Functionality should not be considered complete when
important relevant tests are still failing without a
clear explanation.

The important distinction is:

skills/testing/SKILL.md
        ↓
Instructions about HOW Claude should test

tests/
        ↓
Actual executable test files

The Skill is not itself a test.

15. Create the Security Review Skill

Open:

skills/security-review/SKILL.md

Paste:

# Security Review Skill

## Purpose

Use this Skill to review StyleFlow for common security
problems.

## Review Areas

Check:

- input validation
- authentication
- authorization
- sessions
- CSRF protection
- secrets
- database access
- user-controlled data
- error handling
- admin routes
- unsafe redirects
- dependency risks

## Secrets

Never place real:

- passwords
- API keys
- tokens
- secret keys

in committed source code.

Use environment variables where appropriate.

## Prices

Never trust prices supplied by the browser.

Reload products from the database and calculate totals
server-side.

## Admin Area

Before production use, admin functionality must have
proper authentication and authorization.

A development-only admin page must be clearly documented
as such.

## User Input

Treat all user-controlled input as untrusted.

Validate it before using or storing it.

## Security Review Output

Report findings by severity:

1. Critical
2. High
3. Medium
4. Low

Explain:

- the issue
- why it matters
- the affected area
- the recommended correction

Do not make destructive or infrastructure-level security
changes without approval.

16. Create the Deployment Skill

Open:

skills/deployment/SKILL.md

Paste:

# Deployment Skill

## Purpose

Use this Skill when preparing StyleFlow for deployment.

## Version 1 Rule

Do not publicly deploy StyleFlow Version 1 without
explicit human approval.

## Before Deployment

Verify:

- automated tests pass
- production configuration is separate from development
- debug mode is disabled
- secrets use environment variables
- database configuration is appropriate
- dependencies are documented
- security review has been completed
- README contains setup instructions

## Deployment Workflow

Use:

Code
↓
Tests
↓
Security Review
↓
Build / Prepare
↓
Staging
↓
Human Approval
↓
Production

## Production

Do not assume the Flask development server is suitable
for production.

Production deployment should use an appropriate production
server and hosting configuration.

## External Actions

Do not:

- create paid infrastructure
- change DNS
- publish publicly
- modify production databases
- create external accounts

without explicit human approval.

The deployment Skill is useful even though we are not deploying yet.

It tells the agent where its authority stops.

17. Create docs and tests

Now create two folders in the project root:

docs

and:

tests

At this stage both can remain empty.

Later, docs/ may contain files such as:

docs/
├── architecture.md
├── decisions.md
└── security-review.md

And Claude may create actual automated tests such as:

tests/
├── conftest.py
├── test_home.py
├── test_products.py
├── test_search.py
├── test_cart.py
├── test_checkout.py
├── test_orders.py
└── test_admin.py

We are deliberately not creating those test files manually yet.

Claude will create appropriate tests when it implements the application.

18. Verify the Complete WAT Structure

Your VS Code Explorer should now look approximately like:

STYLEFLOW-WAT
│
├── docs/
│
├── skills/
│   ├── backend-development/
│   │   └── SKILL.md
│   │
│   ├── database-design/
│   │   └── SKILL.md
│   │
│   ├── deployment/
│   │   └── SKILL.md
│   │
│   ├── frontend-development/
│   │   └── SKILL.md
│   │
│   ├── security-review/
│   │   └── SKILL.md
│   │
│   ├── testing/
│   │   └── SKILL.md
│   │
│   └── ui-design/
│       └── SKILL.md
│
├── tests/
│
├── .gitignore
├── CLAUDE.md
├── PRODUCT.md
├── README.md
└── WORKFLOW.md

This is an important milestone.

The WAT architecture is no longer only a diagram.

It physically exists inside our VS Code project:

                   STYLEFLOW
                       │
         ┌─────────────┼─────────────┐
         ▼             ▼             ▼
    PRODUCT.md    WORKFLOW.md    CLAUDE.md
         │             │             │
         └─────────────┼─────────────┘
                       ▼
                  CLAUDE AGENT
                       │
                       ▼
                     SKILLS
                       │
      ┌────────────────┼────────────────┐
      ▼                ▼                ▼
     UI             Backend          Testing
      │                │                │
      └────────────────┼────────────────┘
                       ▼
                     TOOLS
                       │
      ┌────────────────┼────────────────┐
      ▼                ▼                ▼
    Files           Terminal           Git
                       │
                       ▼
                     RESULT

19. Open the VS Code Terminal

Now select:

Terminal
↓
New Terminal

PowerShell should open at the bottom.

For our project it shows:

PS C:\Utvecklingprogram\AI\styleflow-wat>

You can verify the directory with:

pwd

If necessary:

cd C:\Utvecklingprogram\AI\styleflow-wat

We are now ready to prepare Claude Code.

20. Check Whether Claude Code Is Installed

Run:

claude --version

If Claude Code is installed and Windows can find it, you should receive a version.

During this StyleFlow project our installed version reported:

2.1.268 (Claude Code)

Your version may be newer.

If instead you see:

claude : The term 'claude' is not recognized...

Claude Code either has not been installed or Windows cannot find its executable.

21. Install Claude Code on Windows

Claude Code can be installed on Windows with WinGet.

Run:

winget install Anthropic.ClaudeCode

Wait until installation completes.

Then close VS Code completely and reopen it.

This matters because an already-running VS Code process may still have the old Windows PATH.

Open styleflow-wat again and run:

claude --version

If it displays a version, installation is working.

Anthropic also provides official Claude Code installation and setup documentation. Because installation methods and supported access can change, readers should check the current documentation when following this tutorial.

Claude Code documentation

22. Troubleshooting: Installed but `claude` Is Not Found

We encountered this exact problem while creating StyleFlow.

WinGet reported Claude Code as installed, but PowerShell initially could not find:

claude

First check:

winget list Anthropic.ClaudeCode

If Claude Code appears there, don’t immediately reinstall it.

Try closing VS Code completely and reopening it.

If the problem remains:

where.exe claude

If Windows still cannot locate it, search the WinGet package directory:

Get-ChildItem "$env:LOCALAPPDATA\Microsoft\WinGet\Packages" -Recurse -Filter "claude.exe" -ErrorAction SilentlyContinue | ForEach-Object { $_.FullName }

Test the returned executable directly:

& "FULL-PATH-TO-CLAUDE.EXE" --version

If that works, Claude Code itself is installed.

The problem is the Windows PATH.

Make sure the directory containing claude.exe is included in your User PATH, then restart VS Code.

Finally:

claude --version

In our project this eventually returned:

2.1.268 (Claude Code)

23. Claude Desktop and Claude Code Are Different

This is an important point we discovered while building the project.

Having the Claude Desktop application installed does not by itself mean that the claude CLI can use your account.

Claude Desktop and Claude Code are related products, but Claude Code has its own supported authentication and account requirements.

When we started Claude Code, it presented an authentication choice for eligible Claude subscriptions/API access.

Therefore, before relying on this tutorial, check Anthropic’s current Claude Code access requirements.

Claude Code with Claude plans

At the time we prepared this project, our Claude Desktop account was on the Free plan, so we stopped before allowing Claude Code to begin modifying StyleFlow.

That was intentional.

Our WAT environment does not depend on immediately purchasing or configuring external access.

24. Create the First Git Checkpoint Before Claude Changes Anything

This step is particularly useful in an agentic project.

Before giving an agent permission to create many files, we save the clean starting environment in Git.

In the VS Code terminal run:

git init

Then:

git status

Git should show our files as untracked.

Add them:

git add .

Check:

git status

Before committing, verify that the important files are present:

.gitignore
CLAUDE.md
PRODUCT.md
README.md
WORKFLOW.md

skills/backend-development/SKILL.md
skills/database-design/SKILL.md
skills/deployment/SKILL.md
skills/frontend-development/SKILL.md
skills/security-review/SKILL.md
skills/testing/SKILL.md
skills/ui-design/SKILL.md

Notice that empty docs/ and tests/ folders may not appear.

That is normal because Git does not track empty directories.

Now create the first commit:

git commit -m "Create StyleFlow WAT environment V1"

Rename the branch to main:

git branch -M main

Verify:

git log -1 --oneline
git status

In our project the first commit became:

c030ba8 Create StyleFlow WAT environment V1

and:

On branch main
nothing to commit, working tree clean

We now have our first stable checkpoint:

STYLEFLOW WAT V1
        │
        ├── Product definition
        ├── Workflow
        ├── Claude instructions
        ├── Seven Skills
        ├── README
        └── Git protection

Importantly, V1 does not mean the clothing store is finished.

V1 is our agentic development environment.

25. Create the GitHub Repository

Now create a new empty GitHub repository named:

styleflow-wat

Do not initialize it with another README or .gitignore, because those files already exist locally.

Then connect the local repository.

For our project:

git remote add origin https://github.com/mehzan07/styleflow-wat.git

Push:

git push -u origin main

Git should report something similar to:

main -> main
branch 'main' set up to track 'origin/main'

The source code for this tutorial is available here:

StyleFlow WAT source code on GitHub

This gives us an important safety point before agentic development begins:

Human creates WAT environment
        ↓
Review files
        ↓
Git commit
        ↓
Push V1 to GitHub
        ↓
NOW allow the AI agent to work

If later changes go wrong, we still have our clean V1 checkpoint.

26. Start Claude Code — Only After the Environment Exists

Once you have eligible Claude Code access and authentication configured, return to:

C:\Utvecklingprogram\AI\styleflow-wat

Then run:

claude

Claude Code starts inside the StyleFlow project.

Conceptually:

VS Code
   │
   └── styleflow-wat/
          │
          ├── PRODUCT.md
          ├── WORKFLOW.md
          ├── CLAUDE.md
          ├── README.md
          ├── skills/
          ├── docs/
          └── tests/
                │
                ▼
            Claude Code

This explains why we created the files before starting Claude.

Claude can now inspect the actual project instead of us trying to explain everything repeatedly in one prompt.

27. First Let Claude Understand the Project

Do not immediately say:

Build StyleFlow.

First test whether Claude understands our environment.

Enter:

Read PRODUCT.md, WORKFLOW.md and CLAUDE.md.

Inspect the skills/ directory and the current project structure.

Do not implement anything yet.

Tell me:

1. what StyleFlow is
2. what the Version 1 application goal is
3. which Skills are available
4. which tools you can use
5. what important restrictions apply
6. what you would build first
7. any problems or contradictions you find in the project instructions

This is our first real WAT checkpoint.

We want to establish:

Did the agent understand PRODUCT.md?
                 ↓
Did it understand WORKFLOW.md?
                 ↓
Did it understand CLAUDE.md?
                 ↓
Did it find the Skills?
                 ↓
Did it understand the boundaries?
                 ↓
YES
                 ↓
Continue

If Claude misunderstands something, correct the instructions before it creates dozens of application files.

28. Ask Claude to Create the Implementation Plan

Once Claude correctly understands the project, ask:

Create an implementation plan for StyleFlow Version 1.

Use PRODUCT.md, WORKFLOW.md, CLAUDE.md
and the relevant Skills.

Decide on an appropriate simple architecture.

Explain:

- backend technology
- frontend approach
- database
- project structure
- testing approach
- implementation phases

Do not implement anything yet.

Do not deploy anything.

Claude may recommend something similar to:

Python
   +
Flask
   +
SQLAlchemy
   +
SQLite
   +
Jinja
   +
HTML / CSS
   +
Pytest

That would fit our preferred Version 1 architecture, but Claude should still inspect the project and reason about the requirements.

29. Human Review Before Implementation

Read Claude’s plan before approving it.

Check whether it respects:

Simple architecture
Maintainable code
Persistent database
Responsive design
Automated testing
No real payments
No public deployment
No committed secrets

This gives us:

Human defines goal
        ↓
Agent reads environment
        ↓
Agent proposes plan
        ↓
Human reviews
        ↓
       Approved?
       /       \
     Yes        No
      ↓          ↓
   Build     Revise Plan

This is a human-in-the-loop agentic workflow.

Agentic development does not mean removing the developer.

It means giving the agent useful autonomy inside controlled boundaries.

30. The Main StyleFlow Build Prompt

Only after reviewing and approving the plan should we give Claude the major implementation goal:

The implementation plan is approved.

Read PRODUCT.md, WORKFLOW.md and CLAUDE.md again when needed.

Build StyleFlow Version 1.

Use the relevant Skills in the project.

Implement:

- product catalogue
- categories
- product details
- product search
- shopping cart
- checkout
- order creation
- basic admin pages
- persistent database storage
- automated tests
- responsive user interface

Make reasonable technical decisions yourself.

Prefer simple, maintainable solutions.

Run tests after implementation.

If tests fail:

1. inspect the failure
2. determine the likely root cause
3. correct the implementation
4. run the tests again

Continue this test-and-correct cycle when reasonable.

Do not add real payments.

Do not deploy publicly.

Do not expose or commit secrets.

When finished, report:

- files created
- files modified
- architecture decisions
- Skills used
- tests run
- test results
- security concerns
- known limitations
- recommended next step

Notice what we did not tell Claude:

Create file A
Then create file B
Then write function X
Then add class Y

Instead we provided:

GOAL
     +
CONSTRAINTS
     +
ACCEPTANCE CRITERIA
     +
SKILLS
     +
TOOLS
     +
FEEDBACK

Claude can reason about how to reach the goal within those boundaries.

That is the central idea behind our agentic development workflow.

31. What Will Happen Next

At this point our current project is still:

StyleFlow WAT V1

The actual application has not yet been generated in this tutorial.

That distinction is important.

Our real progress is currently:

DONE
│
├── Project created
├── VS Code configured
├── PRODUCT.md created
├── WORKFLOW.md created
├── CLAUDE.md created
├── README.md created
├── .gitignore created
├── Seven Skills created
├── docs/ created locally
├── tests/ created locally
├── Claude Code installed
├── Claude Code command verified
├── Git initialized
├── V1 committed
└── V1 pushed to GitHub

NEXT
│
├── Authenticate Claude Code
├── Let Claude inspect WAT
├── Review Claude's understanding
├── Ask Claude for implementation plan
├── Human approves plan
├── Claude builds StyleFlow
├── Claude creates tests
├── Claude runs tests
├── Claude corrects failures
├── Human tests the UI
└── Create the next Git checkpoint

This is much more useful than pretending that the application already exists.

As we continue this real project, we will update the article with the actual files Claude creates, the actual tests it runs, the problems it encounters, and how the agent corrects them.

32. What We Have Learned So Far

We started with an empty folder:

styleflow-wat/

We transformed it into:

PRODUCT
    +
WORKFLOW
    +
AGENT INSTRUCTIONS
    +
SKILLS
    +
TOOLS
    +
TESTING RULES
    +
SECURITY BOUNDARIES
    +
GIT CHECKPOINT

The architecture can now be summarized as:

BUSINESS GOAL
      ↓
PRODUCT.md
      ↓
WORKFLOW.md
      ↓
CLAUDE.md
      ↓
CLAUDE CODE
      ↓
RELEVANT SKILLS
      ↓
TOOLS
      ↓
IMPLEMENT
      ↓
TEST
      ↓
OBSERVE
      ↓
EVALUATE
      ↓
CORRECT
      ↓
HUMAN REVIEW
      ↓
GIT CHECKPOINT

The most important idea is that the AI agent does not work without context and boundaries.

We give it an environment that tells it:

What to build
How to work
Which specialist instructions to use
Which tools are available
What must be tested
What it must not do
When the human must approve

That is much closer to an agentic software-development workflow than simply asking a chatbot to generate code.

Source Code

The complete source code for the StyleFlow WAT project is available on my GitHub repository.

The repository contains the project files used throughout this tutorial, including PRODUCT.md, WORKFLOW.md, CLAUDE.md, the specialist Skills, and the Git-tracked StyleFlow WAT environment.

View the complete StyleFlow WAT source code on my GitHub →

Conclusion

StyleFlow has now reached its first real milestone.

We have not yet built the online store.

Instead, we have built something that comes first:

A controlled agentic development environment capable of guiding an AI coding agent through the construction of the store.

Our first Git checkpoint preserves this environment as StyleFlow WAT V1.

The next practical step is to authenticate Claude Code, let it inspect the environment, review its implementation plan, and then allow it to begin building the StyleFlow application.

After StyleFlow itself is working, tested and reviewed, we can take the project further and explore how a single online store could evolve into a multi-customer, AI-powered SaaS platform.

→ Next Article: Turn StyleFlow into an AI-Powered SaaS Business

← Back to AI Automation & Agentic Workflows – Step by Step

← Back to Home Page

Build StyleFlow: An Online Clothing Store with an Agentic Workflow

1. What We Are Going to Build

2. Understanding the StyleFlow WAT Environment

3. Create the StyleFlow Project Folder

4. Create PRODUCT.md

5. Create WORKFLOW.md

6. Create CLAUDE.md

7. Create README.md

8. Create .gitignore

9. Create the Skills Folder

10. Create the UI Design Skill

11. Create the Frontend Development Skill

12. Create the Backend Development Skill

13. Create the Database Design Skill

14. Create the Testing Skill

15. Create the Security Review Skill

16. Create the Deployment Skill

17. Create docs and tests

18. Verify the Complete WAT Structure

19. Open the VS Code Terminal

20. Check Whether Claude Code Is Installed

21. Install Claude Code on Windows

22. Troubleshooting: Installed but claude Is Not Found

23. Claude Desktop and Claude Code Are Different

24. Create the First Git Checkpoint Before Claude Changes Anything

25. Create the GitHub Repository

26. Start Claude Code — Only After the Environment Exists

27. First Let Claude Understand the Project

28. Ask Claude to Create the Implementation Plan

29. Human Review Before Implementation

30. The Main StyleFlow Build Prompt

31. What Will Happen Next

32. What We Have Learned So Far

Source Code

Conclusion

22. Troubleshooting: Installed but `claude` Is Not Found