Where to Find Design Mappings for Professional UI Terminology in Stitch

Design mappings for professional UI terminology in Stitch are stored in the design-mappings.md reference file located at 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 defines schemas and references
2. Prompt Keywords – prompt-keywords.md validates vocabulary
3. Runtime Mapping Logic – design-mappings.md provides component specs

Skill Definition (SKILL.md)

The 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 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, 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:

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 and returns a JSON design spec:

{
  "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:

# 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 to add or update the JSON entry for the term
2. Update 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:

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.

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 – Central mapping of professional UI terms to component specs
• plugins/stitch-design/skills/generate-design/SKILL.md – Skill definition with input/output schemas
• plugins/stitch-design/skills/generate-design/references/prompt-keywords.md – Recognized vocabulary for prompt parsing
• 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
• 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 and 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 to include your new term-to-component mapping, then update 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, 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.

Where is the generate-design skill registered?

The skill is registered in 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.

{
  "mcpServers": {
    "instagit": {
      "command": "npx",
      "args": ["-y", "instagit@latest"]
    }
  }
}