bzdesignprompt
GitHub该 Skill 用于前端或网页设计任务,通过访问模板库匹配并下载 DESIGN.md 模板,为 UI 风格、设计系统提供约束。
Trigger Scenarios
Install
npx skills add chaitin/MonkeyCode --skill bzdesignprompt -g -y
SKILL.md
Frontmatter
{
"name": "bzdesignprompt",
"description": "为前端或网页设计任务选择并下载合适的 DESIGN.md 模板。当用户需要网页设计模板、UI 风格参考、设计系统、落地页或前端界面设计时,浏览长亭百智云 UI 设计模板库,根据产品场景和视觉偏好匹配模板,并将完整 DESIGN.md 保存到项目中。"
}
bzdesignprompt
从长亭百智云 UI 设计模板库中选择最符合用户需求的设计语言,并获取对应的完整 DESIGN.md,作为后续前端设计与实现的约束。
模板库地址:
https://baizhi.cloud/landing/design-prompt
何时使用
在以下场景使用本 Skill:
- 用户明确需要前端、网页、落地页、控制台、仪表盘或移动端 Web 的设计模板。
- 用户需要
DESIGN.md、UI 风格参考、视觉规范或设计系统。 - 用户要求设计、重做、美化或实现网页,但尚未提供明确的设计系统。
- 用户用品牌、产品或风格词描述目标,例如“像 Linear 一样克制”“暗色科技”“编辑杂志感”“极简留白”。
如果项目已有明确且正在使用的设计系统,先沿用现有规范。只有用户要求更换风格、补充模板,或现有规范不足时,才下载新的模板;不要静默覆盖已有设计决策。
必须遵守
- 每次选型都应访问模板库获取当前可用模板,不要依赖记忆中的模板数量、名称或链接。
- 优先使用
DesignTemplateCatalog获取并筛选完整模板目录,使用DesignTemplateArtifact获取完整提示词;只有对应工具不可用时才回退web_scrape。 - 只能使用页面实际返回的模板、标签、详情链接和提示词,不得编造模板或
DESIGN.md内容。 - 先选择模板,再获取详情页中的完整提示词;不要把列表页简介当成完整
DESIGN.md。 - 默认选择一个最合适的模板。只有多个方向同样合理且会显著改变结果时,才向用户提供最多三个候选并请用户选择。
- Design Flow 下统一保存到
.ohmyagent/design/DESIGN.md。独立使用时可保留用户指定路径;但DesignTemplateArtifact固定写入.ohmyagent/design/DESIGN.md,其他路径需在工具不可用时按安全写入流程处理。 - 如果目标位置已有
DESIGN.md,先阅读并确认它是否属于当前项目。未经用户明确同意,不得覆盖或拼接现有文件。
工作流
1. 理解设计需求
从用户请求和现有项目中提取以下信息:
- 产品类型和核心页面,例如 SaaS 控制台、开发者工具、电商、内容媒体、品牌官网或活动落地页。
- 目标用户与使用场景。
- 视觉倾向,例如明暗模式、克制或活泼、精密或松弛、内容密度、品牌气质。
- 技术和产品约束,例如现有组件库、品牌色、响应式要求和无障碍要求。
信息足以完成可靠匹配时直接继续。只有缺失信息会导致完全不同的设计方向时,才提出一个简短的澄清问题。
2. 浏览模板库
优先调用 DesignTemplateCatalog,通过 query 在工具内部筛选,并用合理的 limit 获取紧凑候选。该工具固定抓取模板库:
https://baizhi.cloud/landing/design-prompt
读取其返回的当前模板名称、风格标签、预览图和准确详情页链接。模板库可能更新,因此不要在 Skill 中维护固定模板清单。仅当 DesignTemplateCatalog 不可用时才调用 web_scrape 抓取该固定页面;若 web_scrape 输出被截断,不得把截断目录当作完整目录,也不得据此声称已完成全面筛选。
3. 选择合适模板
按以下优先级匹配:
- 产品场景和信息结构是否相近。
- 视觉气质及风格标签是否符合用户描述。
- 明暗模式、内容密度、排版和交互方式是否适合实际功能。
- 是否能兼容项目已有品牌、组件库和技术约束。
不要只因为模板名称来自知名品牌就选择它。品牌名称表示可借鉴的设计语言,不代表复制其商标、文案、图片或业务界面。
如果用户明确指定模板,仍需在模板库中确认该模板存在,然后使用页面提供的详情链接。不要凭模板名称猜测 URL。
4. 获取完整 DESIGN.md
优先将所选模板的准确详情链接传给 DesignTemplateArtifact。该工具从详情页提取完整中文默认提示词,并固定原子写入 .ohmyagent/design/DESIGN.md;调用后读回文件并验证非空。
只有 DesignTemplateArtifact 不可用时,才使用 web_scrape 抓取所选模板的详情页并定位“查看提示词”区域。详情页提供多种语言时,默认选择中文版本,用户另有指定且采用回退流程时遵循用户要求。若 web_scrape 输出出现截断,绝不能把截断内容保存为完整 DESIGN.md;应尝试页面提供的完整下载入口或其他语言版本,仍无法确认完整时停止并报告问题。
回退流程中,优先使用页面提供的下载入口下载完整文件。如果抓取结果没有暴露可下载链接,但明确展示了未截断的完整提示词代码块,则完整提取该代码块并原样保存为 DESIGN.md。Design Flow 的目标仍必须是 .ohmyagent/design/DESIGN.md;独立使用可采用用户指定路径。
保存时必须:
- 仅保存提示词代码块内容,不包含网页导航、模板简介、按钮文本、页脚或 Markdown 代码围栏。
- 保留原始 YAML front matter、设计 token、章节、表格和示例,不自行缩写或改写。
- 确认内容不是空文件,并至少包含模板名称或描述以及设计规范正文。
- 使用页面返回的完整内容,不能根据预览信息自行补齐缺失章节。
5. 应用模板
开始设计或编写前端代码前,完整阅读下载的 DESIGN.md。将其作为视觉方向和实现约束,重点落实颜色、排版、间距、布局、形状、组件状态、动效与响应式规则。
模板用于迁移设计语言,不用于照搬来源品牌。实现时应继续满足用户业务需求、现有技术栈、可访问性和移动端适配要求。如果模板规则与用户明确要求冲突,以用户要求为准,并说明偏离之处。
6. 汇报结果
完成后简要告知用户:
- 选择的模板名称及选择原因。
- 模板详情页来源。
DESIGN.md的保存路径。- 是否已经依据该模板完成后续设计或代码实现。
失败处理
- 模板库无法访问或
web_scrape失败时,不要凭记忆选择,也不要伪造DESIGN.md;说明失败原因并建议恢复网络后重试。 - 详情页没有返回完整提示词或下载内容为空时,尝试同一页面可用的其他语言版本;仍不完整则停止并报告问题。
- 没有合适模板时,说明现有模板与需求不匹配,并询问用户是放宽风格条件、选择最接近的模板,还是继续使用项目现有设计系统。
- 文件写入失败时,保留已获取的来源信息和模板名称,说明目标路径及具体错误,不要声称下载成功。
Version History
- 0739f4a Current 2026-09-02 22:31


