npx skills add https://github.com/dev-goraebap/sveltekit-custom-skills --skill html-prototype接收需求文档或界面设计说明书,生成纯 HTML/CSS/JS 文件的界面预览。无需框架,可直接在浏览器中打开,并能通过一个链接共享。目标是快速确认而非追求完成度。
| 输入 | 处理方式 |
|---|---|
.pdf | 使用内置 Node.js 脚本提取文本后分析 |
.txt / .md | 直接读取并分析 |
screen-design/ 文件夹 | 自动引用界面设计说明书文件 |
| 无 | 简单询问要制作什么,然后继续 |
检查工作空间根目录下是否已存在 preview/ 文件夹。
요구사항 문서나 화면설계서를 받아서 순수 HTML/CSS/JS 파일로 화면 프리뷰를 만든다. 프레임워크 없이 브라우저에서 바로 열 수 있고, 링크 하나로 공유 가능하다. 완성도보다 빠른 확인이 목적이다.
| 입력 | 처리 방식 |
|---|---|
.pdf | 내장 Node.js 스크립트로 텍스트 추출 후 분석 |
.txt / .md | 직접 읽어서 분석 |
screen-design/ 폴더 | 화면설계서 파일 자동 참조 |
| 없음 | 무엇을 만들지 간단히 물어보고 진행 |
워크스페이스 루트에 preview/ 폴더가 이미 존재하는지 확인한다.
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
preview/ → 新建模式 : 从 Step 1 开始preview/ → 更新模式 : 跳转到下方更新模式详细步骤
preview/ 下有站点文件夹(例如 preview/admin/, preview/user/),则为多站点更新模式按以下顺序确定输入源:
.pdf/.txt/.md)screen-design/ 文件夹 → 自动引用界面设计说明书"您需要制作哪些界面?请简单描述一下。" 收到回答后,记录到
brief.md并继续(模板:templates/brief.md)
PDF 输入时:
# 安装依赖(仅首次)
cd ~/.claude/skills/mvp-preview/scripts && npm install --silent
# 文本提取 — 必须保存到此路径
node ~/.claude/skills/html-prototype/scripts/extract_pdf_text.js \
<输入.pdf> -o <工作空间_根目录>/preview/extracted/source.txt
TXT/MD 文件,screen-design/ 文件夹: 使用 Read 工具直接读取。
从输入中识别以下项目:
引用 screen-design/ 时的站点判断:
screen-design/ 下有站点文件夹,则为多站点ia-sitemap.md 顶部的元数据表中读取平台/布局信息screen-design/ia-sitemap.md 的元数据表直接输入文档时的站点判断:
简要总结分析结果后,进入创建阶段:
单站点:
01. 登录界面 → 跳转到仪表板
02. 仪表板 → 跳转到列表、设置
03. 列表界面 → 跳转到详情,返回
04. 详情界面 → 返回
多站点:
[admin — 网页桌面端 / 侧边栏]
01. 登录 → 仪表板
02. 仪表板 → 会员管理
03. 会员管理 → 会员详情
[user — 移动端网页 / 底部标签栏]
01. 引导页 → 主页
02. 主页 → 我的页面
03. 我的页面
根据界面分析结果,如果导航栏、侧边栏、底部标签栏等元素在 3 个或更多界面中重复出现,则在生成 HTML 文件之前先编写公共组件。将每个公共元素定义为 Web Component,并反映该应用的实际菜单结构。
preview/components.jspreview/[站点]/components.js(因平台/布局不同而分开)参考 references/build.md 中的模式,为每个界面创建 HTML 文件。
文件名规则: index.html(中心页面) + 01-[界面英文名].html, 02-[界面英文名].html, ...
核心原则:
components.js 里的 Web Component 标签多站点时:
preview/admin/, preview/user/index.html(站点内界面中心页面)+ 界面文件 + components.jsreferences/build.md):
max-width: 1200px, 侧边栏布局max-width: 480px, 底部标签栏布局preview/index.html 是 站点选择中心页面(链接到每个站点的 index.html)创建完成后,向用户提供以下指南:
立即查看:
将 preview/index.html 文件拖拽到浏览器或双击打开。
多站点: 可以按站点单独共享 — 每个站点文件夹(preview/admin/, preview/user/)都可以独立部署。
链接共享: 参考 references/share.md 中针对不同情况的方法指南。因为是静态 HTML,所以 Surge.sh 或 GitHub Pages 最为简便。
当工作空间中已存在 preview/ 文件夹时使用的流程。适用于参考文档发生变化或需要修改界面时。
读取现有文件,了解当前状态:
preview/index.html — 全部界面列表中心页面(或站点选择中心页面)preview/0N-[界面名].html — 每个界面文件preview/[站点]/index.html + preview/[站点]/0N-[界面名].html了解当前界面数量、文件名列表、界面间链接结构。
变更类型分类:
[新增] 新界面
[修改] 现有界面 UI/流程变更
[删除] 移除界面
仅修改有变更的文件。
.html + index.html(当列表/链接变更时).html + 更新 index.html.html + 从 index.html 移除链接 + 清理相关界面的链接文件编号保持原有编号,新文件接续最后一个编号。
✅ 更新完成
[已修改的文件]
- 02-list.html: 添加过滤器 UI
- index.html: 更新链接
[新增的文件]
- 05-settings.html: 新增设置界面
[未变更的文件]
- 01-login.html, 03-detail.html(未变更)
references/build.md — HTML/CSS/JS 模式、界面间跳转、表单处理references/share.md — 静态文件共享方法(Surge、GitHub Pages 等)templates/brief.md — 无文档启动时使用的上下文记录模板Weekly Installs
1
Repository
First Seen
1 day ago
Security Audits
Installed on
zencoder1
amp1
cline1
openclaw1
opencode1
cursor1
preview/ 없음 → 신규 생성 모드 : Step 1부터 진행preview/ 있음 → 업데이트 모드 : 아래 업데이트 모드 상세 절차로 건너뜀
preview/ 하위에 사이트 폴더(예: preview/admin/, preview/user/)가 있으면 멀티 사이트 업데이트 모드다음 순서로 입력 소스를 결정한다:
.pdf/.txt/.md만 허용)screen-design/ 폴더가 있으면 → 자동으로 화면설계서 참조"어떤 화면들을 만들어드릴까요? 간단히 설명해주세요." 답변을 받으면
brief.md에 기록하고 진행한다 (템플릿:templates/brief.md)
PDF 입력일 때:
# 의존성 설치 (최초 1회)
cd ~/.claude/skills/mvp-preview/scripts && npm install --silent
# 텍스트 추출 — 반드시 이 경로로 저장
node ~/.claude/skills/html-prototype/scripts/extract_pdf_text.js \
<입력.pdf> -o <워크스페이스_루트>/preview/extracted/source.txt
TXT/MD 파일, screen-design/ 폴더: Read 도구로 직접 읽는다.
입력에서 아래 항목을 파악한다:
screen-design/ 참조 시 사이트 판단:
screen-design/ 하위에 사이트 폴더가 있으면 멀티 사이트ia-sitemap.md 상단 메타 테이블에서 플랫폼/레이아웃 정보를 읽는다screen-design/ia-sitemap.md의 메타 테이블을 읽는다문서 직접 입력 시 사이트 판단:
분석 결과를 간략히 정리한 뒤 생성에 진입한다:
단일 사이트:
01. 로그인 화면 → 대시보드로 이동
02. 대시보드 → 목록, 설정으로 이동
03. 목록 화면 → 상세로 이동, 뒤로 가기
04. 상세 화면 → 뒤로 가기
멀티 사이트:
[admin — 웹 데스크톱 / 사이드바]
01. 로그인 → 대시보드
02. 대시보드 → 회원 관리
03. 회원 관리 → 회원 상세
[user — 모바일 웹 / 하단탭]
01. 온보딩 → 홈
02. 홈 → 마이페이지
03. 마이페이지
화면 분석 결과, 네비게이션 바 · 사이드바 · 하단 탭 바 등이 3개 이상 화면에 반복되면 HTML 파일 생성 전에 공통 컴포넌트를 먼저 작성한다. 각 공통 요소를 Web Component로 정의하고, 해당 앱의 실제 메뉴 구조를 반영한다.
preview/components.jspreview/[사이트]/components.js (플랫폼/레이아웃이 다르므로 분리)references/build.md의 패턴을 참고해 화면별 HTML 파일을 만든다.
파일명 규칙: index.html (허브) + 01-[영문화면명].html, 02-[영문화면명].html, ...
핵심 원칙:
components.js의 Web Component 태그를 사용멀티 사이트 시:
preview/admin/, preview/user/index.html (사이트 내 화면 허브) + 화면 파일 + components.jsreferences/build.md 참고):
max-width: 1200px, 사이드바 레이아웃max-width: 480px, 하단탭 레이아웃preview/index.html은 사이트 선택 허브 (각 사이트의 index.html로 링크)생성 완료 후 아래를 사용자에게 안내한다:
바로 보기:
preview/index.html 파일을 브라우저로 드래그하거나 더블클릭하세요.
멀티 사이트: 사이트별로 개별 공유 가능 — 각 사이트 폴더(preview/admin/, preview/user/)를 독립적으로 배포할 수 있다.
링크로 공유: references/share.md의 상황별 방법 안내. 정적 HTML이므로 Surge.sh 또는 GitHub Pages가 가장 간편하다.
워크스페이스에 이미 preview/ 폴더가 있을 때 사용하는 플로우다. 참고 문서가 바뀌었거나 화면을 수정해야 할 때 해당한다.
기존 파일을 읽어 현재 상태를 파악한다:
preview/index.html — 전체 화면 목록 허브 (또는 사이트 선택 허브)preview/0N-[화면명].html — 각 화면 파일preview/[사이트]/index.html + preview/[사이트]/0N-[화면명].html현재 화면 수, 파일명 목록, 화면 간 링크 구조를 파악해둔다.
변경 유형 분류:
[추가] 새 화면
[수정] 기존 화면 UI/흐름 변경
[삭제] 화면 제거
변경이 있는 파일만 수정한다.
.html + index.html (목록/링크 변경 시).html 생성 + index.html 업데이트.html 삭제 + index.html 링크 제거 + 관련 화면의 링크 정리파일 넘버링은 기존 번호 유지, 새 파일은 마지막 번호 이어서 붙인다.
✅ 업데이트 완료
[수정된 파일]
- 02-list.html: 필터 UI 추가
- index.html: 링크 업데이트
[추가된 파일]
- 05-settings.html: 설정 화면 신규 추가
[변경 없는 파일]
- 01-login.html, 03-detail.html (변경 없음)
references/build.md — HTML/CSS/JS 패턴, 화면 간 이동, form 처리references/share.md — 정적 파일 공유 방법 (Surge, GitHub Pages 등)templates/brief.md — 문서 없이 시작할 때 사용하는 맥락 기록 템플릿Weekly Installs
1
Repository
First Seen
1 day ago
Security Audits
Installed on
zencoder1
amp1
cline1
openclaw1
opencode1
cursor1
通过 LiteLLM 代理让 Claude Code 对接 GitHub Copilot 运行 | 高级变通方案指南
31,600 周安装