用Claude code和MiniMax2.1大模型打造开发环境打造国内最强AI助手编程环境，vscode IDE、cl

环境前提

本文以Linux系统为例，简要介绍Claude Code安装、MiniMax2.1模型适配和示例代码样例生成效果。

基础工具版本如下, 仅供参考（非必须依赖项，相对高版本的工具即可）

node -v
v22.14.0

npm -v
10.9.2

git --version
git version 2.36.6

一、Claude Code

1.1 安装

可参考官网，这里用node方式安装

npm install -g @anthropic-ai/claude-code

1.2 验证

claude --version
==== Output ====
2.1.14 (Claude Code)

说明

Claude code是Anthropic公司出品的AI客户端工具，默认内嵌支持自家大模型如Sonnet等，需要购买Pro或Max之类的订阅，亦或是购买API Key来使用其大模型。

现在，国内GLM和MiniMax大模型也异军突起，价格便宜，功能差异不大，网络访问友好且不用科学上网。下面简述配置Minimax大模型，并附几个示例来展示其优异的WebDev能力。

二、Minimax2.1

2.1 购买Code Plan

点击地址

2.2 配置Claude

文件位置$HOME/.claude.json

注意替换api key字段为自己的api key

{
  "hasCompletedOnboarding": true,
  "disableLoginPrompt": true,
  "apiKeys": {
    "anthropic": "<your-minimax-api-key>"
  },
  "apiBaseUrl": "https://api.minimax.com/anthropic",
  "defaultModel": "minimax-model-name",
  "models": {
    "minimax-model-name": {
      "apiBaseUrl": "https://api.minimax.com/anthropic",
      "apiKey": "<your-minimax-api-key>"
    }
  }
}

2.3 环境设置

文件位置$HOME/.claude/settings.json

注意替换ANTHROPIC_AUTH_TOKEN字段值为自己的api key


{
 "env": {
   "ANTHROPIC_BASE_URL": "https://api.minimaxi.com/anthropic",
   "ANTHROPIC_AUTH_TOKEN": "<your-minimax-api-key>",
   "API_TIMEOUT_MS": "3000000",
   "CLAUDE_CODE_DISABLE_NONESSENTIAL_TRAFFIC": 1,
   "ANTHROPIC_MODEL": "MiniMax-M2"
 }
}

2.4 验证

claude配置完成Minimax2.1作为大模型基座后，在终端下键入claude,可如下图所示

选择1. Yes, processd后回车,看到如下界面，至此安装claude和minimax2.1开发环境完成。

三、代码样例

配合vscode IDE集成开发环境，在Terminal终端运行claude，两者互补能力，不用安装claude插件也能让AI助手代码飞起来。

3.1 时钟

用ctrl+esc 快捷键打开Terminal

3.1.1 提示词

Create HTML/CSS of an analog clock showing ${time}. Include numbers (or numerals) if you wish, and have a CSS animated second hand. Make it responsive and use a white background. Return ONLY the HTML/CSS code with no markdown formatting.
=== 中文  ===
"创建一个显示时间 ${time} 的模拟时钟的 HTML/CSS 代码。如果需要，可以包含数字，并添加 CSS 动画秒针。使其具有响应式设计，并使用白色背景。仅返回 HTML/CSS 代码，不要包含任何 Markdown 格式。"

3.1.2 初始化 & 代码效果

/init #初始化一个CLAUDE.md文件记录calude每次任务计划痕迹
输入上面提示词生成代码

3.2 计算器

3.1.1 提示词

创建生成一个Web计算器HTML页面,支持加、减、乘、除和括号计算，样式风格要求柔和一些

3.1.2 初始化 & 效果

/init

输入上述提示词

四、参考链接

附录

将下面文件分别保存为clock/index.html和calculator/index.html,用浏览器如Chrome打开即可。

