点击查看大图
点击查看大图
点击查看大图
全面介绍
✨ StyleGuardAI：告别界面风格漂移，确保设计一致性
在 AI 快速生成界面的时代，如何保持风格统一和避免频繁返工？StyleGuardAI 提供了独特的解决方案，它能将您的设计意图转化为结构化的、带版本的设计规范，并在所有 AI 助手、会话和输出中严格执行这些规范，让您的界面长期保持一致，同时减少人工修正，并使设计变更清晰可追溯。
💡 工作原理：灵感锚定，风格永不漂移
1. 设定灵感契约：视觉语言 (Visual Languages)
每个视觉语言都捕捉了主题、设计代币 (tokens) 和设计护栏 (guardrails)，指导 AI 代理生成界面。
- 主题与风格： 例如，"Aurora Grid" 提供模块化瓷砖与发光分隔符，适用于 SaaS 风格；"Brutal Signal" 则提供高对比度编辑块与粗犷线条。
- 设计代币： 包含颜色、间距、圆角等具体设计元素。
- 护栏： 明确密度、按钮样式、布局模式等约束，确保生成内容符合预期。
“灵感先行，漂移永无。” —— StyleGuardAI
2. 定义结构框架：组织与布局 (Structures)
结构定义了视觉语言必须填充的“槽位”或区域，确保最终输出的布局和组件构成符合预设。
- 通用结构： 例如，我们提供了 Dashboard（仪表板）、SaaS (软件即服务页面)、Editorial (编辑页面) 和 Portfolio (作品集) 等常见界面结构。
- 必填与可选槽位： 每个结构都会明确指出必须包含的组件（如侧边栏导航、数据表格）和可选组件。
🎯 将选定的“视觉语言”与“结构”组合，即可通过 API 一次性生成确定性代码，无需存储状态，确保每次输出都高度一致。
🚀 使用场景与解决方案
解决痛点：
- AI 代理解释提示词不同而导致的风格漂移。
- 因运行或贡献者不同而改变的未固定样式。
- 视觉灵感与生成组件不匹配。
核心原则：设计锁定 (Design Lock Principle)
“一次绑定，永久复用。”
StyleGuardAI 通过明确的绑定（视觉语言 + 版本 + 结构 + 目标）来强制执行设计锁定：
- 视觉语言选择： 仅在生成前允许选择一次。
- 强制复用： 绑定创建后，所有 UI 生成必须复用此绑定。
- 确定性生成： 我们的
/api/emit接口不进行选择或推断，只执行确定性代码生成。 - 明确更新： 设计变更需要显式更新绑定。
集成方式：
将 StyleGuardAI 规则添加到您的 AI 代理配置或编辑器中，即可实现确定性输出。
- 步骤1： 通过
POST /api/bind创建或复用.styleguardai.json共享锁定文件。 - 步骤2： 通过
POST /api/emit?enforce=1(或/api/render) 生成 UI。 - 重要提示： 请勿向
/api/emit传递简报或提示，只传递明确的 ID 或bindingRef。
🌐 API 概览：专为代理设计
核心端点：
/api/agent-snippet：获取标准代理指令。/api/bind：执行锁定文件优先的绑定操作。/api/emit?enforce=1：推荐的生成并强制执行接口。/api/render：emit + enforce的别名。/api/usage：查看标准工作流程和 schema 详情。/api/visual-languages：列出并筛选视觉语言。/api/visual-languages/{id}：获取视觉语言契约和 Markdown。/api/structures：列出结构槽位。/api/enforce：验证生成的产物。
高级端点：
POST /api/visual-languages/select：通过关键词匹配从自然语言简报中选择视觉语言。POST /api/visual-languages/compose：通过明确的源映射组合视觉语言中的代币组。GET /api/visual-languages/{id}/code：为特定技术栈获取确定性组件模板（如按钮、卡片、表单）。GET /api/visual-languages/{id}/preview：获取自包含的 HTML 预览沙盒。GET /api/visual-languages/{id}/versions,/diff：列出版本和哈希，计算发布版本之间的 JSON Patch 差异。
产品评分
暂无评分
登录后即可评分
