SuperAPI AI 工具集

mock

前端与建站

查看项目

更新于 10-15 22:16

技能介绍

用途:把粗略想法或现有界面快速做成多个 UI 设计变体,输出为单个自包含 HTML 文件,内置顶部视图切换器,方便直接交给他人查看。强调速度与低流程成本:不过度追问,推断合理默认值并一次性确认。

主要能力:一个文件包含 N 个变体,每个变体是 <section class="view" id="...">,由对应 .vbtn 切换,支持 URL hash 深链接(如 #v2);所有 CSS/JS 内联,无外部样式表、字体、脚本或远程图片,图片用 CSS、内联 SVG 或 data: URI,因此从磁盘打开、作为邮件附件或通过 URL 访问都能一致渲染;响应式,可在手机上评审;页脚标注这是 mockup 而非可用成品。

使用方式:先做简短访谈,只问无法合理推断的内容,包括要模拟什么(描述、仓库文件、URL、截图或口头说明)、几个变体及变化维度、风格方向与约束、交付去向(下载/邮件/公开链接或仅构建)。若用户要求仅构建(/mock --local、"just build the file"、"build only"、"don't publish"、"no public link"),则跳过发布路径,仅通过下载和/或邮件交付。构建时从技能目录的 template.html 开始,复制到工作文件填写,写到临时路径如 /tmp/mock-<slug>.html,slug 用短 kebab-case([a-z0-9-],≤64 字符)。分享前检查文件可打开、切换器可用(如 grep 每个 data-view 都有匹配 id)。

去 AI 默认风格:写样式前调用配套 unslop-ui 技能(build 模式),对颜色、字体、圆角、渐变和布局做有意的非默认选择;避免 AI 紫(indigo/violet/#6366f1 系)作主色、渐变填充标题文字、仅用 Inter/Geist/Roboto、emoji 当图标、居中 hero 加三特性卡片骨架,除非该变体刻意做 AI 默认外观对比。交付前运行扫描:python3 ~/.claude/skills/unslop-ui/scripts/devibe_scan.py /tmp/mock-<slug>.html,若报 HIGH 或 "STRONG AI-default look" 需先修复,并在交付摘要中提及 vibe 分数。

交付:发布到 URL 为可选,需自备静态主机,技能不附带主机;若有接受认证上传的静态主机(S3/R2 桶、Worker/路由、scp 目标),把文件 PUT/复制到 .../mocks/<slug>.html 并给出 URL。邮件路径通过邮件集成创建草稿(绝不自动发送),附件为 base64 编码、mimeType: "text/html"、filename: "<slug>.html",若已发布 URL 也写入正文。下载路径直接把文件交给用户。

限制:用于一次性设计探索,不是生产渲染,刻意不携带数据身份、品牌或接口契约;发布需自备静态主机;邮件需可用邮件集成;未提供具体收费、价格或平台信息。