菜单
**立即触发条件**：用户提到"HAP 搭建网站"、"HAP 前端项目"、"HAP 作为数据库"、"企业官网"、"官网"、"通过 HAP 搭建"、"用 HAP 做网站"、"HAP 网站"、"搭建官网"、"前后端分离"、"内容管理系统"、"HAP 前端"、"HAP 官网"。提供完整的 HAP + 前端项目搭建指南，包括 HAP 后台配置、前端项目结构、API 集成和数据渲染。
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/garfield-bb/hap-skills-collection --skill hap-frontend-project命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
正在显示 SKILL.md
| name | hap-frontend-project |
| description | **立即触发条件**：用户提到"HAP 搭建网站"、"HAP 前端项目"、"HAP 作为数据库"、"企业官网"、"官网"、"通过 HAP 搭建"、"用 HAP 做网站"、"HAP 网站"、"搭建官网"、"前后端分离"、"内容管理系统"、"HAP 前端"、"HAP 官网"。提供完整的 HAP + 前端项目搭建指南，包括 HAP 后台配置、前端项目结构、API 集成和数据渲染。 |
<EXTREMELY_IMPORTANT> 当用户提到以下任何情况时，必须使用此技能：
技能优先级：
This is MANDATORY. No exceptions. </EXTREMELY_IMPORTANT>
本技能提供使用**明道云 HAP（高级应用平台）**作为后台内容管理系统，搭建完整前后端分离项目的完整工作流。适用于企业官网、内容管理网站、数据展示平台、表单收集系统等多种场景。
核心能力：
适用场景：
目标： 理解用户需求，评估现有 HAP 应用结构
必须执行：
读取应用结构
// 获取应用工作表列表
mcp__hap_mcp____get_app_worksheets_list({
responseFormat: 'md'
})
// 获取特定工作表结构
mcp__hap_mcp____get_worksheet_structure({
worksheet_id: '工作表ID',
responseFormat: 'md',
ai_description: '工作表: <工作表名称>'
})
结构差距评估
输出评估报告
关键原则：
目标： 获得用户明确同意后再执行结构变更
触发条件：
确认方式：
使用 AskUserQuestion 工具，清晰列出建议的操作：
AskUserQuestion({
questions: [{
question: "根据业务需求分析，当前应用缺少「新闻资讯」相关数据表。是否允许创建新的工作表？",
header: "新增工作表",
multiSelect: false,
options: [
{
label: "同意创建(推荐)",
description: "创建「新闻资讯」工作表，包含标题、封面图、发布时间、内容等字段，并添加 5 条示例数据"
},
{
label: "仅创建表结构",
description: "只创建工作表和字段，不添加示例数据。前端页面可能显示为空"
},
{
label: "暂不创建",
description: "跳过此工作表，使用现有数据完成开发。新闻模块将无法展示"
}
]
}]
})
禁止行为：
目标： 在 HAP 中创建/补充数据结构和示例数据
执行顺序：
创建新工作表（如用户同意）
mcp__hap_mcp____create_worksheet({
name: '新闻资讯',
alias: 'news',
fields: [
{ name: '标题', type: 'Text', isTitle: true, required: true },
{ name: '封面图', type: 'Attachment', required: false },
{ name: '发布时间', type: 'Date', required: false },
{ name: '内容', type: 'Text', required: false },
{ name: '是否发布', type: 'Checkbox', required: false }
],
ai_description: '工作表: 新闻资讯'
})
补充字段到现有工作表（如用户同意）
mcp__hap_mcp____update_worksheet({
worksheet_id: '现有工作表ID',
addFields: [
{ name: '封面图', type: 'Attachment' },
{ name: '详情', : }
],
:
})
关键要求：
[] 或空字符串 ''测试图片 URL（8个）：
详见 references/hap-as-database-guide.md 第 1.3 节
目标： 获取 HAP API 认证信息
方法一：通过 MCP 配置提取（推荐）
{
"mcpServers": {
"hap-mcp-应用名": {
"url": "https://api.mingdao.com/mcp?HAP-Appkey=xxx&HAP-Sign=xxx"
}
}
}
从 URL 参数中提取：
HAP-Appkey: 从 URL 参数提取HAP-Sign: 从 URL 参数提取方法二：手动获取
获取工作表 ID 和字段 ID：
get_worksheet_structure/v3/app/worksheets/{worksheetId}/structuredata-controlid 属性目标： 创建完整的前端项目结构
项目结构：
project-name/
├── index.html # 主页面
├── css/
│ └── style.css # 样式文件
├── js/
│ ├── config.js # HAP 配置（Appkey、Sign、字段映射）
│ ├── api.js # API 封装（请求、分页、筛选）
│ └── main.js # 应用逻辑（渲染、事件处理）
├── images/ # 图片资源（可选）
└── README.md # 项目说明
核心文件模板：
1. js/config.js
const CONFIG = {
API_BASE_URL: 'https://api.mingdao.com',
HAP_APPKEY: '你的HAP_APPKEY',
HAP_SIGN: '你的HAP_SIGN',
WORKSHEETS: {
PRODUCTS: '产品表ID',
NEWS: '新闻表ID'
},
PRODUCT_FIELDS: {
NAME: '产品名称字段ID',
IMAGE: '产品图片字段ID',
PRICE: '参考价格字段ID'
}
};
2. js/api.js
getRows() - 获取记录列表（支持分页、筛选、排序）getRecord() - 获取单条记录详情getFieldValue() - 通用字段值解析函数（支持所有字段类型）3. js/main.js
4. index.html
5. css/style.css
详细代码模板： 参考 references/hap-as-database-guide.md 第 2-6 节
目标： 实现前端与 HAP API V3 的数据交互
核心要点：
CORS 跨域请求
headers: {
'HAP-Appkey': CONFIG.HAP_APPKEY,
'HAP-Sign': CONFIG.HAP_SIGN,
'Content-Type': 'application/json'
}
分页查询
API.getRows(worksheetId, {
pageIndex: 1,
pageSize: 20,
includeTotalCount: true,
filter: { /* 筛选条件 */ },
sorts: [ /* 排序 */ ]
})
字段值解析
downloadUrlvalue 属性name 或 sid=== '1'详细 API 使用规范： 参考 references/hap-api-usage-guide.md
目标： 实现动态数据渲染和用户交互
核心要求：
示例：
async loadProducts() {
try {
this.showLoading();
const data = await API.getRows(CONFIG.WORKSHEETS.PRODUCTS, {
pageSize: 20,
filter: {
type: 'group',
logic: 'AND',
children: [{
type: 'condition',
field: CONFIG.PRODUCT_FIELDS.PUBLISHED,
operator: 'eq',
value: ['1']
}]
}
});
this.renderProducts(data.rows);
} catch (error) {
this.showError('加载失败，请刷新重试');
} finally {
this.hideLoading();
}
}
目标： 自动启动本地开发服务器，供用户预览
启动方式（按优先级）：
Python HTTP Server（推荐）
python -m http.server 8000
npx serve
npx serve -p 8000
PHP 内置服务器
php -S localhost:8000
执行要求：
run_in_background: true 参数输出示例：
✅ 项目搭建完成！
🚀 本地服务器已启动
📍 访问地址: http://localhost:8000
💡 提示: 在浏览器中打开上述地址即可预览网站
✅ 允许静态的内容：
❌ 禁止静态的内容（必须从 HAP 获取）：
✅ 允许的操作：
❌ 严禁的操作：
🔴 重要警告：筛选必须使用 key（UUID），不能使用显示文本！
// ❌ 错误：使用显示文本
value: ['现代简约'] // 筛选失败！
// ✅ 正确：使用 key
value: ['a1b2c3d4-e5f6-7890-abcd-ef1234567890'] // 筛选成功
// 获取 key 的方法：
// 1. 调用 get_worksheet_structure 获取字段的 options
// 2. 从 options 中找到匹配的 key
方法 1: 使用 MCP（推荐）
mcp__hap_mcp____get_worksheet_structure({
worksheet_id: '工作表ID',
responseFormat: 'md'
})
方法 2: API 查询
fetch('https://api.mingdao.com/v3/app/worksheets/{worksheetId}/structure', {
headers: {
'HAP-Appkey': 'xxx',
'HAP-Sign': 'xxx'
}
})
方法 3: 浏览器审查元素
data-controlid 属性// 附件字段返回格式
const attachments = row[fieldId]; // Array
// [{downloadUrl: 'https://...', fileName: '图片.jpg'}]
// 获取第一个附件 URL
const imageUrl = attachments[0]?.downloadUrl || '';
// 使用 HAP CDN 参数优化
const thumbnailUrl = `${imageUrl}?imageView2/2/w/300`;
开发环境： 可直接使用（localhost 不会泄露）
生产环境：
references/hap-as-database-guide.md - 完整的 HAP 前后端项目搭建指南
references/hap-api-usage-guide.md - HAP API V3 使用规范
在执行本技能时，请确保完成以下所有步骤：
技能版本: v1.0
最后更新: 2026-01-11
适用场景: HAP 前后端分离项目搭建
添加示例数据（如用户同意）
// 🔴 重要：附件字段必须填充图片 URL
mcp__hap_mcp____batch_create_records({
worksheet_id: '工作表ID',
rows: [
{
fields: [
{ id: '标题字段ID', value: '示例新闻标题' },
{ id: '封面图字段ID', value: [{
name: 'news.jpg',
url: 'https://m1.mingdaoyun.cn/doc/20251205/095p6B8tbW3x9v1A5lc41O8QdYaua101bM8Wb7442Q2ZfKb21m8deM1U0r4UaC9h.png?e=1765001146299&token=...'
}] },
{ id: '发布时间字段ID', value: '2024-12-01' },
{ id: '内容字段ID', value: '新闻内容...' },
{ id: '是否发布字段ID', value: '1' }
]
}
// ... 至少 5 条示例数据
],
triggerWorkflow: false,
ai_description: '工作表: 新闻资讯'
})
基于 SOC 职业分类