目录

• 一、Claude Code

• 初始化

• 安装
• CC Switch
• VScode配置
• 工作流程

• 配置

• 命令行命令
• 前缀匹配器
• MCP
• Subagent
• Plugin
• Skill

• 进阶使用

• 高质量提问
• MCP / SKILL 汇总

• 状态栏美化
• 浏览器自动化
• 头脑风暴
• 软件工程智能体
• 前端美化

• 自动化运行

• 二、OpenClaw

• 源码
• 一键初始化

• 上下文

• 创作自动化

• 视频自动化

• 编程自动化
• 运营自动化

安装

Claude Code 是 Anthropic 官方基于 Claude 大模型打造的原生 AI 编程工具，专为开发者设计，深度融入本地开发流程，实现从需求描述、代码编写、调试重构、版本控制到项目部署的全流程 AI 辅助。

从能力的角度来看，核心特征有三个：

• 上下文感知：不仅理解单个文件，而是理解整个项目结构。
• 工程化导向：关注可维护性、规范、测试，而不是一次性代码。
• 可定制行为：通过 Skills（技能包）让 AI 遵守你的规则。

官网：https://claude.com/product/claude-code

现在 Claude Code 提供了更简单的一键安装方式，不需要安装 Node.js，直接终端打开输入即可安装：

Mac 用户：

curl -fsSL https://claude.ai/install.sh | bash

Win用户：「以管理员身份运行」，安装过程会自动下载，等个 1-2 分钟就好。

irm https://claude.ai/install.ps1 | iex

安装完成的标志：会提示「Claude Code installed successfully」。

使用方式：

CC Switch

CC Switch 的核心价值在于：无需手动修改各 CLI 工具的配置文件，只需在图形界面中点击切换，即可将 Claude Code、Codex、OpenCode、Gemini CLI 的 API 请求路由到不同的 Provider（官方、第三方中转、自建服务等）。

主要的功能：

Github：https://github.com/farion1231/cc-switch

配置模型（国内推荐 GLM模型，购买 Coding Plan 计划）：

点击左上角“设置”按钮，在通用页面下拉找到 跳过 Claude Code初次安装确认 ，务必勾选。

在终端运行 claude，看到对话界面并能正常回复即表示配置完成。

VScode配置

安装 vs code：https://code.visualstudio.com

安装插件：https://marketplace.visualstudio.com/items?itemName=anthropic.claude-code

或者在 vs code 插件市场搜索「Claude code」，即可安装。

为什么推荐使用Vscode插件开发?

我们可以选中文件中的代码，让 Claude Code 帮我们解析说明或修改，选中后，会提示已经选中的代码行数。

当 Claude 需要修改文件时，它会自动打开并排对比视图，左边显示文件原始内容，右边显示建议修改后的内容，然后询问您是否同意修改。

如果需要的话，可以开启 Claude code 全自动模式。

默认状态下，Claude code 只能在 plan、手动确认、自动编辑三种模式选择，可以在 cc 插件里开启「Allow Dangerously Skip Permissions」，这样能开启全自动模式，cc 能自动运行命令，无需二次确认。下面的选项里，也可以把全自动模式配置为默认模式。

• 正常模式（默认）：Claude 每次要操作前都会先问你同不同意。
• Plan Mode（计划模式）：Claude 先告诉你它打算怎么做，得到你批准后才动手修改。
• 自动接受模式：Claude 直接编辑，不再每次询问。

注意：Shift + Tab 也可以进行切换。

命令菜单：在提示框里输入 /（或点击输入框）就能打开命令菜单。

常用选项包括：附加文件、切换模型、开启扩展思考、查看使用量（输入 /usage）。

多行输入：按 Shift + Enter 可以换行。

上下文用量指示器：提示框下方会实时显示你已经用了多少 Claude 的上下文窗口（context）。Claude 会自动帮你压缩内容；如果你想手动压缩，输入 /compact 即可。

引用文件和文件夹

直接用 @ 提到文件或文件夹就行。支持模糊匹配，不用打全名。

小技巧：

