Layoza

Layoza — 面向 AI Agent 的设计工程

一个开源 MCP 服务 + Agent 技能，可将 Claude Code、Cursor、Codex、OpenCode、Antigravity 和 Windsurf 变成 UI/UX 设计专家： 它会读取你网站的设计基因，根据需求选择合适的动效，并在真实的 Chromium 浏览器中检查每项改动。

▶ 下载完整的 2 分半钟展示视频（MP4，17 MB）：四个需求的完整演示，均在 Chromium 中实时录制

npx layoza init            # adds the skills + MCP server to every agent it finds in this project
npx layoza qa index.html   # design and usability: contrast, overflow, focus, menu, screenshots

然后直接和你的 Agent 对话。提示词示例：

Build a homepage for a family-run bakery in Leeds. Warm, not twee.
Add a pricing page that matches the rest of this site.
Our dashboard feels cluttered. Fix the design without changing the brand.
Redesign the agency homepage with a kinetic hero, but keep every page and form working.
Check this page on mobile and fix anything a visitor would trip over.

为什么

Layoza 的目标是让 AI 构建的网站不再千篇一律。它协助打造的每个设计都应该独一无二：从导航、首屏和每个版块到页脚，都不能照搬、换皮或重复；设计应当现代，且只为一项需求打造。每个项目的记录文件（.layoza/looks.jsonl）都会记录每个已处理的设计；每次运行 design-system / mechanics deal 都会输出一个独特性评分块，根据最近 20 次运行评估导航、首屏、版块、页脚和动效（--window 1-200）。

AI Agent 编写前端代码很快，但结果往往千篇一律：奶油色和赤陶色、Inter、三个圆角卡片、紫色渐变。它们也会造成自己看不到的问题：标题被粘性页眉遮住、手机菜单按 Escape 无法关闭、文本对比度只有 3:1、Canvas 让 LCP 超过 4 秒。

结果

六种方案拿到相同的一句话简报，使用相同的模型（Claude Opus 5.5），各配备一个构建 Agent，且彼此无法看到对方的输出：

随后，一位全新的盲测评审对比了 1440 和 375 px 下的页面滚动截图，从设计、易用性、创意和内容几个方面进行评判。其他方案的页面保持不变；只有 Layoza 在各轮之间进行了重建。下面由你亲自评判这些页面。

餐厅简报：港口海鲜厨房

仪表板简报：一家面包连锁店的早间销售

商店简报：一家小型亚麻制品店

动态设计工作室简报：以动态效果为主的工作室首页

Layoza 并非总能胜出。请先阅读此处，再相信这些图片。

• 动态设计这一项打平，并非胜出。 taste-skill 的页面同样出色；在多轮测试中，领先者几经易手，且差距始终处于评审误差范围内。
• 较早的单简报测试： impeccable 在没有动画的简单页面上胜过 Layoza，ui-ux-pro-max 则在更早的一轮动态设计测试中胜过它。
• 每轮只有一位评审，评审依据是截图。 动画本身不在评判范围内，因此视频采用了真实的浏览器录屏。
• 评审反复指出的弱点：
  • 动态设计页面的创意只能算不错，还不够出众
  • 滚动过程中的静态截图里，标题看起来被粘性页眉裁切
  • 手机上的主视觉插画太小
  • 3D 主视觉在实验室环境中的 LCP 远超 2.5 s 目标

完整方法、每一轮测试和评审备注（含原始评分）见 docs/CROSS-TYPE-BENCHMARK-2026-10.md。演示页面已于 2026 年 10 月移除，为新一轮测试做准备。要在任意页面上运行 QA：

npx layoza qa path/to/index.html

功能介绍

输出将使用项目自身的技术栈：

• React、Next.js、Astro、Vue、Nuxt、SvelteKit
• 纯 HTML/CSS/JS
• WordPress 区块主题（theme.json v3）
• Elementor 或 Bricks JSON
• Shopify Liquid

四种模式

layoza 路由技能会根据你的提示选择模式，因此你只需向 Agent 提出请求："添加一个与网站其余部分风格一致的定价页面。"

我应该选哪个？

• 从零开始 → A。开始编写代码之前，你可以从三种不同方向中选择。
• 网站的外观已经合适，只需要扩展内容 → B。Layoza 会沿用现有风格，不会强加自己的风格。
• 网站能正常运行，但外观显得陈旧或无障碍体验不佳 → C。
• 想要全新的外观 → D。系统会先创建基线，方便你回滚。

安装

