Vibe Prototype | Agent Skills Atlas

About this skill

Vibe Coding 流水线第五步:依据 design.md(视觉准则)与 interaction.md,为每个页面在 Stitch 画布生成原型, 经 stitch-mcp 拉取 HTML 与截图存入 prototypes/,并与交互文档做双向对齐校验。当用户说"生成原型""画原型""把交互文档变成原型""接 Stitch / stitch-mcp""每页出设计图" "对齐原型和交互文档" "prototypes 对不上" "配置 Stitch MCP"时使用。本 skill 是"半自动":Claude 写 prompt + 引导人工在 Stitch 画布生成,MCP 只负责拉取与校验,不是一句话自动出图。反触发(相邻阶段抢入口时主动让路):1 用户还在澄清产品想法 / 没有 idea.md → 交给 vibe-idea; 2 已有 idea.md 要细化页面与每个元素的交互逻辑(是弹窗还是跳转)→ 交给 vibe-interaction; 3 还在定技术栈 / 数据库 / 接口 / 系统设计 → 交给 vibe-architecture; 4 还在定视觉设计系统 / 设计准则 / design.md(tokens、组件、Do&Don't)→ 交给 vibe-design; 5 要写代码 / 修 bug / 跑测试 / 部署 → 交给 vibe-implement。前置依赖 design.md(视觉准则,由 vibe-design 产出)+ interaction.md(由 vibe-interaction 产出)+ architecture.md(由 vibe-architecture 产出,提供数据/接口依据);产物交给 vibe-implement,二者以页面ID 为同一主键对齐。

Quick start

Copy the install prompt. Use the green button above this README.
Send it to your agent. Paste it into your coding agent’s chat and send.
Review the setup. Your agent checks the skill’s instructions, requirements, and installation scope.

Installation guide →

Review, license & listing details

Review the source before using this skill

This is an imported listing. We haven’t certified its safety, license, or compatibility. Skills may include executable scripts.

Automated security scan: Partial

Only SKILL.md was scanned. Supporting files and scripts were not checked. No safety grade has been assigned.

0 potential findings · Scanned 11/4/2026 · Scanner 0.2.1

Content SHA-256: 284f3abb6b65b34843579318c9b7b96843dd3a0cbb6735265bf999e002e402a3

About scan coverage and limitations

Original listing metadata

Original name

vibe-prototype

Original description

Vibe Coding 流水线第五步:依据 design.md(视觉准则)与 interaction.md,为每个页面在 Stitch 画布生成原型, 经 stitch-mcp 拉取 HTML 与截图存入 prototypes/,并与交互文档做双向对齐校验。当用户说"生成原型""画原型""把交互文档变成原型""接 Stitch / stitch-mcp""每页出设计图" "对齐原型和交互文档" "prototypes 对不上" "配置 Stitch MCP"时使用。本 skill 是"半自动":Claude 写 prompt + 引导人工在 Stitch 画布生成,MCP 只负责拉取与校验,不是一句话自动出图。反触发(相邻阶段抢入口时主动让路):① 用户还在澄清产品想法 / 没有 idea.md → 交给 vibe-idea; ② 已有 idea.md 要细化页面与每个元素的交互逻辑(是弹窗还是跳转)→ 交给 vibe-interaction; ③ 还在定技术栈 / 数据库 / 接口 / 系统设计 → 交给 vibe-architecture; ④ 还在定视觉设计系统 / 设计准则 / design.md(tokens、组件、Do&Don't)→ 交给 vibe-design; ⑤ 要写代码 / 修 bug / 跑测试 / 部署 → 交给 vibe-implement。前置依赖 design.md(视觉准则,由 vibe-design 产出)+ interaction.md(由 vibe-interaction 产出)+ architecture.md(由 vibe-architecture 产出,提供数据/接口依据);产物交给 vibe-implement,二者以页面ID 为同一主键对齐。

About this listing

Category: Product & design
Reported license: Not specified
Listing language (estimated): Chinese
Review status: Not individually reviewed
Agent compatibility: Atlas installation supports Claude Code, Codex, and Cursor. Skill-specific dependencies and features are checked during setup.