AI 自动编程：一句话设计高颜值博客

原创

代码匠心

修改于 2026-02-28 14:02:12

2070

文章被收录于专栏：AIAI

在 AI-Native 时代，开发者的角色正在从“代码编写者”向“架构设计者”转变。Claude Code 作为 Anthropic 推出的下一代命令行 AI 助手，不仅仅是一个代码补全工具，更是一个具备 Agentic Workflow（代理工作流）能力的智能终端。

本文将深入探讨如何部署 Claude Code 环境，并结合社区强大的 frontend-design Skills，实现从自然语言指令到现代化前端页面的“零代码”构建。

1. 前置环境要求 (Prerequisites)

Claude Code 依赖 Node.js 运行时环境。在开始部署之前，请确保您的开发环境满足以下要求：

操作系统：Windows / macOS / Linux
Runtime：Node.js (推荐 v18 或更高版本)
包管理器：npm (通常随 Node.js 一起安装)

环境自检

打开终端（Terminal / PowerShell），执行以下命令进行环境自检：

node -v
npm -v

若返回版本号（如 v20.x.x），则说明环境准备就绪。若未安装，请访问 Node.js 官网获取 LTS 版本。

2. 部署 Claude Code CLI

Claude Code 作为一个 CLI (Command Line Interface) 工具，可以通过 npm 全局安装，从而在系统的任何位置被调用。

全局安装

以管理员权限运行终端，执行安装指令：

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

验证部署

安装完成后，验证 CLI 是否正确注册到系统路径：

claude --version

成功返回版本号即表示核心组件安装成功。

3. 本地环境配置与模型接入

为了获得最佳的响应速度和稳定性，特别是在国内网络环境下，我们需要对 Claude Code 进行本地化配置，并接入国内高性能的大模型 API（如智谱 AI 的 GLM-4）。

3.1 获取 API 凭证

获取API KEY 方法请看这篇文章

3.2 配置 Claude Code

我们需要手动创建或修改 Claude Code 的配置文件，以覆盖默认的 API 端点。

配置文件路径：

macOS/Linux: ~/.claude/settings.json
Windows: %USERPROFILE%\.claude\settings.json (通常是 C:\Users\您的用户名\.claude\settings.json)

settings.json 配置内容：

{
    "env": {
            "ANTHROPIC_AUTH_TOKEN": "your_api_key_here",
            "ANTHROPIC_BASE_URL": "https://open.bigmodel.cn/api/anthropic",
            "ANTHROPIC_DEFAULT_HAIKU_MODEL": "glm-4.5",
            "ANTHROPIC_DEFAULT_OPUS_MODEL": "glm-4.7",
            "ANTHROPIC_DEFAULT_SONNET_MODEL": "glm-4.6",
            "ANTHROPIC_MODEL": "glm-4.7"
    },
    "includeCoAuthoredBy": false
}

注意：请务必将 your_api_key_here 替换为您实际获取的 API Key。

此外，为了跳过官方的 OAuth 认证流程，我们还需要配置 .claude.json 文件（注意文件名前的点）。

配置文件路径：

macOS/Linux: ~/claude.json
Windows: %USERPROFILE%\claude.json

.claude.json 配置内容：

{
    "customApiKeyResponses": {},
    "tipsHistory": {},
    "promptQueueUseCount": 0,
    "cachedGrowthBookFeatures": {
            "tengu_1p_event_batch_config": {},
            "tengu_mcp_tool_search": true,
            "tengu_scratch": false,
            "tengu_disable_bypass_permissions_mode": false,
            "tengu_log_segment_events": false,
            "tengu_log_datadog_events": false,
            "tengu_pid_based_version_locking": false,
            "tengu_event_sampling_config": {},
            "tengu_tool_pear": false,
            "tengu_keybinding_customization": false,
            "tengu_thinkback": false,
            "tengu_sumi": false,
            "tengu_c4w_usage_limit_notifications_enabled": false,
            "tengu-top-of-feed-tip": {
                "tip": "",
                "color": "dim"
            },
            "tengu_react_vulnerability_warning": false,
            "tengu_code_diff_cli": false,
            "tengu_post_compact_survey": false,
            "tengu_claudeai_mcp_connectors": false,
            "enhanced_telemetry_beta": false,
            "tengu_tool_search_unsupported_models": null,
            "tengu_ant_attribution_header_new": false,
            "tengu_streaming_tool_execution2": false,
            "tengu_session_memory": false,
            "tengu_plank_river_frost": "user_intent",
            "tengu_brass_pebble": false,
            "tengu_attribution_header": true,
            "tengu_cache_plum_violet": false
    },
    "userID": "",
    "firstStartTime": "",
    "sonnet45MigrationComplete": true,
    "opus45MigrationComplete": true,
    "opusProMigrationComplete": true,
    "thinkingMigrationComplete": true,
    "cachedChromeExtensionInstalled": false,
    "hasCompletedOnboarding": true,
    "changelogLastFetched": 0,
    "lastReleaseNotesSeen": "",
    "officialMarketplaceAutoInstallAttempted": true,
    "officialMarketplaceAutoInstalled": true,
    "skillUsage": {}
}

3.3 初始化项目空间

创建一个新的工作目录（Workspace），例如 claude-projects。
在该目录下打开终端。
打开workspace文件夹
启动 Claude Code：

claude

4. 集成 Frontend Design Skills

Skills 是 Claude Code 的核心扩展机制，类似于 IDE 的插件。通过引入 frontend-design Skill，我们可以赋予 Claude 专业的 UI/UX 设计能力。

安装步骤

创建技能目录：在 .claude 配置目录下创建 skills 子目录：
Windows: C:\Users\用户名\.claude\skills
macOS: ~/.claude/skills
获取技能包：访问 Skills Marketplace，搜索关键字 frontend-design。
搜索frontend-design技能
下载与部署：进入详情页，点击下载（或使用 wget），获取 skill.zip 包。将压缩包解压至上一步创建的 skills 目录中。
frontend-design技能
下载frontend-design技能
激活技能：重启 Claude Code 终端会话。输入 /skills 指令，若能在列表中看到 frontend-design，即表示集成成功。
重启Claude Code