12Factor.me

中文版 | English

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 | 中文版

概述

互动方法论框架，展示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	国际化支持

环境要求