1. 时钟页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>模拟时钟</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .clock-container {
            text-align: center;
        }

        .clock {
            position: relative;
            width: 300px;
            height: 300px;
            border: 8px solid #333;
            border-radius: 50%;
            background-color: white;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            margin: 0 auto 30px;
        }

        .numbers {
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
        }

        .number {
            position: absolute;
            font-size: 24px;
            font-weight: bold;
            color: #333;
            width: 40px;
            height: 40px;
            text-align: center;
            line-height: 40px;
        }

        .number12 { top: 10px; left: 50%; transform: translateX(-50%); }
        .number3 { right: 10px; top: 50%; transform: translateY(-50%); }
        .number6 { bottom: 10px; left: 50%; transform: translateX(-50%); }
        .number9 { left: 10px; top: 50%; transform: translateY(-50%); }

        .hand {
            position: absolute;
            bottom: 50%;
            left: 50%;
            transform-origin: bottom center;
            border-radius: 10px;
        }

        .hand-hour {
            width: 6px;
            height: 80px;
            background-color: #333;
            margin-left: -3px;
            z-index: 3;
        }

        .hand-minute {
            width: 4px;
            height: 110px;
            background-color: #666;
            margin-left: -2px;
            z-index: 2;
        }

        .hand-second {
            width: 2px;
            height: 120px;
            background-color: #e74c3c;
            margin-left: -1px;
            z-index: 1;
            animation: rotate 60s linear infinite;
        }

        @keyframes rotate {
            from { transform: translateX(-50%) rotate(0deg); }
            to { transform: translateX(-50%) rotate(360deg); }
        }

        .center-dot {
            position: absolute;
            width: 16px;
            height: 16px;
            background-color: #333;
            border-radius: 50%;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 4;
        }

        .digital-time {
            font-size: 48px;
            font-weight: bold;
            color: #333;
            font-family: 'Courier New', monospace;
            letter-spacing: 2px;
        }

        @media (max-width: 600px) {
            .clock {
                width: 250px;
                height: 250px;
            }

            .hand-hour {
                height: 65px;
            }

            .hand-minute {
                height: 90px;
            }

            .hand-second {
                height: 100px;
            }

            .digital-time {
                font-size: 36px;
            }
        }

        @media (max-width: 400px) {
            .clock {
                width: 200px;
                height: 200px;
            }

            .number {
                font-size: 18px;
                width: 30px;
                height: 30px;
                line-height: 30px;
            }

            .digital-time {
                font-size: 28px;
            }
        }
    </style>
</head>
<body>
    <div class="clock-container">
        <div class="clock">
            <div class="numbers">
                <div class="number number12">12</div>
                <div class="number number3">3</div>
                <div class="number number6">6</div>
                <div class="number number9">9</div>
            </div>
            <div class="hand hand-hour" id="hour-hand"></div>
            <div class="hand hand-minute" id="minute-hand"></div>
            <div class="hand hand-second" id="second-hand"></div>
            <div class="center-dot"></div>
        </div>
        <div class="digital-time" id="digital-time"></div>
    </div>

    <script>
        function updateClock() {
            const now = new Date();
            const hours = now.getHours() % 12;
            const minutes = now.getMinutes();
            const seconds = now.getSeconds();

            const hourAngle = (hours * 30) + (minutes * 0.5);
            const minuteAngle = minutes * 6;
            const secondAngle = seconds * 6;

            document.getElementById('hour-hand').style.transform = `translateX(-50%) rotate(${hourAngle}deg)`;
            document.getElementById('minute-hand').style.transform = `translateX(-50%) rotate(${minuteAngle}deg)`;

            const digitalTime = now.toLocaleTimeString('zh-CN', { hour12: false });
            document.getElementById('digital-time').textContent = digitalTime;
        }

        updateClock();
        setInterval(updateClock, 1000);
    </script>
</body>
</html>