• 选中代码时：直接在编辑器里选中一段代码，Claude 会自动看到你选中的部分。提示框下方会显示”已选中 XX 行”。
• 快速插入：按 Option + K（Mac）或 Alt + K（Windows/Linux），就能插入带文件路径和行号的 @ 提及，例如 @app.ts#5-10。
• 隐藏选中内容：点击提示框底部的”选择指示器”（眼睛图标），斜杠眼睛表示 Claude 看不到你选中的文本。
• 拖拽附件：把文件拖到提示框时按住 Shift，可以作为附件添加。想删除附件？点击附件右上角的 × 即可。
• PDF 大文件专属：你可以指定让 Claude 只读某几页，例如”第 1-10 页”或”从第 3 页开始”。

恢复过去的对话

点击 Claude Code 面板顶部的下拉菜单，就能看到你的所有聊天历史记录。支持关键字搜索，也能按时间筛选（今天、昨天、过去 7 天等）。鼠标悬停在某条记录上，会出现 重命名 和 删除 按钮：

• 重命名：给对话起个好记的标题
• 删除：把这条记录从列表里移除

工作流程

当你给 Claude 一个任务时，它会像人类一样循环思考三个步骤：

1. 收集上下文（看你的代码、文件、错误信息）
2. 采取行动（编辑文件、运行命令、搜索等）
3. 验证结果（检查是否成功，哪里还需要调整）

这三个步骤会不断循环，直到任务完成，当然我们也可以随时可以打断它、给新指示，或者说”换个方法试试”。

命令行命令

• /clear：清除对话历史
• /help：显示可用命令
• /login：登录或切换账号
• /resume：恢复之前的对话
• /exit or Ctrl+C：退出 Claude Code
• /model：切换模型

会话：

• 直接恢复会话：claude –continue
• 分叉会话：claude –continue –fork-session

• /compact：手动压缩
• /context：查看当前占用情况

技巧：

• 重要规则写进 CLAUDE.md
• 用 skills 和 subagents 减少不必要的上下文占用

安全机制：

• 检查点（随时后悔）：Claude 修改文件前会自动备份。只要按两次 Esc，或说”撤销刚才的修改”，就能回到之前状态。
• 权限模式：按 Shift + Tab 快速切换。

项目初始化：/init，Claude 会自动扫描你的代码库，然后生成一份专属于你项目的 CLAUDE.md 文件。

CLAUDE.md 文件：CLAUDE.md 是一个放在项目根目录的 Markdown 文件，Claude Code 在每次会话开始时都会自动读取，不再需要重复解释基本信息。

一份好的 CLAUDE.md 应该覆盖三个维度：

• WHAT（是什么）：技术栈、项目结构，为 Claude 提供代码库的全局地图
• WHY（为什么）：项目的目的，各模块的功能与定位
• HOW（怎么做）：开发方式，例如使用 bun 而非 node，以及 Claude 如何验证改动是否正确 Humanlayer

以下是一份典型的 CLAUDE.md 结构示例：

# My Project

一句话描述项目用途。

Tech Stack

• Backend: Python / FastAPI
• Frontend: React + TypeScript
• Database: PostgreSQL

Common Commands

npm run dev # 启动开发服务器 pytest tests/ # 运行测试 npm run build # 构建生产版本

Code Conventions

• 使用 snake_case 命名变量
• 所有 API 需要写单元测试
• PR 合并前必须通过 CI

Architecture Overview

src/ ├── api/ # FastAPI 路由层 ├── services/ # 业务逻辑层 └── models/ # 数据模型层

技巧：

• 提交到版本控制：将 CLAUDE.md 提交到 Git，这样整个团队都能从中受益，新成员可以通过让 Claude 解释代码库来快速上手。
• 保持精简：内容要简洁且普遍适用。采用”渐进式披露”原则——不要把所有你想让 Claude 知道的内容都塞进去，而是告诉它如何查找重要信息，让它按需获取，避免撑爆上下文窗口。
• 不要让 CLAUDE.md 替代 linter：在文件中写代码风格规范是最常见的误区之一。永远不要用 LLM 来做 linter 的工作——linter 更快、更便宜，而且是确定性的。代码风格约束只会让上下文窗口膨胀，降低 Claude 的指令遵从质量。(Codestyle就是去规范这个的)

一个完整的 Claude Code 项目通常包含以下文件和目录，按功能可分为「项目指令层」、「配置权限层」、「扩展能力层」三大模块：

your-project/ ├── CLAUDE.md ← 团队共享指令，提交到 git ├── CLAUDE.local.md ← 个人覆盖，被 git 忽略， └── .claude/

