# Bzdesignprompt

> 为前端或网页设计任务选择并下载合适的 DESIGN.md 模板。当用户需要网页设计模板、UI 风格参考、设计系统、落地页或前端界面设计时，浏览长亭百智云 UI 设计模板库，根据产品场景和视觉偏好匹配模板，并将完整 DESIGN.md 保存到项目中。

- Skill: `chaitin/bzdesignprompt` (Agent Skill)
- Install (CLI): `npx skillmds@latest add chaitin/bzdesignprompt`
- Raw SKILL.md: https://api.skillmd.com/api/skills/chaitin/bzdesignprompt/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: chaitin (https://skillmd.com/u/chaitin)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/chaitin/bzdesignprompt

---


# bzdesignprompt

从长亭百智云 UI 设计模板库中选择最符合用户需求的设计语言，并获取对应的完整 `DESIGN.md`，作为后续前端设计与实现的约束。

模板库地址：

```text
https://baizhi.cloud/landing/design-prompt
```

## 何时使用

在以下场景使用本 Skill：

- 用户明确需要前端、网页、落地页、控制台、仪表盘或移动端 Web 的设计模板。
- 用户需要 `DESIGN.md`、UI 风格参考、视觉规范或设计系统。
- 用户要求设计、重做、美化或实现网页，但尚未提供明确的设计系统。
- 用户用品牌、产品或风格词描述目标，例如“像 Linear 一样克制”“暗色科技”“编辑杂志感”“极简留白”。

如果项目已有明确且正在使用的设计系统，先沿用现有规范。只有用户要求更换风格、补充模板，或现有规范不足时，才下载新的模板；不要静默覆盖已有设计决策。

## 必须遵守

1. 每次选型都应访问模板库获取当前可用模板，不要依赖记忆中的模板数量、名称或链接。
2. 优先使用 `DesignTemplateCatalog` 获取并筛选完整模板目录，使用 `DesignTemplateArtifact` 获取完整提示词；只有对应工具不可用时才回退 `web_scrape`。
3. 只能使用页面实际返回的模板、标签、详情链接和提示词，不得编造模板或 `DESIGN.md` 内容。
4. 先选择模板，再获取详情页中的完整提示词；不要把列表页简介当成完整 `DESIGN.md`。
5. 默认选择一个最合适的模板。只有多个方向同样合理且会显著改变结果时，才向用户提供最多三个候选并请用户选择。
6. Design Flow 下统一保存到 `.ohmyagent/design/DESIGN.md`。独立使用时可保留用户指定路径；但 `DesignTemplateArtifact` 固定写入 `.ohmyagent/design/DESIGN.md`，其他路径需在工具不可用时按安全写入流程处理。
7. 如果目标位置已有 `DESIGN.md`，先阅读并确认它是否属于当前项目。未经用户明确同意，不得覆盖或拼接现有文件。

## 工作流

### 1. 理解设计需求

从用户请求和现有项目中提取以下信息：

- 产品类型和核心页面，例如 SaaS 控制台、开发者工具、电商、内容媒体、品牌官网或活动落地页。
- 目标用户与使用场景。
- 视觉倾向，例如明暗模式、克制或活泼、精密或松弛、内容密度、品牌气质。
- 技术和产品约束，例如现有组件库、品牌色、响应式要求和无障碍要求。

信息足以完成可靠匹配时直接继续。只有缺失信息会导致完全不同的设计方向时，才提出一个简短的澄清问题。

### 2. 浏览模板库

优先调用 `DesignTemplateCatalog`，通过 `query` 在工具内部筛选，并用合理的 `limit` 获取紧凑候选。该工具固定抓取模板库：

```text
https://baizhi.cloud/landing/design-prompt
```

读取其返回的当前模板名称、风格标签、预览图和准确详情页链接。模板库可能更新，因此不要在 Skill 中维护固定模板清单。仅当 `DesignTemplateCatalog` 不可用时才调用 `web_scrape` 抓取该固定页面；若 `web_scrape` 输出被截断，不得把截断目录当作完整目录，也不得据此声称已完成全面筛选。

### 3. 选择合适模板

按以下优先级匹配：

1. 产品场景和信息结构是否相近。
2. 视觉气质及风格标签是否符合用户描述。
3. 明暗模式、内容密度、排版和交互方式是否适合实际功能。
4. 是否能兼容项目已有品牌、组件库和技术约束。

不要只因为模板名称来自知名品牌就选择它。品牌名称表示可借鉴的设计语言，不代表复制其商标、文案、图片或业务界面。

如果用户明确指定模板，仍需在模板库中确认该模板存在，然后使用页面提供的详情链接。不要凭模板名称猜测 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`；说明失败原因并建议恢复网络后重试。
- 详情页没有返回完整提示词或下载内容为空时，尝试同一页面可用的其他语言版本；仍不完整则停止并报告问题。
- 没有合适模板时，说明现有模板与需求不匹配，并询问用户是放宽风格条件、选择最接近的模板，还是继续使用项目现有设计系统。
- 文件写入失败时，保留已获取的来源信息和模板名称，说明目标路径及具体错误，不要声称下载成功。