> ## Documentation Index
> Fetch the complete documentation index at: https://docs.myrmagent.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# 设计与创意工作流

> 一句话生成经过验证的视觉结果——54 套设计系统、441 种信息图组合、前端 UI 与 15 种工件。

# 设计与创意工作流

Myrm 提供的是一套**设计能力栈**，不是一段提示词：真实品牌设计系统、反 AI 审美合约、信息图组合，以及交付前的 dHash + Vision 视觉验证。

## 你能做什么

> [card] 品牌级页面
>
> 用 Stripe、Linear、Vercel、Notion 等 54 个真实品牌的视觉语言做落地页。每套模板都是完整 CSS token 系统——色板、字阶、间距、阴影、响应式行为，不是一段风格描述。

> [card] 信息图
>
> 21 种布局 × 21 种风格 = 441 种组合，支持图片或交互 HTML 两种产出。适合数据总结、解释器与社交卡片。

> [card] 前端 UI
>
> `ui-design` 管审美与构图，`frontend-development` 管组件架构、响应式、无障碍与性能；两者设计为配合使用。

> [card] 可编辑工件
>
> HTML、SVG、Mermaid、React、图片、视频、音频、PDF、表格、演示文稿、Word 文档、架构图等直接在对话内渲染，支持主题同步、版本历史与指哪改哪。

## 快速开始

```text theme={null}
按 Linear 的风格做一个深色开发者工具落地页。
```

```text theme={null}
把这份 CSV 做成一张信息图，用 bento-grid 布局和温暖的编辑风格。
```

```text theme={null}
给我们的客服队列做一个响应式看板，保留现有品牌色，交付前在浏览器里验证。
```

## 设计闭环怎么跑

1. **设计意图** — 写代码前先说明界面类型、目标用户与明确的审美方向。
2. **视觉系统** — 字体、配色、间距节奏与动效语言作为一套系统选择，而不是每个组件临时发挥。
3. **实现** — 用项目现有技术栈构建页面或工件；改版时保留既有业务逻辑。
4. **验证** — 在真实浏览器里检查：快速感知截图对比（dHash）→ Vision LLM 评分；结构/DOM 层可选；不通过就修完再交付。

## 54 套设计系统

`popular-web-designs` 内置 54 套真实网站设计系统。每套模板包含：

* 色板与语义 token
* 字体层级与回退字体
* 间距、圆角、阴影与边框规范
* 组件模式与响应式行为

用户点名某个品牌风格时用它；如果页面还需要独特概念与反 slop 审查，再配合 `ui-design`。

## 441 种信息图组合

`infographic` 把 21 种布局与 21 种视觉风格组合起来，支持：

* 图片产出，便于快速分享
* 交互 HTML 产出，可编辑、可嵌入
* 命名比例（16:9、9:16、1:1、自定义）
* 中英日等多语言

布局包括 bento grid、线性叙事、仪表盘、漏斗、对比、时间线等。

## 视觉验证

设计类技能可以用 `browser_navigate_tool` 配合 `verify_goal`。验证漏斗是：

1. **DOM / 结构存在性** — 预期区块与控件是否存在。
2. **dHash 截图对比** — 快速感知布局级变化。
3. **Vision LLM 评分** — 结构化 1–5 分判断渲染结果是否匹配 brief。

这不是「随便截张图」，而是能在用户看到之前抓住白屏、缺区块与视觉回归。

## 15 种工件

Myrm 原生内联渲染：code、document、HTML、image、video、audio、SVG、Mermaid、PDF、spreadsheet、presentation、Word document、binary、React、architecture。HTML 工件通过 widget theme bridge 继承宿主主题；工件面板支持版本历史、元素选择与划选修改。

## 诚实边界

* **是 54 套，不是 84 套设计系统。** 模板库是精选的；继续加模板是内容工作，不是新引擎。
* **没有一键 3D 科学解释器。** `blender-mcp` 能驱动本地 Blender，3D 资产 roadmap 覆盖生成与查看，但神经元式 3D 数据大屏还不是一句话打包的流程。
* **参考动效 → 可编辑代码尚未交付。** Remake Mode / reference-to-motion 在 roadmap 上。
* **不是完整 Figma 编辑器。** Figma 通过只读 MCP 与截图/设计稿转代码接入；Myrm 不替代 Figma。
* **没有单按钮「6 个方向 → 3 个成品」。** 零件都在（`ui-design`、`infographic`、`ppt-outline-quality-gate`），但还没打包成一条命令。

## 从设计技能仓库迁移

| 如果你之前用… | 在 Myrm 里从…开始 |
| - | - |
| Awesome DESIGN.md | `popular-web-designs` + `ui-design` |
| Hallmark | `ui-design`（反 slop + 浏览器验证） |
| Huashu Design | `infographic` + `ppt-outline-quality-gate` + `ui-design` |
| video-shotcraft | `video-production-pipeline`（生成式视频）；代码渲染视频在 roadmap |
| OpenPencil | 设计画布在 roadmap；当前用 Figma MCP 或截图转代码 |
| Motion2Code | 尚未交付；参考动效管线在 roadmap |
| Blender Agent Skills | `blender-mcp`（需要本地 Blender） |

## 相关文档

* [智能体模板](https://docs.myrmagent.ai/zh/guides/agent-templates)
* [交互式 UI](https://docs.myrmagent.ai/zh/guides/interactive-ui)
* [主题工作室](https://docs.myrmagent.ai/zh/guides/theme-studio)
* [分层验证手册](https://docs.myrmagent.ai/zh/guides/layered-verification-playbook)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.