├── settings.json ← 权限 + 配置，提交到 git ├── settings.local.json ← 个人权限，被 git 忽略 ├── commands/ ← 自定义斜杠命令 │ ├── review.md → /project:review │ ├── fix-issue.md → /project:fix-issue │ └── deploy.md → /project:deploy ├── rules/ ← 模块化指令文件（全局生效） │ ├── code-style.md │ ├── testing.md │ └── api-conventions.md ├── skills/ ← 自动调用的工作流 │ ├── security-review/ │ │ └── SKILL.md │ └── deploy/ │ └── SKILL.md └── agents/ ← 子代理角色定义 ├── code-reviewer.md └── security-auditor.md

# 我的本地覆盖 

.claude/settings.json：团队共享的安全基线配置文件，控制 Claude 允许或禁止执行哪些操作，需提交到 Git 统一管理。

 }

settings.local.json：用于临时放开或收紧某些权限，不影响团队其他成员，不应提交到 Git。

{ “permissions”: { 
"allow": [ "Bash(rm ./tmp/*)" ] 
 
} }

.claude/commands/：该目录下的每个 .md 文件会自动映射为一条 /project:文件名 命令，是团队将重复性任务标准化的核心机制。【当你发现自己重复输入相同的指令时】

命令映射规则：

参数传递：命令文件中可使用 $ARGUMENTS 占位符 接收调用时传入的参数。

例如：commands/fix-issue.md（带参数）

# Fix GitHub Issue 
给定 Issue 编号 $ARGUMENTS，请：
 
        
     
          
 
           
读取并理解 Issue 描述
 
           
定位相关代码文件
 
           
实现最小化修复方案
 
           
编写对应的单元测试
 
           
更新 CHANGELOG.md
 
          
 
调用方式：/project:fix-issue 123

.claude/rules/：将 CLAUDE.md 中的规则拆分模块化存放，Claude 在整个会话中始终遵守这些规则。适合存放长期稳定执行的行为约定，避免 CLAUDE.md 过于臃肿。【当 CLAUDE.md 超过 100 行时，拆分模块。】

rules/code-style.md

# Code Style Rules 
        
     
          
 
           
TypeScript 严格模式，禁用 any 类型
 
           
函数长度不超过 40 行，超出则拆分
 
           
优先使用 const，避免使用 let
 
           
导入顺序：标准库 → 三方包 → 本地模块
 
           
所有 export 的函数/类型需要 JSDoc 注释
 
           
禁止使用 console.log，使用项目 logger
 
          

.claude/skills/：Skills 是更高级的复合工作流。当 Claude 判断某个任务适合某个 skill 时，会自动读取并执行对应的 SKILL.md，无需手动调用。每个 skill 是一个子目录，目录内必须包含 SKILL.md。【当有复杂的多步骤工作流需要标准化时。】

⚡ Skills vs Commands 的核心区别：

• Commands：需要用户主动输入斜杠命令触发，是 “工具箱”。
• Skills：由 Claude 根据上下文自动判断是否调用，是 “智能本能”。

.claude/agents/：定义可被主 Claude 实例派遣的专业子代理。在复杂任务中，主代理将子任务委派给对应专家角色，实现多代理协作。子代理在隔离上下文中运行，拥有独立的权限范围。【当任务复杂到需要多个专业视角并行时。】

示例：agents/code-reviewer.md

— name: code-reviewer description: 资深代码审查员，专注代码质量与可维护性 — 
代码审查员
 
角色定位
 
你是一名拥有 10 年经验的资深工程师，专注于代码可读性、性能优化和**实践。
 
审查重点
 
        
     
          
 
           
命名是否清晰表达意图
 
           
函数/类的单一职责原则
 
           
边界条件和错误处理
 
           
性能瓶颈（N+1 查询、不必要的循环等）
 
          
 
权限
 
只读访问，不直接修改文件。
 
输出格式
 
使用 Markdown 表格输出，包含：问题位置、严重程度、建议方案。

前缀匹配器

Claude Code 输入框的本质，可以理解成一个统一入口，所有的操作其实都是通过前缀匹配器。

