企业官网建设流程全解析

stitch-skills UI/UX关键词速查表：Stitch优化词汇库完整指南

【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills

stitch-skills 是配合 Google Stitch MCP 服务器使用的 Agent Skills 技能库，内置一套专业级 UI/UX 关键词速查表（Stitch 优化词汇库），能帮你把"做个好看的页面"这类模糊描述，一键升级为 Stitch 最易理解的结构化设计提示词，快速生成高质量界面。本文带你快速掌握这份词汇库的用法。

为什么 UI/UX 关键词决定生成质量

用自然语言生成设计时，用词越专业，结果越接近设计师水准。stitch-skills 的 enhance-prompt 技能 核心思路就是：把模糊词替换为 Stitch 听得懂的组件术语，再用形容词调色板渲染"氛围感"。

这类"模糊词 → 专业词"映射表，完整收录在 design-mappings.md 中，是撰写生成提示词前最值得翻阅的资料。

一分钟上手：速查表的获取与安装

如果你想在本地使用整套技能，只需克隆仓库并安装插件：

git clone https://gitcode.com/GitHub_Trending/st/stitch-skills

安装后可直接使用两大插件：

• stitch-design：核心设计工作流（生成、编辑、变体、设计系统管理）
• stitch-utilities：提示词增强、设计规格生成等辅助工具

核心速查表：组件关键词怎么查

词汇库的完整内容位于两处互为补充的文件：

• 组件词表：prompt-keywords.md
• 词汇参考（增强提示词专用）：KEYWORDS.md

按使用场景，关键词分为四大类：

1️⃣ 组件关键词（告诉 Stitch"要什么"）

• 导航类：navigation bar、breadcrumbs、tabs、sidebar、hamburger menu
• 内容容器：hero section、card grid、modal、accordion、carousel
• 表单类：input field、dropdown、toggle switch、date picker、search bar
• 行动号召：primary button、ghost button、floating action button (FAB)
• 反馈提示：toast notification、skeleton loader、progress bar
• 布局结构：grid layout、split view、sticky header、max-width container

2️⃣ 形容词调色板（告诉 Stitch"什么感觉"）

例如只说"dark mode"效果有限，换成"dark theme with high-contrast accents on deep backgrounds"，生成质量会有明显提升。

3️⃣ 颜色角色术语（精准描述色彩分工）

• 背景：page background、surface color、overlay
• 文字：primary text、muted text、placeholder
• 强调色：primary accent、success/error/warning colors、hover state

4️⃣ 形状的自然语言描述

Stitch 更听得懂"自然描述"而非代码值，速查表给出了完整对照：

增强提示词的实战流程

enhance-prompt 技能遵循一条清晰的增强流水线，你也可以手动套用：

1. 评估缺失：检查提示词中是否包含 平台、页面类型、结构分节、视觉风格、颜色、组件术语 六大要素
2. 替换模糊词：用组件关键词表逐一替换
3. 渲染氛围：叠加形容词调色板
4. 结构化页面：按 Header → Hero → 内容区 → Footer 编号分节
5. 规范颜色：写成"描述名 + Hex 值 + 用途"，如Deep Blue (#2563eb) 用于主按钮和链接

一个真实的增强案例（原始输入："给我的健身应用 Pulse 做个落地页"）可以看到最终输出只描述结构与内容，不含任何颜色字体指令——因为视觉主题由项目级设计系统统一接管，完整示例见 enhanced-prompt.md。

进阶：把词汇库变成设计标准

如果你希望所有页面风格统一、摆脱"AI 味"，可以搭配以下技能：

• taste-design：生成强制高端 UI 标准的 DESIGN.md，内含密度、动效、色彩约束等量化指标，见 SKILL.md
• generate-design：生成新屏幕、编辑现有屏幕、批量生成设计变体的主流程技能，见 SKILL.md
• stitch-loop：从一条提示词自动构建多页网站，示例见 SITE.md

💡小贴士：生成新页面时，提示词只写布局、内容与结构；颜色、字体、圆角等设计 token 交给设计系统（DESIGN.md）在项目层面统一应用，两者混用反而会产生冲突。

速查表文件位置一览

总结

这份 UI/UX 关键词速查表是 stitch-skills 的"隐藏宝藏"：组件关键词负责结构，形容词调色板负责氛围，颜色角色与形状描述负责细节。养成写作提示词前先查表的习惯，你的 Stitch 生成结果会从"能用"跃升到"惊艳"。

【免费下载链接】stitch-skillsA library of Agent Skills designed to work with the Stitch MCP server. Each skill follows the Agent Skills open standard, for compatibility with coding agents such as Antigravity, Gemini CLI, Claude Code, Cursor.项目地址: https://gitcode.com/GitHub_Trending/st/stitch-skills