메뉴
**立即触发条件**：用户提到"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에서 현재 제공할 수 있는 파일을 다운로드하세요.
SOC 직업 분류 기준
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: '工作表: 新闻资讯'
})