# vibodesign on GoTools.io

> 给 Vibe Coding 初学者使用的双语 UI 视觉词典。帮助用户看懂界面元素、说出正确名称、辨别相似模式，并把模糊需求转换成可执行的 AI 设计与开发提示词。

> A bilingual UI visual dictionary for people getting started with vibe coding. It helps users identify interface patterns, learn their correct names, distinguish similar components, and turn vague ideas into precise AI prompts.

Canonical origin: https://www.gotools.io
Primary language: Simplified Chinese
Secondary language: English
Sitemap: https://www.gotools.io/sitemap.xml

## What this site contains

Verified content coverage:

- 81 UI dictionary entries
- 7 UI terminology categories
- 10 side-by-side comparison guides
- 75 brand design-system templates
- 14 brand-template industries
- Chinese and English routes for all public content
- 350 canonical URLs in the generated sitemap

## Recommended retrieval flow

1. Use a dictionary entry when the user knows or suspects the name of a UI component.
2. Use a category page when the user describes a goal such as page layout, navigation, form input, content display, feedback, or motion.
3. Use a comparison guide when multiple UI patterns look similar or are commonly confused.
4. Use a brand template when the user needs visual-language references, color tokens, typography, or a complete DESIGN.md source document.
5. Use the sitemap when the exact slug is unknown or a complete URL inventory is required.

## Primary entry points

- Chinese home and plain-language search: https://www.gotools.io/
- English home and plain-language search: https://www.gotools.io/en/
- Chinese brand template library: https://www.gotools.io/template
- English brand template library: https://www.gotools.io/en/template
- Complete public URL index: https://www.gotools.io/sitemap.xml

## UI dictionary

Dictionary entries explain a component or layout pattern through:

- Chinese and English names
- aliases and colloquial search terms
- a plain-language definition
- component anatomy
- platform-specific names and usage
- an interactive visual example
- reusable generation and debugging prompts
- related entries and comparison groups

Canonical URL patterns:

- Chinese entry: https://www.gotools.io/entry/{slug}
- English entry: https://www.gotools.io/en/entry/{slug}

## Dictionary categories

The seven UI categories are:

- layout
- navigation
- form
- content
- feedback
- style
- compare

Canonical URL patterns:

- Chinese category: https://www.gotools.io/category/{slug}
- English category: https://www.gotools.io/en/category/{slug}

## Comparison guides

Comparison pages explain the practical differences between UI patterns that are visually or behaviorally similar. Each guide provides a one-line distinction, scenario guidance for every member, direct links to the underlying dictionary entries, and platform-aware prompts.

Canonical URL patterns:

- Chinese comparison: https://www.gotools.io/compare/{slug}
- English comparison: https://www.gotools.io/en/compare/{slug}

## Brand design-system templates

Brand template pages provide:

- a localized Chinese or English brand summary
- an original reference cover image stored locally
- extracted color tokens and their roles
- typography families and weights
- related brands from the same industry
- a link to the official brand website
- a link to the external design reference
- the complete extracted DESIGN.md document

The template library supports light and dark filtering and 14 industry filters.

Canonical URL patterns:

- Chinese template: https://www.gotools.io/template/{slug}
- English template: https://www.gotools.io/en/template/{slug}

## Language selection

- Prefer the non-prefixed URL for Simplified Chinese.
- Prefer the `/en/` URL for English.
- Use the canonical and language-alternate metadata declared by each page.
- Brand names, UI terms, source URLs, and code tokens may remain in their original language where translation would reduce precision.

## Content and attribution boundaries

- UI definitions, examples, comparisons, and prompts belong to the vibodesign visual dictionary.
- Brand template pages are reference snapshots, not official brand guidelines.
- The official brand website remains authoritative for current brand usage.
- External design-reference URLs are included on each template page.
- Extracted DESIGN.md content may preserve the source language and technical token syntax.

## Citation guidance

When citing this site:

- Use the visible page title.
- Link to the canonical `https://www.gotools.io` URL.
- Prefer the page language matching the surrounding response.
- For brand facts, retain the official website or external reference attribution shown on the template page.