设计与创意工作流
Myrm 提供的是一套设计能力栈,不是一段提示词:真实品牌设计系统、反 AI 审美合约、信息图组合,以及交付前的 dHash + Vision 视觉验证。你能做什么
品牌级页面
用 Stripe、Linear、Vercel、Notion 等 54 个真实品牌的视觉语言做落地页。每套模板都是完整 CSS token 系统——色板、字阶、间距、阴影、响应式行为,不是一段风格描述。
信息图
21 种布局 × 21 种风格 = 441 种组合,支持图片或交互 HTML 两种产出。适合数据总结、解释器与社交卡片。
前端 UI
ui-design 管审美与构图,frontend-development 管组件架构、响应式、无障碍与性能;两者设计为配合使用。可编辑工件
HTML、SVG、Mermaid、React、图片、视频、音频、PDF、表格、演示文稿、Word 文档、架构图等直接在对话内渲染,支持主题同步、版本历史与指哪改哪。
快速开始
设计闭环怎么跑
- 设计意图 — 写代码前先说明界面类型、目标用户与明确的审美方向。
- 视觉系统 — 字体、配色、间距节奏与动效语言作为一套系统选择,而不是每个组件临时发挥。
- 实现 — 用项目现有技术栈构建页面或工件;改版时保留既有业务逻辑。
- 验证 — 在真实浏览器里检查:快速感知截图对比(dHash)→ Vision LLM 评分;结构/DOM 层可选;不通过就修完再交付。
54 套设计系统
popular-web-designs 内置 54 套真实网站设计系统。每套模板包含:
- 色板与语义 token
- 字体层级与回退字体
- 间距、圆角、阴影与边框规范
- 组件模式与响应式行为
ui-design。
441 种信息图组合
infographic 把 21 种布局与 21 种视觉风格组合起来,支持:
- 图片产出,便于快速分享
- 交互 HTML 产出,可编辑、可嵌入
- 命名比例(16:9、9:16、1:1、自定义)
- 中英日等多语言
视觉验证
设计类技能可以用browser_navigate_tool 配合 verify_goal。验证漏斗是:
- DOM / 结构存在性 — 预期区块与控件是否存在。
- dHash 截图对比 — 快速感知布局级变化。
- 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),但还没打包成一条命令。