메뉴
设计稿还原规则。先输出布局分析报告，再按需加载模版
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
SOC 직업 분류 기준
Implement tasks from an OpenSpec change. Use when the user wants to start implementing, continue implementation, or work through tasks.
Archive a completed change in the experimental workflow. Use when the user wants to finalize and archive a change after implementation is complete.
Archive multiple completed changes at once. Use when archiving several parallel changes.
Continue working on an OpenSpec change by creating the next artifact. Use when the user wants to progress their change, create the next artifact, or continue their workflow.
Enter explore mode - a thinking partner for exploring ideas, investigating problems, and clarifying requirements. Use when the user wants to think through something before or during a change.
Fast-forward through OpenSpec artifact creation. Use when the user wants to quickly create all artifacts needed for implementation without stepping through each one individually.
| id | engineering/bkui-builder |
| name | 蓝鲸 MagicBox 3.0 组件专家规则 |
| category | engineering |
| description | 设计稿还原规则。先输出布局分析报告，再按需加载模版 |
| tags | ["vue3","bkui-vue","rules","template","expert"] |
| updated_at | "2026-01-19T00:00:00.000Z" |
div 自创 sidebar/header/menu<bk-navigation><table>, <button>，必须用 bk-table, bk-buttonStep 1: 分析设计稿 - 判断：主题深/浅色？表格/表单页？菜单有图标？
Step 2: 加载模版 (FetchMcpResource, server: user-BKUI-Knowledge)
| 判断结果 | URI |
|---|---|
| 深色侧边栏 | skill://bkui-builder/assets/layouts/admin-layout-dark.vue |
| 浅色侧边栏 | skill://bkui-builder/assets/layouts/admin-layout-left.vue |
| 表格页+Tab | skill://bkui-builder/assets/pages/table-page.vue |
| 有图标 | skill://bkui-builder/references/visual-mapping.md |
Step 3: 参考模版生成代码
<bk-navigation navigation-type="left-right" need-menu default-open>
<template #menu>
<bk-menu :active-key="activeMenu" :opened-keys="['group-1']">
<bk-menu-item key="home">首页</bk-menu-item>
</bk-menu>
</template>
</bk-navigation>
⚠️ 属性名是
opened-keys，不是default-open-keys
// ✅ 正确
import { Search, Plus, Close } from 'bkui-vue/lib/icon';
// ❌ 错误: import { Search } from '@bkui-vue/icon';
skill://bkui-builder/references/code-snippets.md - 代码片段skill://bkui-builder/references/checklist.md - 质量检查skill://bkui-builder/references/checklist.mdskill://bkui-builder/references/code-snippets.mdskill://bkui-builder/references/visual-mapping.mdskill://bkui-builder/assets/layouts/admin-layout-dark.vueskill://bkui-builder/assets/layouts/admin-layout-left.vueskill://bkui-builder/assets/layouts/admin-layout-top.vueskill://bkui-builder/assets/pages/dashboard-page.vueskill://bkui-builder/assets/pages/detail-page.vueskill://bkui-builder/assets/pages/table-page.vueskill://bkui-builder/assets/pages/wizard-form.vue根据 SKILL.md 中的 IF-THEN 规则判断是否需要加载