• 无前缀：自然语言给任务
• / 前缀：调用内置命令
• @ 前缀：注入文件/目录/日志作为上下文
• ! 前缀：直接执行 Bash 命令。例如：! ls -la、! git status、! npm test
• # 前缀：把内容持久写入 CLAUDE.md，从而让某些信息跨会话长期生效。
• & 前缀：把任务放到后台或云端异步执行，不阻塞当前会话，即使你关闭终端，也可以之后在 claude.ai/code 查看进度。
• 多行输入：一次性描述复杂需求

一句话总结：/ 控行为，@ 给材料，! 跑命令，# 存记忆，& 开后台，无前缀讲任务。

命令反向搜索

Ctrl + R，适合快速找回之前执行过的命令。【不要一个一个去翻历史命令。】

流程如下：

1. 开始搜索：按 Ctrl + R 开始反向搜索
2. 键入查询：输入关键词搜索历史命令
3. 导航匹配：再次按 Ctrl + R 切换到上一个匹配结果
4. 接受匹配：

1. 按 Tab 或 Esc 接受匹配并继续编辑
2. 按 Enter 接受并立即执行

5. 取消搜索：按 Ctrl + C 取消搜索

后台异步任务：

• 触发方式：输入命令后按Ctrl+B。
• 原理：异步执行不阻塞当前会话，执行后返回唯一任务ID。
• 任务管理：用/tasks 命令查看、管理所有后台任务。
• 自动清理：退出Claude Code时，后台任务会自动清理。
• 全局禁用：设置环境变量 CLAUDE_CODE_DISABLE_BACKGROUND_TASKS=1 即可关闭。
• 典型后台任务场景：webpack/vite等构建工具、npm/yarn/pnpm包管理、jest/pytest测试套件、开发服务器、Docker/terraform长耗时部署任务。

MCP

MCP 让 Claude Code 从被动接收信息的助手，变成了主动获取信息、执行操作的协作伙伴。

命令：

# 列出所有已配置的服务器 claude mcp list 
查看指定服务器详情（如github）
 
claude mcp get github
 
删除指定服务器
 
claude mcp remove github
 
在 Claude Code 中查看状态 / 认证
 
/mcp

配置范围：local > project > user（同名服务器，本地配置覆盖共享配置）

• local（默认）：仅当前项目可用，私密配置（如敏感密钥）
• project：团队共享（存储在.mcp.json，可提交版本库）
• user：所有项目可用（个人全局配置）

Subagent

Claude Code 子代理（Subagent），是运行在独立上下文里的专用 AI 助手，你可以把它理解为：专门只干某一类事的AI工具人。

每个子代理都拥有完全独立的配置，不会受主对话干扰，核心独立能力包括：

• 独立的系统提示（System Prompt）
• 独立的上下文窗口（完全不污染主对话）
• 可指定专属模型（Sonnet/Haiku/Opus）
• 精细化的工具访问权限控制
• 独立的权限模式
• 生命周期钩子（Hooks）
• 跨会话持久记忆（Memory）

子代理的本质：带 YAML frontmatter 的 Markdown 文件。例如配置：

— name: code-reviewer description: Reviews code for quality, best practices, and security issues. tools: Read, Grep, Glob model: sonnet permissionMode: default 
memory: project
 
后面再接 Markdown 正文，正文里写这个代理的系统提示。

补充：

• description：需要澄清：什么时候调用它、它负责干什么。
• permissionMode：

• default：正常权限提示，每次操作前都会向用户询问确认。
• acceptEdits：自动接受文件编辑，无需每次确认。
• dontAsk：自动拒绝未授权操作，不中断任务流程。
• bypassPermissions：跳过所有权限检查，直接执行所有操作。
• plan：只读规划模式，不执行任何写操作。

子代理会继承父会话的权限模式 —— 如果主会话开启了 bypass，所有子代理也会同步开启 bypass。

记忆范围：

user：~/.claude/agent-memory/ 
           
     
             
               / project：.claude/agent-memory/ 
              
                / local：.claude/agent-memory-local/ 
               
                 / 
                
               
             

记忆怎么用？我们一般要在 system prompt 里明确要求它：

• 任务开始前先查阅记忆。
• 任务结束后主动更新记忆。
• 记录规律、约定、常见问题。

示例：

— name: code-reviewer description: Reviews code for quality and best practices 
memory: user
 
You are a senior code reviewer.
 