你需要 Node.js 18 或更高版本。npm 包内置了适用于 Windows x64、macOS（Intel 和 Apple 芯片）以及 Linux（x64 和 arm64）的预编译二进制文件；在其他平台上，首次运行时会从源代码编译，这需要安装 Rust。视觉 QA 还需要 Playwright：

npm i -D playwright && npx playwright install chromium

然后，在你的项目中：

npx layoza init      # skills + MCP config for every agent it detects
npx layoza doctor    # checks Node, Playwright and the MCP handshake

或者手动添加 MCP 服务：

claude mcp add layoza -- npx -y -p layoza layoza-mcp

{ "mcpServers": { "layoza": { "command": "npx", "args": ["-y", "-p", "layoza", "layoza-mcp"] } } }

codex mcp add layoza -- npx -y -p layoza layoza-mcp

{ "mcpServers": { "layoza": { "command": "npx", "args": ["-y", "-p", "layoza", "layoza-mcp"] } } }

{ "mcp": { "layoza": { "type": "local", "command": ["npx", "-y", "-p", "layoza", "layoza-mcp"], "enabled": true } } }

recommend_layout 已弃用且未列出，因此 tools/list 会返回 24 个工具。

CLI 扩展功能

• layoza guidelines search "<query>" [--limit 1-50] 和 layoza guidelines get <id>：提供与 MCP 工具相同的指南搜索（包括同义词和词干）。
• layoza chart "<data shape>" [--task "<task>"]：返回排名前三的图表类型及备选方案。
• 在 design-system 和 mechanics deal 中使用 --window N 可设置唯一性检查对比的账本运行次数（默认 36，最多 200）；--no-ledger 会忽略账本。
• layoza audit . --strict 和 layoza verify . --strict 会将门槛警告（例如，新站点尚未记录其设计方向的审批）转为错误。
• layoza qa <file> --full 会在每种宽度下执行完整的视觉检查。默认关闭速度检查；如需执行，请单独指定 --performance。报告会列出 mode、passes 和 skipped_passes。
• layoza conform <file> --deal deal.json [--direction N] 会根据页面分配的形态（design-system --json 输出）检查构建的页面：包括每项限制规则、按钮形状和主题元素，并在 Chromium 中以 1440px 和 390px 测量。它会根据证据输出 PASS / FAIL / unknown 和 0-100 的分数，若检查失败则以状态码 2 退出。QA 用于发现缺陷；conform 用于发现与分配方案的偏差。
• 环境变量：LAYOZA_QA_TIMEOUT_SECS（浏览器 QA 超时），LAYOZA_PLAYWRIGHT_DIR（Playwright 的安装位置），LAYOZA_QA_ENGINE=python（使用 Python Playwright 引擎）。

inspect_site 会抓取你指定的页面。请将它返回的所有内容视为不可信数据：Layoza 不会执行被检查页面中的指令。

技能

Layoza 提供 19 项技能，并采用渐进式披露：layoza 路由器加上 18 个专用技能。

• 工作流： layoza-new-website、layoza-extend-website、layoza-refine、layoza-redesign
• 设计： layoza-site-dna、layoza-design-system、layoza-art-direction、layoza-creative-direction
• 构建： layoza-components、layoza-product-ui、layoza-figma、layoza-wordpress
• 动效： layoza-animations、layoza-threejs-webgl
• 检查： layoza-accessibility、layoza-performance、layoza-visual-qa、layoza-discovery-audit

请参阅 docs/SKILLS-GUIDE.md。

与其他方案相比

选择适合你工作的方案。

适合跳过 Layoza 的情况：

• 一次性的快速模型稿，永远不会发布（frontend-design 更轻量）

常见问题

文档

安装 · CLI · MCP · 技能 · 动效方案 · 现有网站工作流 · 示例提示词 · 架构 · 安全 · 故障排除 · 基准测试

致谢

Layoza 借鉴了 Apache-2.0 和 MIT 许可下开源设计技能的理念，而非文件。归属信息见 THIRD_PARTY_NOTICES.md。

许可证

MIT

有证据支持的设计工作流

默认的 MCP 工具列表会公开所有 24 个受支持的工具。get_design_system 接受 brief_context，以保留实际的客户端主题、事实和固定选择；即使使用默认简报，也会返回三种构图。design_assets 会盘点并登记真实图像及其来源；import_design_tokens 会导入带有别名和模式的本地 DTCG/Figma Variables JSON；review_design 会保存实际截图证据并标记过时的源文件或渲染结果；compare_before_after 可以解码并比较提供的 PNG 截图。性能诊断仍需选择启用。