Prototype Demo Creator

Overview

This skill guides the creation of a lightweight, no-build web prototype. It produces a project structure containing a Product Requirement Document (PRD), a central overview page (simulating a mobile device frame), and individual HTML pages for each screen.

Workflow

1. Analysis & PRD Generation

First, analyze the user’s request and generate a PRD.md file in the project root. The PRD should include:

• Project Name & Slogan
• User Personas
• Functional Modules (Home, Profile, etc.)
• Page Flow & Interactions
• Key Features

2. Project Setup

Create the following directory structure:

project-name/
├── PRD.md
└── app/
    ├── index.html          # Overview page
    ├── pages/              # Individual screens
    │   ├── home.html
    │   └── ...
    └── assets/
        ├── js/
        │   ├── vue.js      # Local Vue 2 library
        │   └── data.js     # (Optional) Mock data
        └── images/         # Placeholders

Action: Copy the local vue.js file from this skill’s assets to the project: cp assets/js/vue.js <project-path>/app/assets/js/vue.js

3. Create Overview Page (app/index.html)

Use the template at assets/templates/index.html.

• Replace {{PROJECT_NAME}} and {{PROJECT_DESCRIPTION}}.
• Generate the {{PAGES_GRID}} section. For each page in the PRD, create a grid item:

<div class="flex flex-col items-center">
  <h2 class="text-xl font-bold mb-4 text-blue-400">Page Title</h2>
  <div class="device-mockup transform scale-90">
    <div class="device-notch"></div>
    <div class="device-screen">
      <iframe src="pages/page-filename.html" class="page-frame"></iframe>
    </div>
  </div>
</div>

4. Create Individual Pages (app/pages/*.html)

For each screen defined in the PRD, create an HTML file in app/pages/. Use the template at assets/templates/page.html.

Guidelines:

• Vue 2: Use the local script <script src="../assets/js/vue.js"></script>.
• Tailwind: Use the CDN version <script src="https://cdn.tailwindcss.com"></script> and the config script provided in the template.
• FontAwesome: Use the CDN link.
• Mobile First: Design for mobile dimensions (the iframe container is sized like a phone).
• No Build: Do not use .vue files or import statements. Write everything in the HTML file (styles, template, script).

Implementation Steps for Each Page:

1. Set {{PAGE_TITLE}}.
2. Implement the UI structure inside #app.
3. Implement the Vue logic in new Vue({...}).
4. Use data for state and methods for interactions.
5. Use v-cloak to prevent flash of unstyled content.

5. Final Verification

• Ensure all links (css, js, iframes) are relative and correct.
• Ensure the vue.js file exists in the target directory.
• Verify PRD.md covers the implemented features.