Flask + Vue.js Project Creator

Scaffold Flask 3.1 + Vue.js full-stack projects with single-port architecture, structured logging, and distinctive frontend design.

Architecture Overview

Single-Port Architecture

All requests served by Flask on port 80. Static files (HTML/CSS/JS) delivered via Flask routes from templates/ directory.

Project Creation Workflow

Follow these steps in order:

1. Gather requirements - Ask for project name and brief description
2. Initialize project structure - Run scripts/init_project.py
3. Configure dependencies - Set up pyproject.toml with uv
4. Create Flask entry point - Generate main application file with logging
5. Design frontend - Follow frontend design guidelines (see below)
6. Update AGENTS.md - Sync project documentation after any changes
7. Verify and run - Test the project starts correctly

Step 1: Gather Requirements

Ask the user for:

• Project name (used for directory, file names, and app title)
• Brief description of what the app does
• Any specific design preferences (color scheme, style direction)

Step 2: Initialize Project Structure

Run the init script:

python scripts/init_project.py <project-name> --path <target-directory>

This creates:

<project-name>/
├── AGENTS.md                    # AI Agent project guide (auto-generated)
├── src/
│   ├── <project-name>.py        # Flask main entry (with logging)
│   ├── pyproject.toml           # uv project config
│   ├── templates/               # Frontend resources
│   │   ├── <project-name>.html  # Main page (Vue.js)
│   │   ├── css/                 # Stylesheets
│   │   ├── js/                  # JavaScript files
│   │   └── assets/              # Static assets (images, fonts, etc.)
│   ├── utils/                   # Core utility modules
│   │   ├── __init__.py
│   │   └── logger.py            # Logging module
│   └── log/                     # Log output directory
│       └── *.log                # Per-module log files (daily rotation)

Step 3: Configure Dependencies

The pyproject.toml is auto-generated with uv mirror config:

[tool.uv]
index-url = "https://pypi.tuna.tsinghua.edu.cn/simple"

Core dependencies:

dependencies = [
    "flask>=3.1.0",
]

Step 4: Create Flask Entry Point

The generated .py includes integrated logging:

from flask import Flask, send_from_directory, send_file
from utils.logger import get_logger

app = Flask(__name__)
logger = get_logger('<project-name>')

@app.route('/')
def index():
    return send_file('templates/<project-name>.html')

# ... static file routes ...

if __name__ == '__main__':
    logger.info('Starting server on port 80...')
    app.run(host='0.0.0.0', port=80, debug=True)

Step 5: Design Frontend

Apply the frontend design guidelines when creating HTML/CSS/JS. See references/frontend-design.md for the complete design system.

Key principles:

• Anti-AI Slop: Avoid Inter, Roboto, Arial, purple-on-white gradients, emoji icons
• Unique typography: Use distinctive Google Fonts pairings (see references/frontend-design.md "Typography" section)
• Intentional color: Pick context-specific palettes, not generic gradients
• SVG icons only: Use Heroicons, Lucide, or Simple Icons — never emojis
• Vue.js via CDN: Use Vue 3 CDN in HTML, Composition API with

  Skill工具集 © 2026