to-prototype

仓库创建 2026年6月23日最近提交 23 天前SkillHot 收录 22 天前

▸ 精选理由

快速把静态 mock 提升为可本地预览与线上部署的原型

▸ 风险提示

会生成并运行 Node 构建脚本

这个 Skill 做什么

把已批准的线框生成 Vite+React 的可预览交互原型并支持 Vercel 部署

把批准的线框或静态稿做成可本地预览、能部署到 Vercel 的互动原型，基于 Vite + React，输出完整源码文件夹和静态预览。不是生产级前端，只是便于演示和用户测试的 clickable prototype。用在 mockups 已确认、需要“可点交互原型”时。

▸ 展开 SKILL.md 英文原文

Turn an approved wireframe/static mock into a Vite-powered interactive prototype that can be previewed locally as HTML and deployed/viewed on Vercel. Use after mockups.md + mockups.data.js exist and the user wants "to prototype", "interactive prototype", "clickable prototype", "Vite preview", or "render prototype". Output is a self-contained prototype source folder plus a built static preview, not production FE and not tied to new-design.

开发编程交互原型Vite部署通用

Stars

Forks

仓库内 Skill

7 日增星

安装 / 使用

给你的 Agent 一句话（通用）

帮我安装这个 skill：https://raw.githubusercontent.com/Tritintruong114/usecase-factory/main/skills/to-prototype/SKILL.md

或 curl 直取 SKILL.md

curl -fsSL "https://raw.githubusercontent.com/Tritintruong114/usecase-factory/main/skills/to-prototype/SKILL.md"

SKILL.MD 节选查看完整文件 ↗

# To Prototype

Fourth and final "mock" of the design phase. Pipeline:

`/design-a-screen` → `/mockup-to-html` → **`/to-prototype`** → later Phase-2 FE.

This skill converts the approved wireframe/static mock into a **live, manipulable prototype** backed by a small **Vite + React** source set. The prototype must still be previewable like an HTML artifact and deployable on Vercel, but it is no longer required to mount inside `new-design/`.

## Core idea

`to-prototype` produces two things in the target repo:

1. **Source** — a self-contained Vite app under `prototype/`.
2. **Preview artifact** — a static built preview copied to `prototype.html` / `prototype-assets/` so the repo can be opened/

via SKILL·HOT · 数据来自 GitHub 公开信息 · 原文版权归作者所有