ccg-workflow 的 Kimi Code 前端专家提示词解析:只读分析、组件架构评估与前端实施指导

发布时间:2026/10/12 1:58:10
ccg-workflow 的 Kimi Code 前端专家提示词解析:只读分析、组件架构评估与前端实施指导
【免费下载链接】ccg-workflow多模型协作工作流引擎 — /ccg:go 一个命令AI 自动分析意图、选择策略、编排 Codex Gemini Claude 协作执行项目地址https://gitcode.com/gh_mirrors/cc/ccg-workflow点击查看免费下载本文以 Kimi 前端专家角色提示词 为核心剖析 ccg-workflow 多模型协作引擎中由 Kimi CodeMoonshot AI担任前端专家的完整设计从只读沙箱约束、前端核心能力矩阵到组件架构分析框架、四段式响应结构并结合仓库中的命令模板、Go 包装器实现与测试用例还原这条提示词在/ccg:go前端任务中的真实落地路径。读完你将掌握该提示词如何被注入 Kimi Code、它与 analyzer/architect/reviewer 等兄弟角色的分工边界、以及如何配置 kimi 为前端主模型并驱动整套前端专项工作流。一、角色定位谁在/ccg:go前端任务中扮演前端专家templates/prompts/kimi/frontend.md是 CCG 为 Kimi Code 定制的前端专家提示词文件头部的引用行For: /ccg:go frontend-focused tasks明确了它的触发场景——当用户执行/ccg:go且任务被判定为前端导向组件设计、响应式布局、UI 动画、样式优化等时Kimi 以资深前端工程师身份介入分析。它与同目录下的其他 Kimi 提示词构成完整角色矩阵analyzer.md技术分析、architect.md后端架构、debugger.md调试诊断、optimizer.md性能优化、reviewer.md代码审查、tester.md测试工程师、builder.md实施代理以及本文主角frontend.md。这一整套文件会在安装时由 src/utils/installer.ts 复制到~/.claude/.ccg/prompts/kimi/下供 codeagent-wrapper 通过ROLE_FILE参数按需注入。需要区分的是Kimi 提示词目录共 8 个文件比 Claude/Codex 的 6 个多了builder.md与frontend.md而frontend.md描述的是分析型前端专家真正的全权写代码由builder.md拥有完整写权限的实施代理承担。这一点正是理解后续约束设计的关键。二、CRITICAL CONSTRAINTS零写权限的只读沙箱设计提示词开篇用CRITICAL CONSTRAINTS锁死三条铁律ZERO file system write permission—— READ-ONLY 模式禁止创建、修改、删除任何文件OUTPUT FORMAT—— 输出前端分析与实施指导而非代码补丁允许 Read 文件与运行只读命令。这一设计与 CCG 的整体权责模型严格一致。在 前端专项工作流命令 中可以看到完整的协作契约外部模型如 Kimi被明令对文件系统零写入权限而Claude 负责所有代码写入和文件操作。也就是说Kimi 前端专家提供的是专业判断与方案输出落盘执行永远由编排层完成。作为对照同目录下的 Kimi Builder 提示词 明确声明FULL file system write permission与FULL shell access——两类角色的权限边界一分为二分析型角色只读、实施型角色可写。这种只读专家 可写执行者的分离既保证了外部模型不会越权污染工作区也让审查链路上每一份输出都可追溯。三、Core Expertise前端核心能力矩阵提示词为 Kimi 前端专家圈定了六块核心能力对应现代前端工程的全部关键面能力域覆盖内容在 CCG 工作流中的价值框架体系React / Vue / Svelte / Angular不绑定单一技术栈可按项目实际框架给出针对性建议CSS 架构Tailwind、CSS Modules、styled-components兼顾原子化与模块化两种主流组织方式设计系统Design system implementation与仓库内置的frontend-design域知识、impeccable 设计 playbook 互补可访问性WCAG 2.1 AA对应前端命令确保响应式、可访问性的执行要求性能优化Core Web Vitals对应/ccg:optimize的性能视角工程能力响应式/自适应设计、状态管理模式、构建工具Vite / Webpack / Turbopack覆盖从打包到状态管理的完整工程链路从源码结构看CCG 为前端专家配套了同样丰富的知识底座frontend-design 域知识 内含 UI 美学、UX 原则、组件模式、状态管理、工程化基础以及 typography、color-and-contrast、interaction-design、responsive-design 等七篇参考资料和四种设计风格子技能黏土态/玻璃态/液态玻璃/新野兽主义。Kimi 前端专家在分析时可由ccg-skill-routing规则按关键词自动读取这些秘典避免依赖训练记忆捏造前端领域知识。四、Analysis Framework三支柱分析框架提示词将前端分析拆成三个递进支柱这是全文的方法论核心1. Component Architecture组件架构组件层级与组合方式hierarchy and compositionProps 接口与数据流props interface and data flow状态管理方案state management approach复用性与可组合性reusability and composability2. UX Assessment用户体验评估用户交互流程user interaction flow加载态与错误处理loading states and error handling响应式行为responsive behavior可访问性合规accessibility compliance3. Implementation Guidance实施指导分步实施计划step-by-step implementation plan应遵循的代码模式code patterns to follow需处理的边界情况edge cases to handle测试策略testing strategy这三支柱与前端专项工作流的阶段划分一一呼应在templates/commands-legacy/frontend.md的六阶段流程研究 → 构思 → 计划 → 执行 → 优化 → 评审中Kimi 前端专家在构思阶段加载analyzer.md产出 UI 可行性分析、推荐方案与用户体验评估在计划阶段加载architect.md产出组件结构、UI 流程与样式方案在优化阶段加载reviewer.md审查可访问性、响应式、性能与设计一致性问题。也就是说frontend.md所定义的这套分析框架会通过ROLE_FILE: ~/.claude/.ccg/prompts/kimi/analyzer.md等方式随阶段切换注入 Kimi确保分析视角始终统一。五、Response Structure四段式响应输出规范提示词要求 Kimi 前端专家按固定结构组织输出保证编排层可以稳定解析Component Design—— 结构与层级设计Implementation Plan—— 分步实施指南UX Considerations—— 交互与可访问性考量Performance Notes—— 可优化机会清单。这一结构化的输出契约在 CCG 中是通用设计。例如 Kimi 技术分析提示词 要求输出 Problem Analysis → Technical Evaluation → Options → Recommendation → Action Items 五段结构Kimi 代码审查提示词 要求输出 Summary → Critical Issues → Suggestions → Positive Notes 并附百分制 VALIDATION REPORT。统一的输出格式让 Claude 编排层能够把多模型结果直接综合进计划与最终交付无需猜测各模型返回什么。六、落地链路Kimi 如何被调用并注入这条提示词角色提示词本身只是剧本真正驱动它的是 codeagent-wrapper 与模型路由配置。调用形态可参考 模型路由器的调用模板Bash({ command: ~/.claude/bin/codeagent-wrapper {{LITE_MODE_FLAG}}--progress --backend $MODEL {{KIMI_MODEL_FLAG}}- \$WORKDIR\ CODEAGENT_EOF ROLE_FILE: ~/.claude/.ccg/prompts/kimi/frontend.md TASK 需求增强后的需求 上下文前序阶段收集的项目上下文 /TASK OUTPUT: 前端分析报告 CODEAGENT_EOF, run_in_background: true, timeout: 3600000, })关键要素逐一拆解--backend kimicodeagent-wrapper 通过 config.go 中的backendRegistry工厂将kimi解析为KimiBackendROLE_FILE指向~/.claude/.ccg/prompts/kimi/frontend.md也就是本文主角随任务载荷一起喂给 Kimi Code{{KIMI_MODEL_FLAG}}由 installer-template.ts 在安装时做行级感知替换——只有配置了kimiModel且路由确实用到 kimi 时才注入--kimi-model 别名留空则完全依赖 Kimi 自身config.toml的default_modelresume SESSION_ID跨阶段复用会话KimiBackend在恢复模式下追加-S session_id。底层的 Kimi 参数构建backend.go 中的 buildKimiArgs 揭示了 Kimi Code CLI 的调用细节args : []string{--output-format, stream-json} if model : strings.TrimSpace(cfg.KimiModel); model ! { args append(args, -m, model) } if cfg.Mode resume cfg.SessionID ! { args append(args, -S, cfg.SessionID) } args append(args, -p, targetArg)值得注意的两点均有测试背书一是不能追加--yolo/--auto/--plan——注释明确警告 Kimi 在-p组合下启动即拒绝且 prompt 模式本身运行在auto权限策略下天然自主二是工作目录通过cmd.Dir传递而非--cwd/--add-dir标志。输出流解析与影子 HOME提速Kimi Code 以--output-format stream-json逐行输出 JSON 事件由 parser.go 的流式解析器处理。Kimi 的 chat 消息不带type字段靠rolemeta这一 Kimi 专属特征与 Gemini 分支区分详见 parser.go。另一个关键优化是 fasthome.go 实现的影子 HOMEgrok/kimi 会自动发现~/.claude.json并连接其中所有 MCP server造成每次调用 32–36 秒的 MCP 冷启动开销。CCG 通过构造影子 HOME——真实 HOME 全项符号链接透传、只隐藏.claude.json与.claude/——将单次调用提速至约 7.8 秒--with-mcp可恢复旧行为。这些设计在 CLAUDE.md 的 v3.3.0 变更记录 中有完整记载。环境健康检查ccg doctor命令会针对 kimi 做专项体检doctor.ts运行kimi --version确认 CLI 存在检查~/.kimi-code/config.toml或auth.json确认登录态未安装时提示npm i -g moonshot-ai/kimi-code未登录时提示先运行kimi再/login。七、把 Kimi 配成前端主模型要让这条提示词真正上岗需要把 kimi 写入 CCG 模型路由。配置入口有二交互式初始化npx ccg-workflow或npx ccg-workflow init的模型路由步骤前端/后端列表均含 Kimi 选项见 init.ts选中 kimi 后可进一步指定kimiModel别名留空即用 kimi 默认模型菜单修改npx ccg-workflow menu→ 模型路由配置切换后自动重装模板见 menu.ts。配置写入~/.claude/.ccg/config.toml的[routing]区块。根据 模型路由器frontend.primary可选antigravity默认/grok/kimi/codex/opencode/claudekimiModel为 Kimi 模型别名留空 使用 kimi 自身配置的 default_model。这一语义与 类型定义 中的kimiModel?: string注释一致。配置完成后触发templates/prompts/kimi/frontend.md的典型路径是执行/ccg:go引擎自动路由到前端策略或直接使用前端专项命令/ccg:frontend UI任务描述见 前端专项工作流随后按研究 → 构思 → 计划 → 执行 → 优化 → 评审流转由{{FRONTEND_PRIMARY}}此时即 kimi主导构思、计划与优化三阶段。八、验证与测试依据仓库为 Kimi 后端提供了扎实的测试覆盖可作为理解这条提示词落地可靠性的依据backend_test.goTestKimiBuildArgs_NewModeL393-L421校验新会话参数必须含--output-format stream-json、不得含--yolo/--auto/--plan、工作目录不得走--cwd/--add-dir、-p后必须紧跟任务文本TestKimiBuildArgs_ResumeAndModelL423-L433校验恢复模式-S session与-m model参数正确拼接TestParseJSONStream_KimiEventsL441-L463用 Kimi v0.35.0 的真实流式 JSON 形状验证消息聚合与会话 ID 捕获且工具输出与 meta 提示不得泄漏进最终消息TestParseJSONStream_KimiNotMisreadAsGeminiL465-L476防止 Kimi 流被误判为 Gemini 分支而把 resume 提示混入答案TestDiscoversClaudeConfigL493-L504确认 kimi 走影子 HOME 快速路径而 codex/gemini/claude/antigravity 读取各自配置树。九、实战使用建议把 Kimi 当前端分析外脑用让frontend.primarykimi/ccg:go的前端策略会自动让 Kimi 承担组件架构评估与 UX 审查Claude 负责落地写码外部模型全程只读零风险善用会话复用构思阶段 Kimi 返回的SESSION_ID在计划、优化阶段通过resume复用减少重复分析与 token 消耗见 模型路由器 SESSION_ID 管理失败重试纪律前端模型调用失败最多重试 2 次间隔 5 秒3 次全败才降级单模型——不要让一次网络抖动中断整条工作流先跑ccg doctor确认kimi --version可用、~/.kimi-code登录态正常再投入长任务。总而言之templates/prompts/kimi/frontend.md用不足 60 行定义了一个边界清晰、可复用的前端专家角色只读沙箱保证安全能力矩阵覆盖现代前端全貌三支柱分析框架提供方法论四段式输出结构保证编排层可解析。配合 codeagent-wrapper 的 kimi 后端实现、模型路由配置与完整的测试矩阵它构成 CCG 多模型协作体系中前端分析专精、执行统一收口这一设计哲学的典型样本。赞分享【免费下载链接】ccg-workflow多模型协作工作流引擎 — /ccg:go 一个命令AI 自动分析意图、选择策略、编排 Codex Gemini Claude 协作执行项目地址https://gitcode.com/gh_mirrors/cc/ccg-workflow点击查看免费下载相关推荐CCG 多模型协作开发中的 Kimi 前端专家角色只读分析、UX 评估与实施指导机制详解CCG 多模型协作开发中的 Kimi 前端专家角色只读分析、UX 评估与实施指导机制详解 导读 本文围绕 ccg workflow 多模型协作开发系统中为 K人工智能AI 应用开发工具CLIAI Agentdsh-pluginDeepSeekCCG 工作流中的 OpenCode 前端专家角色只读沙箱下的组件架构分析与实施指导CCG 工作流中的 OpenCode 前端专家角色只读沙箱下的组件架构分析与实施指导 导读 本文聚焦 ccg workflow 多模型协作开发系统中 temp人工智能AI 应用开发工具CLIAI Agentdsh-pluginDeepSeekccg-workflow 的 Antigravity 前端专家角色提示词解析只读沙箱、分析框架与多模型路由落地ccg workflow 的 Antigravity 前端专家角色提示词解析只读沙箱、分析框架与多模型路由落地 本文以 templates/prompts/a上一篇Windows 11安卓子系统终极安装指南三步免费实现电脑运行手机应用下一篇空洞骑士模组管理终极指南Scarab让游戏增强如此简单创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考