mockup-prototype

Mockup 原型

使用 Copilot CLI 创建、迭代和分享交互式 HTML mockup 的端到端工作流。

何时使用此技能

• 用户要求“创建 mockup”或“制作 UI 原型”
• 用户想要并排比较不同的设计方案
• 用户要求“部署”或“与同事分享”mockup
• 用户想要快速直观地探索一个功能创意

阶段 1：生成

询问 mockup 应放在哪里

创建文件前，询问用户要在哪个仓库中操作。mockup 文件从一开始就放在仓库的本地克隆中，无需之后再复制。

1. 询问：“这个 mockup 应放在哪个仓库中？”（例如，acme/feature-explorer、contoso/design-lab）
2. 找到本地克隆（检查 ~/GitHub/<org>/<repo> 或 ~/GitHub/<repo>）
3. 查找现有的文件夹惯例：docs/mockups/、considerations/、designs/、proposals/。如果都没有，则使用 docs/mockups/。
4. 在 <repo>/docs/mockups/<feature-name>/mockup.html 创建 mockup

创建 mockup

创建一个独立的 HTML 文件，所有 CSS 均内嵌其中。不要使用外部依赖，也不要添加构建步骤。

样式指南

匹配所模拟产品的视觉风格。如果用户指定了产品或品牌，请复现其外观（颜色、间距、排版）。如果未指定具体产品，默认使用简洁的深色主题：

Token	值
背景（页面）	#0d1117
背景（表面）	#161b22
背景（叠层）	#21262d
文本（主要）	#e6edf3
文本（次要）	#9198a1
文本（弱化）	#7d8590
边框	#30363d
蓝色	#4493f8
绿色	#3fb950
红色	#f85149
黄色	#d29922
紫色	#a371f7
字体栈	-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif

图标使用内嵌 SVG。不要引用外部图标库或 CDN。

比较多个选项

展示不同方案时，使用标签页布局：

<div class="option-nav">
  <button class="option-btn active" onclick="show('a')">A. Option name</button>
  <button class="option-btn" onclick="show('b')">B. Option name</button>
</div>


<div class="mockup-section active" id="section-a">
  
  
</div>
<div class="mockup-section" id="section-b">
  
  
</div>

<script>
function show(id) {
  document.querySelectorAll('.mockup-section').forEach(s => s.classList.remove('active'));
  document.querySelectorAll('.option-btn').forEach(b => b.classList.remove('active'));
  document.getElementById('section-' + id).classList.add('active');
  event.target.classList.add('active');
}
</script>

关键规则：

• 叙述性内容（优缺点）应放在每个 .mockup-section 内部，而不是外部
• 每次仅通过 CSS（display:none / display:block）显示一个区块
• 使用真实的数据，不要使用占位文本

本地预览

创建文件后，始终自动在浏览器中打开：

open <repo-path>/docs/mockups/<feature-name>/mockup.html   # macOS
xdg-open <repo-path>/docs/mockups/<feature-name>/mockup.html  # Linux

阶段 2：迭代

所有更改均保留在本地。除非用户明确要求部署或推送，否则不要推送到远程仓库。

1. 根据用户反馈编辑 HTML 文件
2. 每次更改后都必须在浏览器中重新打开，让用户立即看到更新
3. 常见的迭代方式：
   • 添加、移除或重新排列选项
   • 在每个选项下方添加优缺点说明
   • 微调布局、间距和颜色
   • 修复通过截图报告的视觉问题

**重要：**此阶段不要执行 git commit、git push，也不要创建 PR。用户会在准备就绪时告知你。

阶段 3：部署并分享

仅当用户明确要求部署、推送或分享时，才开始此阶段。

确认公开可见性

部署前，提醒用户：

此操作会将 mockup 部署到公开 URL。请确认内容可以安全地对外分享（参见上文的安全部分）。

如果用户尚未确认，请先征求同意再继续。

选择部署目标

询问用户要部署到哪里：

• GitHub Pages（默认）：通过仓库的 Pages 网站部署。需要合并到 main。
• Vercel：通过 vercel deploy --prod 即时部署。无需创建 PR 或合并。