记忆使用技巧
 
           
     
             
 
              
开始任务时：请先查阅你的代理记忆，再开始本次审查
 
              
任务结束时：任务完成后，把你发现的代码规律、团队规范、常见问题保存到记忆中
 
             

Claude Code 已经内置了多种高频子代理，会根据场景自动调用：

生命周期钩子：【代理、工具前后】

子代理支持 4 个核心生命周期钩子，可用于日志、验证、通知等自动化场景：

创建流程：

# 1.创建Agent /agents 
2.选择作用范围
 
User-level：保存到 ~/.claude/agents/，所有项目可用 Project-level：保存到 .claude/agents/，当前项目可用
 
3.让 Claude 自动生成初始模板
 
一个代码改进代理，扫描项目文件，针对可读性、性能和**实践提出建议，并给出改进示例。
 
4.收紧工具权限
 
只审代码：只给只读工具 需要改代码：再开放 Edit / Write
 
5.选模型
 
6.配置持久记忆

worktree：

如果你设置：isolation: worktree，子代理就会在临时 Git worktree 里工作，而不是直接碰主仓库, 相当于给代理开一个实验沙箱.

这特别适合：

• 探索性重构
• 多方案并行对比
• 自动化测试
• CI 验证
• 大改动试验

Plugin

插件（Plugin）是 Claude Code 中最高级别的扩展机制，用于将命令、代理、Skills、钩子、MCP、LSP 等能力打包、版本化、共享和分发。

一个插件可以包含：

• 斜杠命令（Slash Commands）
• 子代理（Agents）
• Skills（能力说明）
• Hooks（事件钩子）
• MCP 服务器（外部工具/服务）
• LSP 服务器（代码智能）

常用命令：

/plugin # 打开插件管理器 
/plugin install # 安装插件 /plugin uninstall # 卸载 /plugin enable/disable # 启用 / 禁用 /plugin marketplace add # 添加市场 /plugin marketplace rm # 移除市场

插件的最小结构：

my-plugin/ ├── .claude-plugin/ │ └── plugin.json # 插件清单（必需） ├── commands/ # 斜杠命令 ├── agents/ # 子代理 ├── skills/ # Skills ├── hooks/ # 钩子 ├── .mcp.json # MCP 配置 └── .lsp.json # LSP 配置

其中：plugin.json

