# Where to Find Design Mappings for Professional UI Terminology in Stitch

> Discover design mappings for UI terminology in Stitch. Find the reference file in the stitch-design plugin to ensure consistent professional language.

- Repository: [Google Labs Code/stitch-skills](https://github.com/google-labs-code/stitch-skills)
- Tags: how-to-guide
- Published: 2026-07-12

---

**Design mappings for professional UI terminology in Stitch are stored in the [`design-mappings.md`](https://github.com/google-labs-code/stitch-skills/blob/main/design-mappings.md) reference file located at [`plugins/stitch-design/skills/generate-design/references/design-mappings.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/generate-design/references/design-mappings.md) in the stitch-design plugin.**

Stitch translates high-level professional UI terms like "primary button" and "card header" into concrete component specifications through **design mappings for professional UI terminology**. These mappings serve as the bridge between natural language design requests and actionable frontend code. This guide shows you exactly where these mappings live in the `google-labs-code/stitch-skills` repository and how the **generate-design** skill consumes them at runtime.

## Location of the Design Mappings Reference File

The canonical source for professional UI terminology resides at:

```

plugins/stitch-design/skills/generate-design/references/design-mappings.md

```

This markdown file contains a structured key-value map where each **professional UI term** (e.g., "hero banner", "data table") points to a JSON snippet describing component names, props, and required design tokens. According to the stitch-skills source code, the **generate-design** skill reads this file at runtime to enrich prompts requesting "professional UI" designs, outputting ready-to-use specifications for React, Vue, or plain HTML/CSS frameworks.

## Architecture of the Design Mapping System

Stitch's terminology translation follows a three-layer architecture defined in the `stitch-design` plugin:

1. **Skill Definition** – [`SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/SKILL.md) defines schemas and references
2. **Prompt Keywords** – [`prompt-keywords.md`](https://github.com/google-labs-code/stitch-skills/blob/main/prompt-keywords.md) validates vocabulary
3. **Runtime Mapping Logic** – [`design-mappings.md`](https://github.com/google-labs-code/stitch-skills/blob/main/design-mappings.md) provides component specs

### Skill Definition (SKILL.md)

The [`plugins/stitch-design/skills/generate-design/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/generate-design/SKILL.md) file defines the **generate-design** skill's input schema, output schema, and links to reference files. This metadata tells Stitch how to validate incoming requests and where to locate the mapping resources.

### Prompt Keywords Reference

The [`plugins/stitch-design/skills/generate-design/references/prompt-keywords.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/generate-design/references/prompt-keywords.md) file maintains the vocabulary Stitch expects in design requests. When a user submits a prompt like "Create a professional dashboard UI with a primary button and a data table", the system first validates the terms against this keyword list before retrieving component specifications.

### Runtime Logic

When processing a design request, the skill's handler loads [`design-mappings.md`](https://github.com/google-labs-code/stitch-skills/blob/main/design-mappings.md), performs lookups for each recognized term, and merges the resulting component specs into the final design document. This happens at runtime, ensuring the most current mappings are always applied.

## Using the Generate-Design Skill with Professional UI Terms

Invoke the skill via the Stitch CLI to see the mappings in action:

```bash
stitch run generate-design \
  --prompt "Create a professional login page with a primary button and a hero banner"

```

*Result (simplified)* – The skill reads [`design-mappings.md`](https://github.com/google-labs-code/stitch-skills/blob/main/design-mappings.md) and returns a JSON design spec:

```json
{
  "components": [
    {
      "type": "Button",
      "variant": "primary",
      "label": "Log In"
    },
    {
      "type": "Banner",
      "style": "hero",
      "content": "Welcome to Our Service"
    }
  ]
}

```

## How to Access and Extend the Mappings

You can view the mappings directly on GitHub or clone the repository to inspect them locally:

```bash

# Clone the repository

git clone https://github.com/google-labs-code/stitch-skills.git

# Navigate to the mappings file

cat plugins/stitch-design/skills/generate-design/references/design-mappings.md

```

### Adding Custom Professional UI Terms

To extend the professional UI terminology:

1. Edit [`design-mappings.md`](https://github.com/google-labs-code/stitch-skills/blob/main/design-mappings.md) to add or update the JSON entry for the term
2. Update [`prompt-keywords.md`](https://github.com/google-labs-code/stitch-skills/blob/main/prompt-keywords.md) if the term introduces new vocabulary
3. Test the changes using the Stitch CLI

## Programmatically Consuming the Mappings

If you need to load these mappings in your own tooling, you can parse the file directly as implemented in `google-labs-code/stitch-skills`:

```python
import json
import pathlib

# Load the mapping file

mapping_path = pathlib.Path(
    "plugins/stitch-design/skills/generate-design/references/design-mappings.md"
)

with mapping_path.open() as f:
    raw = f.read()
    # Extract the JSON block (assumes fenced with ```json)

    json_block = raw.split("```json")[1].split("```")[0]
    design_mappings = json.loads(json_block)

# Example lookup

term = "primary button"
components = design_mappings.get(term, [])
print(f"Components for '{term}':", components)

```

Running this snippet prints the component definition(s) associated with "primary button", as defined in [`design-mappings.md`](https://github.com/google-labs-code/stitch-skills/blob/main/design-mappings.md).

## Key Files in the Stitch Design Plugin

Understanding the full context requires familiarity with these source files:

- **[`plugins/stitch-design/skills/generate-design/references/design-mappings.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/generate-design/references/design-mappings.md)** – Central mapping of professional UI terms to component specs
- **[`plugins/stitch-design/skills/generate-design/SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/generate-design/SKILL.md)** – Skill definition with input/output schemas
- **[`plugins/stitch-design/skills/generate-design/references/prompt-keywords.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/generate-design/references/prompt-keywords.md)** – Recognized vocabulary for prompt parsing
- **[`plugins/stitch-design/plugin.json`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/plugin.json)** – Plugin manifest registering the generate-design skill

## Summary

- **Design mappings** for professional UI terminology live in [`plugins/stitch-design/skills/generate-design/references/design-mappings.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/generate-design/references/design-mappings.md)
- The **generate-design** skill reads this file at runtime to translate terms like "primary button" into concrete component specifications
- The system uses a three-layer architecture: **SKILL.md** for definitions, **prompt-keywords.md** for vocabulary validation, and **design-mappings.md** for component specs
- Update both [`design-mappings.md`](https://github.com/google-labs-code/stitch-skills/blob/main/design-mappings.md) and [`prompt-keywords.md`](https://github.com/google-labs-code/stitch-skills/blob/main/prompt-keywords.md) when adding new professional UI terms
- You can programmatically parse the mappings using standard JSON extraction from the markdown file

## Frequently Asked Questions

### What format does the design-mappings.md file use?

The file uses a markdown structure containing fenced JSON code blocks. Each professional UI term maps to a JSON snippet describing the component name, props, and required design tokens. This format allows both human readability and machine parsing.

### Can I add custom professional UI terms to Stitch?

Yes. To add custom terms, edit [`plugins/stitch-design/skills/generate-design/references/design-mappings.md`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/skills/generate-design/references/design-mappings.md) to include your new term-to-component mapping, then update [`prompt-keywords.md`](https://github.com/google-labs-code/stitch-skills/blob/main/prompt-keywords.md) to ensure the skill recognizes the vocabulary. Changes take effect immediately at runtime without requiring recompilation.

### How does Stitch handle terms not found in the mappings?

If a user prompt contains professional UI terminology not present in [`design-mappings.md`](https://github.com/google-labs-code/stitch-skills/blob/main/design-mappings.md), the **generate-design** skill will either ignore the unrecognized term or fall back to generic component generation, depending on the implementation logic defined in [`SKILL.md`](https://github.com/google-labs-code/stitch-skills/blob/main/SKILL.md).

### Where is the generate-design skill registered?

The skill is registered in [`plugins/stitch-design/plugin.json`](https://github.com/google-labs-code/stitch-skills/blob/main/plugins/stitch-design/plugin.json), which serves as the plugin manifest. This file tells Stitch where to find the skill definition and its associated reference files, including the design mappings for professional UI terminology.