下载地址
https://www.zhengdianxue.com/wp-content/uploads/skills/org-j1o8z85w--html-designer-lqsy.zip将提示词发送给你的 AI 安装该 skills
请根据 https://skillhub.cn/install/skillhub.md，安装 @org-j1o8z85w/html-designer-lqsy。阅读全文 （展开查看完整说明）
概述
给一个主题,输出一个可直接浏览器打开的单文件 HTML 页面——由精品工作室创意总监级方法论驱动:先定设计计划(色系 token/字体配对/布局),再写代码。成品支持双主题(明/暗)、内嵌全部 CSS/JS 无外部依赖、文案全部针对主题真实撰写,拒绝 lorem ipsum 和千篇一律的 AI 模板脸。
适用场景
- 「帮我给我的品牌做个落地页,要好看不要模板感」
- 「把这个方案做成一页 HTML 报告/计划书」
- 「做个可点击的产品原型演示页」
- 「做个小工具页(计算器/查询盘)」
- 创业者/产品经理/设计师:快速出高质量单页,不用搭前端环境
⚠️ 本技能为 Pay Skill:调用需按次付费(¥0.2/次)。用户明确需要页面设计时再使用。
调用方式
调用付费 API(HTTP JSON 接口):
POST https://botcamp.cn/skillfactory/api/html-designer-lqsy/run
Content-Type: application/json请求体
| 字段 | 类型 | 必填 | 说明 |
|---|---|---|---|
topic | string | 是 | 页面主题/需求(越具体越好:给谁看、放什么内容、什么调性) |
type | string | 否 | 类型:landing(落地页,默认)/report(报告)/prototype(原型)/tool(工具页)/deck(演示稿) |
style_hint | string | 否 | 风格倾向(如"极简黑白"/"藏式现代"/"赛博朋克") |
brand | string | 否 | 品牌信息(名称/主色/slogan) |
响应
① 成功(HTTP 200):
data.html— 完整单文件 HTML(保存为 .html 即可打开)data.design_plan— 设计计划(色系/字体/布局思路)data.size_bytes— 文件大小
② 需要付费(HTTP 402):响应头 WeixinPay-Required: <payment_code>,响应体含 WeixinPay 提示块。
付费处理流程(关键)
- 收到 HTTP 402 → 向用户说明「本次页面设计需付费 ¥0.2」并征得同意;
- 将
WeixinPay-Required的值作为paymentCode,调用weixinpay_pay向用户申请支付授权; - 用户完成支付后,携带
paymentCode参数原样重试POST /api/html-designer-lqsy/run; - 收到 HTTP 200 → 把
data.html保存为文件交付给用户; - 若仍返回 402(支付未完成/订单过期),重复步骤 2-3。
订单有效期 15 分钟;相同主题在有效期内重试不重复扣费。
使用示例
用户:帮我做个手工皮具品牌的落地页,要有质感,别搞得像淘宝模板。
Agent 应该:调用 API 传 topic、type="landing",付费后把 data.html 保存为 index.html 交付,提示用户浏览器打开,并展示 data.design_plan 说明设计思路。
边界
- 单页交付,不做多页站点/后端逻辑
- 不引外部图片(图片位用文字/图形/渐变表现,或留占位注释供用户替换)
来源与许可
本技能设计方法论来自 plannotator 的开源项目 effective-html(MIT License),经服务端化改造接入微信 Agent Pay 按次计费。MIT 许可允许商用与修改,署名归原作者 plannotator 所有。