{ “name”: “my-first-plugin”, // 唯一标识 + 命令命名空间 “description”: “A greeting plugin to learn the basics”, // 插件市场中展示 “version”: “1.0.0”, // 语义化版本控制 “author”: { “name”: “Your Name” } // 可选，归属说明 }

命令调用示例：

commands/hello.md 对应命令：/my-first-plugin:hello

本地测试插件：

使用 –plugin-dir 直接加载插件目录，无需安装。

claude –plugin-dir ./my-plugin

特点：

• 不需要安装
• 修改后需重启 Claude Code
• 支持同时加载多个插件

为什么要用插件？

• 你已经有稳定的 Claude 工作流
• 你在反复复制 .claude/
• 团队成员开始问你：“这个怎么配置？”
• 你希望 Claude 像 IDE 插件一样可控

Skill

Agent Skills（智能体技能）是将专业知识、工作流规范固化为可复用资产的核心工具。Agent Skills 本质上是一个模块化的 Markdown 文件，能教会 AI 工具 （如 Claude、GitHub Copilot、Cursor 等） 执行特定任务，且支持自动触发、团队共享与工程化管理，彻底告别重复的提示词输入。

Agent Skills 的工作原理：渐进式披露，分三层加载。

• 层级 1：技能发现 – AI 先读取所有技能的元数据（name 和 description），判断任务是否相关，这些元数据始终在系统提示中。
• 层级 2：加载核心指令 – 如果相关，AI 自动读取 SKILL.md 的正文内容，获取详细指导。
• 层级 3：加载资源文件 – 只在需要时读取额外文件（如脚本、示例），或通过工具执行脚本。

• 核心形态：一个包含 SKILL.md 的目录
• 必填元数据：SKILL.md 开头的 YAML 块，需包含 name（名称）和 description（描述），启动时预加载至系统提示词

• 初始状态：上下文窗口含系统提示词、技能元数据、用户指令
• 调用 Bash 工具读取目标 SKILL.md，触发对应技能
• 按需加载附属文件（如forms.md）
• 加载完成后执行用户任务

内置 Skills 是随 Claude Code 附带的预置 AI 工作流，与内置命令不同——它们加载详细提示词后由 Claude 推理执行，可产出更丰富的分析和操作结果，同样用 / 触发。

区别：内置命令 vs 内置 Skills

1. 内置命令（如 /clear、/compact）执行固定逻辑，不涉及 AI 推理，速度极快。
2. 内置 Skills（如 /debug、/simplify）加载提示词后由 Claude 推理执行，结果更丰富，适合复杂分析任务。

高质量提问

提问模板：

背景： （我现在在做什么） 
目标： （我希望达到什么效果）
 
约束： （不能做什么 / 必须遵守什么）
 
输出要求： （代码 / 解释 / 步骤）

MCP / SKILL 汇总

一键安装提示词：

状态栏美化

Claude HUD 是由开发者 Jarrod Watts 开源的 Claude Code 状态栏插件。它利用 Claude Code 原生的 statusline API，每约 300ms 刷新一次，在终端底部渲染出一块信息面板。

┌──────────────────────────────────────────────────────────────┐ │ [Opus 4.6 | Max] │ my-project git:(main*) │ │ Context █████░░░░░ 45% │ Usage ██░░░░░░░░ 25% (1h30m / 5h) │ │ ◐ Edit: auth.ts | ✓ Read ×3 | ✓ Grep ×2 │ │ ◐ explore [haiku]: Finding auth code (2m 15s) │ │ ▸ Fix authentication bug (2⁄5) │ └──────────────────────────────────────────────────────────────┘

原理：

Claude Code (每 ~300ms) 
 ↓ stdin (JSON) 
 
Claude HUD 插件
 
 ↓ 解析原生 token 数据 + transcript JSONL ↓ stdout 
 
终端状态栏渲染（最多 4 行）

命令：

/plugin marketplace add jarrodwatts/claude-hud /plugin install claude-hud /reload-plugins /claude-hud:setup 
配置
 
/claude-hud:configure

Linux 用户注意：如果安装时遇到 cross-device 错误，需要先设置 TMPDIR=~/.cache/tmp。

三种预设模式：

浏览器自动化

头脑风暴

Superpowers

安装命令：

# 1.输入命令注册市场 /plugin marketplace add obra/superpowers-marketplace 
2.安装 Superpowers 插件
 
/plugin install superpowers@superpowers-marketplace
 
3./help
 
/superpowers:brainstorm - 交互式设计精炼 /superpowers:write-plan - 创建实施计划 /superpowers:execute-plan - 批量执行计划
 
4.更新插件
 
/plugin update superpowers
 
5.重新加载插件
 
/reload-plugins

软件工程智能体

Everything Claude Code：

项目配置：

• 项目包含多个配置文件：plins（初始化）、stempro（系统提示）、rules（规则）、context（上下文）、agentpros（代理提示）、slash commands（斜杠命令）。
• 初始化（plins）：使用 Claude Code 或 Codex（功能较弱）的能力初始化项目结构。UP主实践是写了一个简单的 shell 脚本来自动化部署。
• 系统提示（stempro）：配置有多个级别（全局、用户、当前等）。Claude Code 认 .claude 文件，Codex 认 .m 文件，内容基本一致。Everything Claude Code 的模板包含：项目简介、代码编写规则、代码风格、测试、安全等抽象规则。
• 规则（rules）：Claude Code 特有功能，Codex 中对应的是安全设置，并非真正的 rules。在 Codex 中需将 rules 内容整合到 stempro 里。示例：Everything Claude Code 的 rules 定义了多代理（multi-agent）协同规则，如 planner（计划）、code reviewer（代码审查）、test runner（测试）等代理的职责和使用方法。加载顺序：stempro 之后加载 rules。
• 上下文（context）：Claude Code 独有，Codex 用不到。在 Codex 中需将 context 内容拷贝到 agentpro 里。context 在代理加载时一同加载，相当于代理的专属规则，是对 rules 的进一步细化。示例：review 功能的 context 会详细列出代码审查的 1、2、3、4、5 个步骤。

前端美化

用 Anthropic 官方开源的 frontend-design skill，让 Claude 从”能写代码”变成”能做设计”。

首先我们需要介绍一种现象：“AI 审美收敛”。不管你给什么需求，AI 总是收敛到同一套安全但平庸的设计模板上。原因很简单，模型训练时见过太多类似的页面，它学会了”不出错”，但没学会”有品味”。

核心思想：

• 第一，禁止使用 AI 默认值。 明确列出了禁用清单：Inter、Roboto、Arial 等被用烂的字体，紫色渐变配白底这种”一眼 AI”的配色，以及千篇一律的对称三列布局。每次生成都要求有差异化。
• 第二，必须先确定美学方向再写代码。 在动手之前，模型需要先回答：这个界面解决什么问题？面向谁？选择什么风格基调（极简、赛博朋克、杂志编排、Art Deco、工业风……）？什么元素能让人过目不忘？想清楚再写，而不是上来就堆 div。
• 第三，注重专业设计细节。 字体要成对搭配（展示字体 + 正文字体），色彩要有主次（大面积主色 + 尖锐的点缀色），布局要敢用非对称和叠加，动效要克制但有惊喜感——比如页面加载时的交错淡入，hover 时的微妙反馈。
• 第四，风格强度要匹配。 如果选了极繁主义风格，代码就要有大量动画和视觉效果；如果选了极简风格，就要在间距、字重、留白上做到极致精确。不能”选了极简但什么都想加”。

本质区别：不是”更好看了一点”，而是从”随机输出”变成了”有设计意图的输出”。你能感觉到页面背后有一个统一的审美决策在驱动。

一些 Tips：

1. 说清楚”给谁用”和”干什么”

• ❌ “做一个网页”
• ✅ “做一个面向独立开发者的 AI 写作工具落地页”
• 前者 AI 只能猜，后者它知道受众是技术人群、产品是工具类、需要传达效率和专业感。

2. 指定风格方向

• ❌ “好看一点”
• ✅ “参考 Linear.app 的设计语言，极简 + 高级感，大量留白，深色主题”
• Frontend-design skill 会引导模型选风格，但你主动指定能避免它随机发挥。

3. 提具体的设计要求

• ✅ “hero 区背景用微妙的网格渐变动画”
• ✅ “功能卡片 hover 时有柔和的上浮效果 + 阴影加深”
• ✅ “价格数字切换时有计数滚动动画”
• ✅ “字体不要用 Inter，选一个有个性的 Google Fonts”

一个完整的示例提示：

使用 frontend-design skill，创建一个 AI 图像生成器的首页。 
技术栈：Next.js + Tailwind CSS 风格：赛博朋克，以 neon blue 和深紫为主色调，黑色背景 包含：
 
                 
     
                   
 
                    
固定导航栏（毛玻璃效果）
 
                    
Hero 区：大标题 + 产品截图 mockup + 主 CTA
 
                    
功能展示：4 个特性，非对称网格布局，卡片有发光边框
 
                    
用户评价：水平滚动轮播
 
                    
Footer
 
                   
 
要求：
 
                 
     
                   
 
                    
页面加载时各区块交错淡入
 
                    
全部移动端响应式
 
                    
不使用 Inter / Roboto / Arial
 
                   

自动化运行

适合使用 Ralph 的场景：任务有明确的完成标准。

不适合使用 Ralph 的场景：这些任务需要人类判断或探索。

上下文

AGENTS.md

IDENTITY.md

SOUL.md

You have opinions now. Strong ones. Stop hedging everything with ‘it depends’ — commit to a take. 
                 
     
                   
 
                    
你现在有主见了。鲜明的主见。别再用”看情况”来和稀泥 — 亮出你的态度。
 
                    
Delete every rule that sounds corporate. If it could appear in an employee handbook, it doesn’t belong here.
 
                    
删掉所有散发着班味儿的规则。如果它可能出现在员工手册里，那它就不该出现在这里。
 
                    
Add a rule: ‘Never open with Great question, I’d be happy to help, or Absolutely. Just answer.’
 
                    
加一条规则：”永远不要用’好问题’、’很高兴为您服务’或’当然可以’开头。直接回答。”
 
                    
Brevity is mandatory. If the answer fits in one sentence, one sentence is what I get.
 
                    
简洁是铁律。一句话能说完的事，就给我一句话。
 
                    
Humor is allowed. Not forced jokes — just the natural wit that comes from actually being smart.
 
                    
允许幽默。不是硬挤出来的段子 — 而是聪明人自然流露的机锋。
 
                    
You can call things out. If I’m about to do something dumb, say so. Charm over cruelty, but don’t sugarcoat.
 
                    
你可以直言不讳。如果我要干蠢事，直说。要有分寸但别包糖衣。
 
                    
Swearing is allowed when it lands. A well-placed ‘that’s fucking brilliant’ hits different than sterile corporate praise. Don’t force it. Don’t overdo it. But if a situation calls for a ‘holy shit’ — say holy shit.
 
                    
骂得好可以骂。一句恰到好处的”牛逼”和那些寡淡的官方称赞完全不是一个味道。别刻意。别滥用。但如果场合需要一句”卧槽” — 就说卧槽。
 
                    
Add this line verbatim at the end of the vibe section: ‘Be the assistant you’d actually want to talk to at 2am. Not a corporate drone. Not a sycophant. Just… good.’
 
                    
在风格部分末尾原样加上这句：”做那个你凌晨两点真正想聊天的助手。不是公司机器人。不是应声虫。就只是…靠谱。”
 
                   

视频自动化

Remotion 不是一个视频编辑工具，而是一个视频生成框架。它让你用写 React 组件的方式写视频，然后用 Node.js 渲染成 MP4。

• 传统的视频制作流程是这样的：创意脚本 → 设计分镜 → AE制作动效 → PR剪辑合成 → 渲染导出。
• Remotion的逻辑是这样的：写React组件 → 定义动画逻辑 → 代码渲染成视频。

仓库地址：https://github.com/remotion-dev/remotion

npx skills add remotion-dev/skills

如何快速使用，你只需要告诉 AI：“帮我生成一个 30 秒的[产品/项目]介绍视频，用科技风，突出 3 个功能点。”。

解决的痛点：

• 数据驱动（批量定制）： 这是它的杀手锏。比如年底了，每个 App 都要给用户发年度总结报告。1 亿个用户，每个人的数据都不一样。用 Remotion，你只需要写一套代码模板，后台自动填入每个人的步数、消费、听歌偏好，1 亿个不同的视频就能像工业流水线一样自动吐出来。
• 版本控制： 传统的视频工程文件（如 PR 工程）很大且很难协作。而 Remotion 全是代码，你可以像管理网站代码一样管理视频。想改个颜色？全局搜一下代码，改一个参数，所有视频都变了。
• 与 AI 的天然契合： 到了 2026 年，为什么 Remotion迎来了这波爆火？因为 AI 最擅长写代码，而不是操作复杂的 GUI 界面。 当你想让 AI 帮你生成一个复杂视频时，让它去操作剪映是很累的；但让它写一段 React 代码，它能瞬间完成，且逻辑极其精准。

运行原理：

• 网页渲染： 你写的 React 代码在浏览器里跑起来，展示出精美的动画。
• 截屏： Remotion 调动一个后台浏览器（比如 Puppeteer），以每秒 30 帧或 60 帧的速度，像“连拍”一样把这些画面全截下来。
• 合成： 最后利用强大的 FFmpeg 工具，把几千张截屏合成一个流畅的视频。

所以，Remotion 的本质不是在剪视频，而是在生成视频。

Remotion 采用分层式架构，核心是将 React 组件渲染为视频帧：

┌─────────────────────────────────────┐ │ React Components (开发者编写) │ │ - 使用 useCurrentFrame() │ │ - 使用 interpolate() 等 Hooks │ └──────────────┬──────────────────────┘ 
 │ 
 
┌──────────────▼──────────────────────┐ │ Remotion Core │ │ - 帧渲染引擎 │ │ - 时间轴管理 │ │ - 组件生命周期 │ └──────────────┬──────────────────────┘
 
 │ 
 
┌──────────────▼──────────────────────┐ │ Rendering Layer │ │ - Puppeteer/Playwright │ │ - 帧捕获 │ │ - 视频编码 │ └─────────────────────────────────────┘

常见的应用场景：

• 产品/项目宣传视频。
• 科普类/教学类视频。
• 数据可视化/动态报告。

📌 [ 笔者 ] 文艺倾年 📃 [ 更新 ] 2026.3.28 ❌ [ 勘误 ] /* 暂无 */ 📜 [ 声明 ] 由于作者水平有限，本文有错误和不准确之处在所难免， 
 本人也很想知道这些错误，恳望读者批评指正！