ns-proto-creator

Name: ns-proto-creator
Author: nextstage-brasil

github.com/nextstage-brasil设计与 UI091 次安装6 天前更新

代码仓库

关于 ns-proto-creator

ns-proto-creator 是一项设计技能，使用 Playwright 捕捉现有界面，并依据观察结果创建或迭代单一原型。它还涵盖界面文档、质量检查和视觉指南交接。

主要功能

01使用 Playwright 捕捉界面
02记录现有界面
03创建或迭代单一原型
04检查原型质量
05维护外观规范
06提供视觉指南交接

适用场景

01按观察到的页面重建原型
02在原有原型中持续迭代
03为设计工作记录现有界面

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/nextstage-brasil/skills --skill ns-proto-creator

安装后在 Claude Code 中输入/ns-proto-creator确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

evals/

evals.json

references/

as-is-docs.md

build-prototype.md

capture-playwright.md

详细介绍

Proto Creator

交付目标： Playwright 逆向原型设计。捕获 → AS-IS 文档 → 创建／演进一个 prototype/ → 质量检查 → 动态外观规范 → 可选视觉指南。

编排。 委派时加载工作器的 SKILL.md。不要内联完整设计检查清单或 Element|How 表格。

布局（锁定）

prototype/              # THE prototype — create once, evolve forever
docs/                   # AS-IS briefs, screenshots, appearance guides
docs/specs/             # Living domain specs (when consolidating)

缺少 prototype/ → 创建。
已有 prototype/ → 原地演进。
绝不搭建 vN/prototype/，也不询问版本文件夹名称。版本管理 = git。可选：提醒用户在有意义的演进后提交。

执行框架

参见 ../../ns-harness/references/session-boot.md 和 ../../ns-harness/references/artifact-layout.md。

相近需求路由

用户需求	引导至
仅需 `*-visual.md` / 规范性描述 / 外观指南	`ns-proto-visual-guide`
完整 SDD 版本 / 需求 / 任务	`ns-spec-driven`
纯粹修复 Bug，无原型范围	`ns-coder`
仅需棕地架构图	告知用户运行 `/ns-harness prepare`

启动（必需，每个会话一次）

使用简短的自然语言提问。不要发起冗长的问卷。

基础 URL — 登录信息／如果有多个 Playwright MCP 配置文件，询问使用哪个。
范围 — 页面、角色、添加／修改内容。
原型模式 — 检测 prototype/：
- 不存在 → 创建
- 已存在 → 原地演进

不要询问版本 ID 或 v1 文件夹。

流程

flowchart TB
  boot[Boot questions]
  capture[Capture Playwright]
  asis[AS-IS docs]
  build[Build or evolve prototype]
  quality[Best practices + guidelines]
  living[Living appearance]
  handoff[Offer visual guide]

  boot --> capture --> asis --> build --> quality --> living --> handoff

阶段	参考资料／工作器	行为
捕获	`references/capture-playwright.md`	查找 Playwright MCP；导航；截图；记录结构、字体、图标、密度
AS-IS	`references/as-is-docs.md`	根据证据编写／更新 `docs/` 简报
构建／演进	`references/build-prototype.md` + `ns-frontend-design`	仅在 `prototype/` 下操作；还原流程／字段／状态；使用现代技术栈，不克隆旧版
质量	`ns-best-practices`	对原型界面进行整洁度检查和 Web 界面指南审查
动态规范	`ns-living-spec` appearance	如果缺少，则创建 `docs/specs/` + INDEX；仅针对可见的产品行为编写 SHALL 条款
交接	`ns-proto-visual-guide`	提供／运行实现外观 MD 的生成流程

硬性规则

仅保留一棵原型目录树；原地演进；绝不并行创建多个 vN/ 副本
依据 Playwright 实时证据还原；不得虚构页面
在 prototype/ 下构建不受技术栈限制的现代 UI — 加载 ns-frontend-design
此技能的产物使用英文；项目文档语言遵循代码仓库
版本管理 = git；可选：提醒用户在有意义的演进后提交
不得硬编码特定产品的登录流程 — 遵循项目规则／用户凭据路径