React Prototyping Boilerplate

The purpose of this project is to provide a simple site framework for designers who want an easy way to drop in React pages and components generated by LLMs like Claude or Gemini for viewing and tweaking locally.

It uses Vite build tools, shadcn components, and Tailwind CSS styling, which works with the typescript (.tsx) files you get out of LLMs.

Some benefits of this approach:

• View files directly in the browser instead of through the LLM UI.
• Make tweaks quickly and directly without asking the LLM for everything.
• Link pages together for flexible prototyping.

Requirements

• Node.js
• VS Code (recommended)
• GitHub Desktop (recommended if using version control)

Installation

Installing Node.js

This requires Node.js to be installed on your machine. You can check if it's installed by opening Terminal and running this command to see the version:

node -v

If you get a "command not found" message, go to the Node.js download page to get it. You can use the selection tool to run the installation from the command line or the download the binary and run it from your machine.

Pick the current LTS (long-term support) version of Node.

The command line tool will have you pick a node version manager and node package manager. Unless you have a preference for something else, use nvm and npm.

Downloading the project

Option 1: Without git version control (simpler)

If you want to keep things simple, just download the ZIP.

1. Download ZIP of this repo
2. Extract ZIP
3. Move folder where you want to keep it
4. Launch VS Code and use the Open Folder command to open the project

Option 2: Manage versions with git and GitHub (advanced)

If you want to manage your own project on Github and track versions, you can copy this repo as a template.

1. Create new repository from template
2. Press the green Code button in your new repo and select Open with GitHub Desktop
3. Save to your machine using the dialog
4. Press the Open in Visual Studio Code button

With either option, you should now see the project files in VS Code.

Installing the project

1. In VS Code, open the Terminal pane (control-~)
2. Run this command:

npm install --legacy-peer-deps

This will install all the necessary files locally to run the project. The legacy-peer-dependency flag ignores dependency conflicts, which shouldn't cause problems.

Running the project

If everything went OK with installation, now you can run this command to start the project:

npm run dev

This runs the project in development mode. If it works, you'll see a message that it's now running on a local server, for example, Local: http://localhost:5173/. You can control-click on that link in VS Code to see the site running in your browser, or just copy and paste.

If it's running you should see this in your browser at the localhost URL:

Whenever you want to run the project again, you'll just use the command npm run dev again. You don't have to reinstall. Periodically, you may want to run npm update --legacy-peer-deps to update the package dependencies.

Managing the server

If you need to run some other command in Terminal after the server is running for some reason, open a new Terminal tab (using the plus button).

To stop the server, press control-C.

Adding pages

1. Generate a page with an LLM like Claude or Gemini. See the suggested LLM instructions for providing context along with the specific task for your prompt.
2. Once the interface displays as desired in the LLM UI, download the .tsx file.
3. Move the file, e.g., signup-form.tsx to the /src/pages folder in your project.
   • Use sub-folders to organize your pages within the /pages folders. The sub-folder will be part of the URL, e.g., localhost:5173/company/about.

If the development server is running, the browser should refresh automatically when adding pages or making changes.

If you've just added a new page, enter the URL manually to see it (page name without suffix, e.g., localhost:5173/signup-form).

Tip

Don't worry about typescript warnings, or even errors, if the page is loading. If there's a big problem, the page won't even load.

Styling components

Use the standard Tailwind syntax to style components. With React, you apply these using the className attribute. See some of the demo page examples.

Taking Screenshots with Playwright MCP

You can use Amazon Q with the Playwright MCP server to take automated screenshots of your prototypes for documentation and sharing on digital whiteboards. These instructions assume you have Amazon Q up and running.

Setup

1. Configure Amazon Q MCP: Open your config file in VS Code. Run this command in a terminal:

   code ~/.aws/amazonq/mcp.json

   If this file doesn't exist, you can run this in a terminal to create the file in this location: mkdir -p ~/.aws/amazonq && touch ~/.aws/amazonq/mcp.json

   Add this to your mcpServers section:

   "playwright": {
     "command": "npx",
     "args": ["@modelcontextprotocol/server-playwright"]
   }

2. Start your development server: Make sure your prototype is running:

   npm run dev

Taking Screenshots

Basic Example (Multiple Tabs)

For capturing all tabs of a multi-tab interface:

Using playwright mcp, take screenshots of this page with each of the tabs selected: http://localhost:5173/#/your-page-route. Save them to the screenshots folder with descriptive names like tab1-overview.png, tab2-details.png, etc.

Full-Height Screenshots (Recommended)

Since the Playwright MCP doesn't support true full-page screenshots, use the resize method to capture more content:

Resize browser to 1920x4000, then take a screenshot and save it to /Users/[your-username]/Documents/[your-project]/screenshots/full-height-screenshot.png, (optional: then reset browser to 1280x720)

Tips & Workarounds

• File Paths: Use absolute paths to ensure screenshots save to your project folder instead of temporary directories
• Copying from Temp: If screenshots end up in temp folders, you can ask Q to move them or copy them with this command in a separate terminal:

  cp "/path/to/temp/screenshot.png" "/Users/[username]/path/to/project/screenshots/"

• Viewport Sizes:
  • You can mention specific sizes to keep things consisten, for example, 1280x720
  • For full-height, either ask Q to make the adjustment or specify an extra tall height, for example, 1920x4000
• File Naming: If for particular description names if you have a preference, for example, overview-tab.png, full-height-dashboard.png

Example Workflow

1. Start development server: npm run dev
2. Open Amazon Q chat
3. Use this prompt template:

   Resize browser to 1920x4000, navigate to http://localhost:5173/#/my-page, take a screenshot and save it to /Users/[username]/Documents/[your-project]/screenshots/my-page-full.png, then reset browser to 1280x720