如果用户已说明偏好（例如“部署到 Vercel”），则跳过询问。

选项 A：GitHub Pages

1. 确保目标仓库已启用 GitHub Pages：

   gh api repos/<owner>/<repo>/pages --jq '.html_url'
   # If not enabled:
   gh api repos/<owner>/<repo>/pages -X POST -f source='{"branch":"main","path":"/"}'
   

2. 在 mockup 目录中添加 README.md，概述各个状态和选项。

3. 在一个流程中创建分支、提交、推送、创建 PR 并合并：

   git checkout -b <user>/mockup-<feature-name>
   git add docs/mockups/<feature-name>/
   git commit -m "Add <feature-name> mockup"
   git push origin <user>/mockup-<feature-name>
   gh pr create --title "<Feature> mockup" --body "..."
   # Wait for checks, then merge
   gh pr merge <number> --squash --delete-branch
   

   必须合并到 main，Pages 才会部署。请勿让 PR 保持未合并状态。

4. 合并后在浏览器中打开线上 URL：

   PAGES_URL=$(gh api repos/<owner>/<repo>/pages --jq '.html_url')
   open "${PAGES_URL}docs/mockups/<feature-name>/mockup.html"
   

选项 B：Vercel

1. 确保已安装并通过身份验证的 Vercel CLI：

   vercel --version || npm install -g vercel
   vercel whoami  # confirm logged in
   

2. 准备部署目录。 Vercel 默认会提供 index.html。复制 mockup 文件，使其能通过根 URL 访问：

   cp <repo-path>/docs/mockups/<feature-name>/mockup.html \
      <repo-path>/docs/mockups/<feature-name>/index.html
   

3. 从 mockup 目录部署：

   cd <repo-path>/docs/mockups/<feature-name>
   vercel deploy --prod --yes
   

4. 清理临时的 index.html（保留 mockup.html 作为唯一真实来源）：

   rm <repo-path>/docs/mockups/<feature-name>/index.html
   

5. 在浏览器中打开线上 URL。 Vercel 部署时会输出生产 URL 和别名。请打开别名 URL（例如，https://<project>.vercel.app）。

6. 可选择提交并推送 mockup 到仓库，以便保留项目历史记录。这与 Vercel 部署分开进行，遵循与 GitHub Pages 相同的分支／PR／合并流程。仅在用户提出要求时执行。

安全

公开可见性

GitHub Pages 和 Vercel 默认都会将内容部署到公开可访问的 URL。部署前，请确认 mockup 不包含：

• 真实用户数据、个人身份信息（PII）或生产数据库内容
• API 密钥、令牌、机密或凭据
• 仅限内部使用的 URL、主机名或基础设施详情
• 应保密的专有业务逻辑或尚未发布的功能详情

内容指南

• 所有 mockup 均使用合成的虚构数据（虚构用户名、占位仓库、杜撰的组织名称）
• 除非已获准公开分享，否则不要嵌入内部工具的真实截图
• 不要引用外部 CDN、脚本或样式表。所有资源都必须内联。这样可以避免供应链风险，并确保文件可离线使用。

凭据卫生

• 此技能使用 gh CLI 和 vercel CLI，它们依赖本地存储的身份验证令牌。这些令牌绝不会写入 mockup 文件。
• 不要在 mockup 中的任何 HTML、CSS 或 JS 里硬编码令牌、密码或身份验证标头。

指南

• 使用单个自包含的 HTML 文件。不使用构建工具、npm 或框架。
• 从一开始就将 mockup 直接保存在目标仓库的本地克隆中。
• 不要维护 mockup 的两个副本（例如，桌面上一个、仓库中一个）。只保留一个文件，放在一个位置。
• 迭代期间不要推送更改。只有在用户表示要部署后，才进行推送。
• 迭代期间始终自动在浏览器中打开本地文件。
• 部署后始终自动在浏览器中打开线上 Pages URL。
• 使用描述性文件名和文件夹名（例如，user-profile-card，而不是 mockup-1）。