尧图建网站 尧图建网站 YAOTU WEB BUILD 免费咨询
ARTICLE DETAIL

资讯详情

深耕网站建设与建站编程的一线实战洞察。

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

stitch-skills UI/UX关键词速查表:Stitch优化词汇库完整指南 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-skillsstitch-skills 是配合 Google Stitch MCP 服务器使用的 Agent Skills 技能库内置一套专业级 UI/UX 关键词速查表Stitch 优化词汇库能帮你把做个好看的页面这类模糊描述一键升级为 Stitch 最易理解的结构化设计提示词快速生成高质量界面。本文带你快速掌握这份词汇库的用法。为什么 UI/UX 关键词决定生成质量用自然语言生成设计时用词越专业结果越接近设计师水准。stitch-skills 的 enhance-prompt 技能 核心思路就是把模糊词替换为 Stitch 听得懂的组件术语再用形容词调色板渲染氛围感。模糊说法增强后的专业术语顶部菜单带 logo 和菜单项的吸顶导航栏大图片全宽图片的高冲击力 Hero 区域按钮带微交互的主要行动号召按钮弹窗带遮罩和平滑入场动画的模态对话框这类模糊词 → 专业词映射表完整收录在 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 container2️⃣ 形容词调色板告诉 Stitch什么感觉风格推荐形容词极简 / 干净minimal、generous whitespace、distraction-free专业 / 商务sophisticated、trustworthy、subtle shadows活泼 / 趣味vibrant、rounded corners、bold colors高端 / 奢华elegant、sleek、cutting-edge、curated暗色模式dark theme、high-contrast accents、soft glows自然 / 有机earthy tones、warm、handcrafted例如只说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 state4️⃣ 形状的自然语言描述Stitch 更听得懂自然描述而非代码值速查表给出了完整对照代码值自然语言rounded-none锐利直角边缘rounded-md轻微圆角rounded-xl饱满的圆润边角rounded-full药丸形 / 圆形增强提示词的实战流程enhance-prompt 技能遵循一条清晰的增强流水线你也可以手动套用评估缺失检查提示词中是否包含 平台、页面类型、结构分节、视觉风格、颜色、组件术语 六大要素替换模糊词用组件关键词表逐一替换渲染氛围叠加形容词调色板结构化页面按 Header → Hero → 内容区 → Footer 编号分节规范颜色写成描述名 Hex 值 用途如Deep Blue (#2563eb) 用于主按钮和链接一个真实的增强案例原始输入给我的健身应用 Pulse 做个落地页可以看到最终输出只描述结构与内容不含任何颜色字体指令——因为视觉主题由项目级设计系统统一接管完整示例见 enhanced-prompt.md。进阶把词汇库变成设计标准如果你希望所有页面风格统一、摆脱AI 味可以搭配以下技能taste-design生成强制高端 UI 标准的 DESIGN.md内含密度、动效、色彩约束等量化指标见 SKILL.mdgenerate-design生成新屏幕、编辑现有屏幕、批量生成设计变体的主流程技能见 SKILL.mdstitch-loop从一条提示词自动构建多页网站示例见 SITE.md小贴士生成新页面时提示词只写布局、内容与结构颜色、字体、圆角等设计 token 交给设计系统DESIGN.md在项目层面统一应用两者混用反而会产生冲突。速查表文件位置一览资料路径组件/形容词关键词表prompt-keywords.md关键词参考增强专用KEYWORDS.md模糊词映射表design-mappings.md增强提示词技能enhance-prompt/SKILL.md提示词增强示例enhanced-prompt.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创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表