Development Workflow

Sales and Marketing Collateral

/speckit-specify We need a full set of go-to-market materials - everything needed
for a user to self-research, or a salesman to sell, or a marketer to market, or an
advertiser to advertise this product. Include a single page website (static,
self contained, inline CSS, openable in a browser) in
/collateral/website/index.html, several white papers, marketing and
advertising copy, user guide (in layman terms, but also in detail),
technical documentation, installation and integration guides, and place
them all under a /collateral directory. The web page must mention at the
top "Part of the worlds-biggest-software-project initiative (links to https://wbsp.ai).

Creating Demo Data

Creates mock data, so we can demonstrate the product:

/speckit-specify  Create a script to load realistic looking sample data into our database, suitable for demonstrations. I'll be using this also for recording videos and screenshots.
I need to be able to specify which destination.

Thumbnail

Thumbnails
Write instructions for Nano Banana to generate a thumbnail for this project, following the guidelines at https://wbsp.ai/wiki/raw/home/thumbnail-guidelines . Choose a design suitable and reflective of the purpose and users of this project. Write the instructions to docs/thumbnail-prompt.md

Once complete, copy the prompt from thumbnail-prompt.md into Google search and press the AI Mode button. Download the generated thumbnail and save it as /user-docs/store-thumbnail.png.

Local development

The easiest way to start local development is to define a destination in your wbsp.yaml of type dev. When you deploy to this destination it will start your application-specific database and/or REDIS in Docker.

wbsp-app deploy --destination dev

You can then develop and debug your application using VSC or other tool.

If you are using the updated WBSP Client Guidelines of 3rd July 2026 (See starting-a-new-project items 4 and 5) then you can just ask your AI to deploy to destination 'dev'.

If your AI coding follows the client guidelines for WBSP, it will perform user authentication using the demo user authentication (HAP) server.

Config variable	Value
hap_issuer	https://wbsp-auth.wbsp-demo.com
client_id	hap_lIT7x7SZ30e898mr
client_secret	W243TiBRYILUrF0Nzt8stFj-5ZuYGqsT2iCO8gOamJ4
Redirect URI	http://localhost:3000/api/auth/callback

Making it Beautiful

Work on the functionality first. Once you are happy with how it is working, the impeccable toolset can convert your default vanilla-flavoured website into a beautiful, professional, non-generic looking product.

The first time you want to use it, install it globally:

npx skills add pbakaus/impeccable

Then follow the prompts or give it instructions with these prompts:

/impeccable init
/impeccable polish the page you care about

Walkthrough Video

Create a script and Screenshots 

/speckit-specify I need to produce a slide show presentation, showing screenshots of this project's web interface.
1. Design a workflow through the application, showing its main features.
2. Decide a list of screenshots necessary to show that functionality.
3. Write a script, explaining the features / functionality, synchronized with the screenshots.  The script should be written to docs/walkthrough-screenshots/script.md. The script should include an introduction section quickly explaining the purpose and benefits of the software, and finish with a wrap up.
4. Create a playwrite script to exercise the application and take those screenshots. 5, Run the Playwrite script and save the screen shots to a directory docs/walkthrough-screenshots/screenshots. Use numbering in the script and in the screenshot filenames that allow them to be synchronised.
Document all the above in a folder docs/walkthrough-screenshots. Create as many files as required in that directory. An important factor. We DO NOT want this demo to exceed 7 minutes. If necessary to keep the time down skip over uninteresting parts of the application (e.g. setup and config screens), or give terse explanations of less important screens.

Preview Docker Image (for web-based apps)

In this step we create a self-contained Docker image, containing the application, a demonstration database, and everything else needed so somebody can try out the application.

/speckit-specify In directory /preview I need to create a Docker image that contains EVERYTHING required to run this application in a standalone mode. The Docker image should have the application,
databases, supporting software, configuration, preloaded test data in the database, and anything else it needs to allow the user to effectively evaluation the solution. In most cases we will not preserve data across container restarts, but it should be an option, via mounting an external docker volume (-v). If I start the application mapped to a different external port (e.g. 4000) the application must use this port within the docker container as well, to ensure app links work. More specifically, we use 4000:4000 externally to start the container, and use `PORT=4000 docker run...` within the container. The port number should be determined from the Docker CLI parameters. Alternatively, the application code must redirect using the port specified by the user URL, not the port where the server was started within Docker.