HTML Features Workflow — Prompt, Scripts & Result

How it works

When you type /html features in the Cursor chat, you’re not running a terminal script or filling a form. You start a conversation with the AI.

The AI replies in the chat and asks you one question at a time: version number, how many features, then for each feature — name, links (Figma, Jira), and screenshot paths. You answer in the same chat. The AI can open links you paste, pull out details (platform, type, description), and show you a summary to confirm. Only after you’ve provided everything does it run the Python scripts and create the HTML and PDF files.

Example of how the conversation goes:

You /html features

AI Let's create a QA features summary! What version number are you documenting? (e.g., 3.13, 4.0, 2.5.1)

You 3.13

AI How many features would you like to document?

You 2

AI Feature 1: What is the feature name?

You Savings Lobby Migration

AI Great! To help me extract the details, please provide any relevant links (Figma, Jira, or other docs), or press Enter to skip…

1. The prompt

When you run /html features in Cursor, the AI follows these instructions to guide you interactively and produce the QA summary.

---
name: html features
description: Create an HTML QA features summary document with embedded screenshots (Global Command)
mode: write
---

When the user runs `/html features`, you must interactively guide them through creating a QA features summary document by asking questions in the chat conversation.

## Interactive Workflow

1. **Start by greeting and asking for version number**:
   - "Let's create a QA features summary! What version number are you documenting? (e.g., 3.13, 4.0, 2.5.1)"
   - Validate the format (X.Y or X.Y.Z)

2. **Ask for number of features**:
   - "How many features would you like to document?"

3. **For each feature, follow this workflow**:
   - **Step 3a: Get feature name**: "Feature [N]: What is the feature name?"
   - **Step 3b: Request data sources**: Ask for Figma link(s), Jira link(s), or other docs. User can skip.
   - **Step 3c: Extract information**: Use web_search/codebase_search to get platform, type, description.
   - **Step 3d: Present extracted data for confirmation**: Show summary, ask "Does this look correct? (yes/no/edit)".
   - **Step 3e: Screenshots**: Ask for screenshot file path(s), validate they exist, optional title per screenshot.

4. **After collecting all information**:
   - Create folder: ~/.cursor/version-prep/[VERSION]/
   - Copy screenshots there, build features_data.json (version, features[], generate_pdf).
   - Run: python3 ~/.cursor/version-prep/scripts/generate_html.py features .../features_data.json .../QA_Features_Summary_[VERSION].html
   - Show file path and ask if they want to review.

5. **PDF Generation (optional)**:
   - After review: "Would you like me to generate a PDF version?"
   - If yes: python3 ~/.cursor/version-prep/scripts/generate_pdf.py [html] [pdf]

## Important Rules
- Ask ONE question at a time; wait for answer before next.
- Proactively extract from Figma/Jira; present clearly and confirm.
- Validate inputs; be conversational and friendly.
- All files under ~/.cursor/version-prep/[VERSION]/; git-ignored.

2. The scripts

Three Python scripts under ~/.cursor/version-prep/scripts/ do the file and document generation.

generate_html.py

~/.cursor/version-prep/scripts/generate_html.py

Reads features_data.json and renders the QA Features Summary HTML. Handles template type "features", styling (gradient header, feature cards, badges, screenshot containers), and optional Figma links.

python3 .../generate_html.py features .../features_data.json .../QA_Features_Summary_[VERSION].html

generate_pdf.py

~/.cursor/version-prep/scripts/generate_pdf.py

Converts the generated HTML into a single long scrollable PDF. Tries WeasyPrint, then Playwright, then pdfkit. Uses custom CSS for A4 and compact layout.

python3 .../generate_pdf.py [input.html] [output.pdf]

create_qa_features.py

~/.cursor/version-prep/scripts/create_qa_features.py

Standalone interactive CLI: prompts for version, feature count, then per feature (name, platform, type, description, Figma URL, screenshots). Builds JSON, copies files, and can call the HTML (and PDF) scripts. Use when not using the Cursor command.

python3 ~/.cursor/version-prep/scripts/create_qa_features.py

3. Final result

The HTML (and PDF) produced looks like this — one card per feature with badges, description, and embedded screenshots.

QA Features Summary

Version 3.13.0

Savings Lobby Migration

Both Migration

Migrated savings lobby to Compose. New UI with updated navigation and accessibility improvements.

📷 Screenshot (embedded in real output)

All assets live under ~/.cursor/version-prep/. Example output: ~/.cursor/version-prep/3.13.0/qa-features-summary-3.13.0.html