Project 2: Google Stitch website

Introduction

In this project you will generate a single-page website for a small business or organisation using Google Stitch. Each student is assigned a unique combination of a business use case and a specific design system from the getdesign.md online library.

You will use your assigned design.md file as a starting point to structure your content and styling.

Your presentation will be graded according to the following rubric:

Marking Rubric

ESTIMATED COMPLETION TIME: 4-5 hours.

Business use cases

Here are five typical small business/organisation use cases:

design.md system mapping

For your CA5 assignment, you will be assigned one of the above five use cases along with a brand-specific file from getdesign.md to ensure a professional aesthetic:

Sourcing your design.md markdown file

Follow these steps:

1. Make a folder on your computer to store this project. For example, /website-stitch
2. Visit getdesign.md and click the Sign in button.
3. On the next screen, click Continue with GitHub, and allow permission. When finished, click Browse designs.
4. Locate your assigned brand (e.g., Airbnb, BMW, or Apple).
5. In a terminal window, change to the folder you want to use for your project, and run the npx install command. To get the Airbnb design.md file, for example, you would run:
   Copy npx getdesign@latest add airbnb
   Enter the name of the relevant design.md file for the use case you have been assigned. For example, npx getdesign@latest add bmw or npx getdesign@latest add claude.
6. You may be asked to install the necessary dependencies. Click Y to continue.
7. Your project folder now contains the relevant design.md file.

Launching Stitch and loading your design.md file

Follow these steps:

1. Navigate to stitch.withgoogle.com and sign in with your Google account.
2. Click on Create New Project or + New Site.

Stitch will typically create a default file structure for you. Look for the file explorer on the left-hand side of the Stitch interface.

If a file named design.md already exists, click it to open the editor. If not, click the + (Plus) icon to create a new file and name it design.md.

Now, do the following:

1. Open your downloaded design.md file in VS Code or a text editor.
2. Select and copy all the text.
3. Return to the Google Stitch editor, select the design.md file, and paste the content in, overwriting any existing text.

Configuring the YAML front matter

In the context of Google Stitch and design.md, the YAML front matter is a block of configuration code located at the very top of your Markdown file. It is used to define "metadata"—information about the page that isn't necessarily part of the visible body text, such as the page title, description, or specific design settings.

At the very top of the Stitch editor window, locate the section between the --- dashes.

Update the title and description to match your assigned business name.

See the example below:

Ensure there are no spaces before the dashes (---) at the start of the file, or Google Stitch may fail to render the design correctly.

Click the Preview button in the top right corner.

You should see the layout immediately transform to match the assigned brand's aesthetic (e.g., BMW's dark themes or Airbnb's rounded UI).

Click Save to save your work and then Publish to generate your live URL.

NOTE: The design.md file is the "brain" of your website. Google Stitch looks at this file specifically to decide how to colour your buttons, what fonts to use, and where to place your images. If you delete this file or rename it, your website will lose its styling!

Generating the content

Once your design.md file is configured, you can use the Stitch AI assistant to populate the site. Because you have already updated the YAML front matter with your business name, the AI will have the context it needs.

In the Stitch editor, use the AI prompt bar to enter a command similar to the one below:

Only run the above prompt after you have completed the following two steps:

• Your assigned design.md is loaded into the Stitch editor.
• The YAML front matter has been updated with your specific Business Name.

This ensures the AI uses the correct branding and layout "containers" when creating your text, tables, and testimonials.

Minimum content requirements

Regardless of your assigned business use case, your final website must meet the following technical standards to demonstrate your Markdown proficiency:

Adding a table to Stitch

In Google Stitch, tables are not created using standard HTML tags. Instead, they are defined directly within the design.md file using Markdown syntax. The Stitch engine then automatically styles these tables to match your assigned brand aesthetic.

Follow these steps to add a table to your project:

1. Locate the insertion point: Open your design.md file in the Stitch editor. Scroll to the area where you want the table to appear (e.g., under a "Pricing" or "Schedules" heading).
2. Enter the header row: Type your column titles separated by the pipe character (|). For example:
   | Service | Time | Price |
3. Create the separator row: On the next line, use at least three hyphens (---) for each column, separated by pipes. This tells the engine where the header ends.
   | :--- | :--- | :--- |
4. Add the data rows: Enter your business information on the following lines, ensuring each cell is separated by a pipe.
   | Emergency Repair | 1 Hour | €120 |

Example Table Code

Your finished Markdown table in the editor should look like this:

After adding the code, click the Preview button. You will see that Stitch has transformed those plain pipes and dashes into a professionally styled table that matches your assigned brand (e.g. BMW's dark theme or Apple's minimalist style).

Adding blockquotes to Stitch

A blockquote is used to draw attention to important text, such as a customer testimonial or a company mission statement. In Markdown, this is achieved using the > symbol.

Follow these steps to add a blockquote to your design.md file:

1. Position your cursor: Move to the section where the quote should appear.
2. Add a blank line: Ensure there is an empty line above your quote so the engine recognises the change in formatting.
3. Start with a greater-than sign: Type the > character followed by a space, then your text.

Downloading your project

As a final step, you must download your entire project as a single ZIP file. This serves as your backup and ensures you have a permanent copy of your design.md file and all associated assets.

Follow these steps to export your work:

1. Save your progress: Ensure you have clicked the Save or Publish button in the top right corner of the Stitch editor.
2. Open the Project Menu: Click the vertical ellipsis (three dots) or the Project Settings icon located in the sidebar.
3. Export as ZIP: Select the Download Project (.zip) option.
4. Verify the contents: Locate the downloaded file on your computer and extract it. Ensure it contains your design.md file and that all your content is present.