跳转到主要内容

设计与创意工作流

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 文档、架构图等直接在对话内渲染,支持主题同步、版本历史与指哪改哪。

快速开始

设计闭环怎么跑

  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),但还没打包成一条命令。

从设计技能仓库迁移

相关文档