12Factor.me

<div align="center"> <h1>12Factor Methodology</h1> <p><strong>Master AI-Human Collaboration for 10x Engineering Efficiency</strong></p>

<p><a href="https://12factor.me">Live Demo</a> | <a href="https://github.com/wquguru/12factor">GitHub</a> | <a href="#quick-start">Quick Start</a></p> </div>

Overview

Interactive methodology framework for the Four-Stage Twelve-Principle approach to AI collaboration era. Features hands-on exercises, prompt engineering toolkit, and bilingual support.

Quick Start

npm install
npm run dev    # Start at http://localhost:3000
npm run build  # Production build

Prompt Engineering Setup (Optional)

cp .env.example .env.local
# Add your API key (OpenAI/DeepSeek/Azure)

Methodology Modules

12 Principles Guide

Four Stages: Prepare → Execute → Collaborate → Iterate

Interactive flashcards with progress tracking
Adaptive quizzes with performance analytics
Real-world examples and anti-patterns

Prompt Engineering Practice

Three Practice Modes:

Theory: Core concepts and techniques
Practice: Guided exercises with hints
Playground: Live LLM experimentation

Key Topics:

Fundamentals: Structure, system prompts, role assignment
Advanced: Few-shot, chain-of-thought, temperature control
Optimization: Token efficiency, context management

Features

Bilingual (English/中文)
Dark mode support
Progress persistence
Multi-LLM support (OpenAI, DeepSeek, Azure)
Rate-limited API with security
Mobile responsive

Tech Stack

| Technology | Version | Purpose | |------------|---------|----------| | Next.js | 15 | React framework with App Router | | TypeScript | 5.3 | Type safety and developer experience | | Tailwind CSS | 3.4 | Utility-first CSS framework | | Zustand | 5.0 | Lightweight state management | | next-intl | 3.26 | Internationalization |

Requirements

中文版

English | 中文版

<div align="center"> <h1>12Factor 方法论</h1> <p><strong>掌握AI协作，实现10倍工程效率</strong></p>

<p><a href="https://12factor.me">在线演示</a> | <a href="https://github.com/wquguru/12factor">GitHub</a> | <a href="#快速开始">快速开始</a></p> </div>

概述

互动方法论框架，展示AI协作时代的四阶段十二原则方法。包含实践练习、提示工程工具箱和双语支持。

快速开始

npm install
npm run dev    # 启动开发服务器 http://localhost:3000
npm run build  # 生产构建

提示工程配置（可选）

cp .env.example .env.local
# 添加您的API密钥（OpenAI/DeepSeek/Azure）

方法论模块

十二原则指南

四个阶段： 准备 → 执行 → 协作 → 迭代

互动闪卡与进度追踪
自适应测验与性能分析
真实案例与反模式

提示工程实践

三种实践模式：

理论：核心概念与技术
练习：带提示的引导练习
实验室：实时LLM实验

核心主题：

基础：结构、系统提示、角色分配
进阶：少样本学习、思维链、温度控制
优化：令牌效率、上下文管理

功能特性

双语支持（中文/English）
深色模式
进度持久化
多LLM支持（OpenAI、DeepSeek、Azure）
限流API与安全保护
移动端响应式

技术栈

| 技术 | 版本 | 用途 | |------|------|------| | Next.js | 15 | React框架，使用App Router | | TypeScript | 5.3 | 类型安全与开发体验 | | Tailwind CSS | 3.4 | 实用优先的CSS框架 | | Zustand | 5.0 | 轻量级状态管理 | | next-intl | 3.26 | 国际化支持 |

12factor

Install / Use

README