2. 计算器页面

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>计算器</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            padding: 20px;
        }

        .calculator {
            background-color: #ffffff;
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            padding: 30px;
            max-width: 400px;
            width: 100%;
        }

        .calculator-header {
            text-align: center;
            margin-bottom: 20px;
        }

        .calculator-title {
            color: #00838f;
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .display {
            width: 100%;
            height: 100px;
            background: linear-gradient(145deg, #f5f5f5, #e0e0e0);
            border: none;
            border-radius: 15px;
            font-size: 32px;
            font-weight: 300;
            text-align: right;
            padding: 0 20px;
            margin-bottom: 25px;
            box-shadow: inset 5px 5px 10px #d0d0d0, inset -5px -5px 10px #ffffff;
            color: #333;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        .display:focus {
            outline: none;
            box-shadow: inset 5px 5px 10px #d0d0d0, inset -5px -5px 10px #ffffff, 0 0 0 3px rgba(0, 131, 143, 0.2);
        }

        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 12px;
        }

        button {
            height: 65px;
            border: none;
            border-radius: 12px;
            font-size: 24px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.2s ease;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        button:active {
            transform: scale(0.95);
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
        }

        .btn-number {
            background: linear-gradient(145deg, #ffffff, #f0f0f0);
            color: #333;
        }

        .btn-number:hover {
            background: linear-gradient(145deg, #f0f0f0, #e0e0e0);
        }

        .btn-operator {
            background: linear-gradient(145deg, #00838f, #0097a7);
            color: white;
        }

        .btn-operator:hover {
            background: linear-gradient(145deg, #0097a7, #00acc1);
        }

        .btn-function {
            background: linear-gradient(145deg, #b0bec5, #cfd8dc);
            color: #333;
        }

        .btn-function:hover {
            background: linear-gradient(145deg, #cfd8dc, #b0bec5);
        }

        .btn-equals {
            background: linear-gradient(145deg, #00c853, #00e676);
            color: white;
            grid-column: span 2;
        }

        .btn-equals:hover {
            background: linear-gradient(145deg, #00e676, #00ff88);
        }

        .btn-zero {
            grid-column: span 2;
        }

        @media (max-width: 480px) {
            .calculator {
                padding: 20px;
            }

            .display {
                height: 80px;
                font-size: 28px;
            }

            button {
                height: 55px;
                font-size: 20px;
            }
        }

        .history {
            margin-top: 20px;
            padding: 15px;
            background: rgba(255, 255, 255, 0.5);
            border-radius: 10px;
            max-height: 150px;
            overflow-y: auto;
        }

        .history-title {
            font-size: 14px;
            color: #666;
            margin-bottom: 10px;
        }

        .history-item {
            font-size: 16px;
            color: #00838f;
            padding: 5px 0;
            border-bottom: 1px solid rgba(0, 131, 143, 0.1);
        }

        .history-item:last-child {
            border-bottom: none;
        }

        .error {
            color: #d32f2f;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <div class="calculator-header">
            <h1 class="calculator-title">计算器</h1>
        </div>
        <input type="text" class="display" id="display" placeholder="0" readonly>

        <div class="buttons">
            <button class="btn-function" onclick="clearAll()">AC</button>
            <button class="btn-function" onclick="clearEntry()">C</button>
            <button class="btn-function" onclick="backspace()">⌫</button>
            <button class="btn-operator" onclick="appendOperator('/')">÷</button>

            <button class="btn-number" onclick="appendNumber('7')">7</button>
            <button class="btn-number" onclick="appendNumber('8')">8</button>
            <button class="btn-number" onclick="appendNumber('9')">9</button>
            <button class="btn-operator" onclick="appendOperator('*')">×</button>

            <button class="btn-number" onclick="appendNumber('4')">4</button>
            <button class="btn-number" onclick="appendNumber('5')">5</button>
            <button class="btn-number" onclick="appendNumber('6')">6</button>
            <button class="btn-operator" onclick="appendOperator('-')">-</button>

            <button class="btn-number" onclick="appendNumber('1')">1</button>
            <button class="btn-number" onclick="appendNumber('2')">2</button>
            <button class="btn-number" onclick="appendNumber('3')">3</button>
            <button class="btn-operator" onclick="appendOperator('+')">+</button>

            <button class="btn-function" onclick="appendParenthesis('(')">(</button>
            <button class="btn-function" onclick="appendParenthesis(')')">)</button>
            <button class="btn-number btn-zero" onclick="appendNumber('0')">0</button>
            <button class="btn-number" onclick="appendDecimal()">.</button>
            <button class="btn-equals" onclick="calculate()">=</button>
        </div>

        <div class="history">
            <div class="history-title">计算历史</div>
            <div id="historyList"></div>
        </div>
    </div>

    <script>
        let display = document.getElementById('display');
        let historyList = document.getElementById('historyList');
        let currentInput = '';
        let shouldResetDisplay = false;
        let calculationHistory = [];

        function updateDisplay() {
            display.value = currentInput || '0';
        }

        function appendNumber(num) {
            if (shouldResetDisplay) {
                currentInput = '';
                shouldResetDisplay = false;
            }
            currentInput += num;
            updateDisplay();
        }

        function appendOperator(op) {
            if (currentInput === '') return;

            const lastChar = currentInput[currentInput.length - 1];
            if (['+', '-', '*', '/'].includes(lastChar)) {
                currentInput = currentInput.slice(0, -1) + op;
            } else {
                currentInput += op;
            }
            updateDisplay();
        }

        function appendDecimal() {
            if (shouldResetDisplay) {
                currentInput = '0.';
                shouldResetDisplay = false;
                updateDisplay();
                return;
            }

            const parts = currentInput.split(/[\+\-\*\/]/);
            const lastPart = parts[parts.length - 1];

            if (!lastPart.includes('.')) {
                currentInput += '.';
                updateDisplay();
            }
        }

        function appendParenthesis(paren) {
            if (shouldResetDisplay) {
                currentInput = '';
                shouldResetDisplay = false;
            }

            if (paren === '(') {
                const lastChar = currentInput[currentInput.length - 1];
                if (lastChar && !['+', '-', '*', '/', '('].includes(lastChar)) {
                    currentInput += '*';
                }
                currentInput += '(';
            } else {
                const openCount = (currentInput.match(/\(/g) || []).length;
                const closeCount = (currentInput.match(/\)/g) || []).length;

                if (openCount > closeCount) {
                    const lastChar = currentInput[currentInput.length - 1];
                    if (lastChar && !['+', '-', '*', '/', '('].includes(lastChar)) {
                        currentInput += ')';
                    }
                }
            }
            updateDisplay();
        }

        function clearAll() {
            currentInput = '';
            updateDisplay();
        }

        function clearEntry() {
            currentInput = '';
            updateDisplay();
        }

        function backspace() {
            if (shouldResetDisplay) {
                currentInput = '';
                shouldResetDisplay = false;
            } else {
                currentInput = currentInput.slice(0, -1);
            }
            updateDisplay();
        }

        function calculate() {
            try {
                // 检查括号是否匹配
                const openCount = (currentInput.match(/\(/g) || []).length;
                const closeCount = (currentInput.match(/\)/g) || []).length;

                if (openCount !== closeCount) {
                    throw new Error('括号不匹配');
                }

                // 替换乘号和除号符号
                let expression = currentInput.replace(/×/g, '*').replace(/÷/g, '/');

                // 使用 Function 构造函数安全地计算表达式
                const result = eval(expression);

                if (isNaN(result) || !isFinite(result)) {
                    throw new Error('无效的计算');
                }

                // 添加到历史记录
                const historyItem = `${currentInput} = ${result}`;
                calculationHistory.unshift(historyItem);
                if (calculationHistory.length > 5) {
                    calculationHistory.pop();
                }
                updateHistory();

                currentInput = result.toString();
                shouldResetDisplay = true;
                updateDisplay();

            } catch (error) {
                display.classList.add('error');
                display.value = '错误: ' + error.message;
                setTimeout(() => {
                    display.classList.remove('error');
                    clearAll();
                }, 2000);
            }
        }

        function updateHistory() {
            historyList.innerHTML = calculationHistory
                .map(item => `<div class="history-item">${item}</div>`)
                .join('');
        }

        // 键盘支持
        document.addEventListener('keydown', (e) => {
            e.preventDefault();

            const key = e.key;

            if (key >= '0' && key <= '9') {
                appendNumber(key);
            } else if (key === '.') {
                appendDecimal();
            } else if (key === '+' || key === '-') {
                appendOperator(key);
            } else if (key === '*') {
                appendOperator('*');
            } else if (key === '/') {
                appendOperator('/');
            } else if (key === '(' || key === ')') {
                appendParenthesis(key);
            } else if (key === 'Enter' || key === '=') {
                calculate();
            } else if (key === 'Escape' || key === 'c' || key === 'C') {
                clearAll();
            } else if (key === 'Backspace') {
                backspace();
            }
        });
    </script>
</body>
</html>