要件ドキュメント、UI 設計仕様、アイデア ノートなどから純粋な HTML/CSS/JS 画面プレビューを即座に生成するスキル。.pdf/.txt/.md ファイルまたは screen-design/ フォルダーを入力として受け入れ、画面ごとの HTML ファイルを作成し、リンク経由で共有可能にします。 「プレビューを作成してください」、「UI を見せてください」、「HTML に変換してください」、「クライアントのデモ画面」、「プロトタイプを構築してください」、「デモ ページ」、「UI を共有する必要があります」、「ドラフト画面を確認してください」などのフレーズが言及されている場合は、常にこのスキルを使用してください。 「プレビューの更新」、「UI の修正」、「リファレンス ドキュメントの変更」など、既存の出力を更新するときにも使用します。
コマンドラインで html-prototype AI スキルを開発環境にすばやくインストール
ソース: dev-goraebap/skills。
요구사항 문서나 화면설계서를 받아서 순수 HTML/CSS/JS 파일로 화면 프리뷰를 만든다. 프레임워크 없이 브라우저에서 바로 열 수 있고, 링크 하나로 공유 가능하다. 완성도보다 빠른 확인이 목적이다.
| .pdf | 내장 Node.js 스크립트로 텍스트 추출 후 분석 | | .txt / .md | 직접 읽어서 분석 | | screen-design/ 폴더 | 화면설계서 파일 자동 참조 | | 없음 | 무엇을 만들지 간단히 물어보고 진행 |
"어떤 화면들을 만들어드릴까요? 간단히 설명해주세요." 답변을 받으면 brief.md에 기록하고 진행한다 (템플릿: templates/brief.md)
要件ドキュメント、UI 設計仕様、アイデア ノートなどから純粋な HTML/CSS/JS 画面プレビューを即座に生成するスキル。.pdf/.txt/.md ファイルまたは screen-design/ フォルダーを入力として受け入れ、画面ごとの HTML ファイルを作成し、リンク経由で共有可能にします。 「プレビューを作成してください」、「UI を見せてください」、「HTML に変換してください」、「クライアントのデモ画面」、「プロトタイプを構築してください」、「デモ ページ」、「UI を共有する必要があります」、「ドラフト画面を確認してください」などのフレーズが言及されている場合は、常にこのスキルを使用してください。 「プレビューの更新」、「UI の修正」、「リファレンス ドキュメントの変更」など、既存の出力を更新するときにも使用します。 ソース: dev-goraebap/skills。
AI/検索での引用用の安定したフィールドとコマンド。
npx skills add https://github.com/dev-goraebap/skills --skill html-prototype要件ドキュメント、UI 設計仕様、アイデア ノートなどから純粋な HTML/CSS/JS 画面プレビューを即座に生成するスキル。.pdf/.txt/.md ファイルまたは screen-design/ フォルダーを入力として受け入れ、画面ごとの HTML ファイルを作成し、リンク経由で共有可能にします。 「プレビューを作成してください」、「UI を見せてください」、「HTML に変換してください」、「クライアントのデモ画面」、「プロトタイプを構築してください」、「デモ ページ」、「UI を共有する必要があります」、「ドラフト画面を確認してください」などのフレーズが言及されている場合は、常にこのスキルを使用してください。 「プレビューの更新」、「UI の修正」、「リファレンス ドキュメントの変更」など、既存の出力を更新するときにも使用します。 ソース: dev-goraebap/skills。
ターミナルまたはコマンドラインツール（Terminal、iTerm、Windows Terminal など）を開きます このコマンドをコピーして実行します: npx skills add https://github.com/dev-goraebap/skills --skill html-prototype インストール後、スキルは自動的に AI コーディング環境に設定され、Claude Code、Cursor、OpenClaw で使用できるようになります
https://github.com/dev-goraebap/skills