内容
# LLM 设计引擎
**在编码前进行设计。**
LLM 设计引擎将产品意义转化为原始的、代理可执行的 UI 方向。
适用于编码代理的创意总监和设计编译器。它将简报转化为领域解释、视觉隐喻、原始构图、结构化设计文档、确定性预览和代理可以执行的实现指令。
> 停止要求编码代理进行设计。给他们一个可以执行的設計。
## 为什么存在
编码代理可以编写前端代码，但未经检查的提示会收敛于分割的英雄、紫色渐变、玻璃面板、圆角卡片农场、通用仪表盘和与产品无关的视觉效果。LLM 设计引擎在实施开始前使决策可见：
```text
产品简报 → 领域解释 → 创意隐喻 → 视觉叙事
→ 原始构图 → 结构化设计规范 → 确定性预览
→ 代理实现指令
```
它不选择主题、模板、预设、组件库或克隆样式。每个方向必须解释其隐喻、材料语言、领域对象、构图、排版、交互概念和拒绝列表。
## 60 秒开始
**要求：** Node.js 22+ 和 pnpm 10.x。
```bash
git clone https://github.com/llmpolska/llm-design-engine.git
cd llm-design-engine
pnpm run setup
pnpm mcp
```
`pnpm run setup` 验证运行时，运行 `pnpm install --frozen-lockfile`，并构建工作区。然后在编码代理中配置 MCP 服务器，并在编写前端代码之前运行设计工作流。
## 选择您的路径
| 您想要… | 使用 | 从这里开始 | 结果 |
| --------------------------------------- | ------- | -------------------------------- | ------------------------------------------------------------ |
| 让编码代理调用编译器 | **MCP** | 配置本地 STDIO 服务器 | 用于 Claude Code、Codex、OpenCode 和 Oh My Pi 的工具、资源和提示 |
| 在存储库中创建设计工件 | **CLI** | `pnpm lde -- init` | 便携式 `.design/` Markdown 和 JSON 工件 |
本地 Studio GUI 和营销网站仍存在于 monorepo 中，供内部审查，但它们不属于公共代理路径。优先使用 MCP 或 CLI。
## 目前有效的内容
| 模式 | 凭证 | 它执行的操作 |
| ---------------------------- | --------------------------------------- | ---------------------------------------------------------------------------------------- |
| **确定性本地/模拟** | 无 | 可复制的方向、SVG 资产、预览、lint 报告、品牌套件和导出。 |
| **提供者支持** | 配置的端点、模型和 API 密钥 | 使用 OpenAI 兼容的推理和可选的图像生成适配器。 |
本地路径无需 AI 密钥即可完全使用。当您配置提供者时，工件合同保持不变；只有推理或资产生成源发生变化。
## MCP：主要代理接口
本地 MCP 服务器通过 STDIO 公开设计工作流。启动它：
```bash
pnpm mcp
```
可选的项目绑定：
```bash
LDE_PROJECT_DIR=/absolute/path/to/your-app pnpm mcp
```
`LDE_PROJECT_DIR` 设置服务器工作目录，用于默认工具 cwd 和资源列表。工具仍可以传递显式 `projectDir`。每个目标应用优先使用一个 MCP 服务器进程。
为您的代理复制配置：
- [Claude Code](docs/mcp/claude-code.json)
- [Codex](docs/mcp/codex.json)
- [OpenCode](docs/mcp/opencode.json)
- [Oh My Pi](docs/mcp/oh-my-pi.json)
完整的工具/资源/提示参考：[`docs/mcp/README.md`](docs/mcp/README.md)
### 工具
| 工具 | 目的 |
| --- | --- |
| `lde_init` | 创建 `.design/` |
| `lde_brief` | 编写产品简报 |
| `lde_directions` | 编译四个创意方向 |
| `lde_select` | 按 id、名称或基于 1 的索引选择方向 |
| `lde_generate` | 编译设计规范 |
| `lde_preview` | 确定性 HTML/SVG 预览 |
| `lde_refine` | 语义细化 |
| `lde_approve` | 锁定设计 |
| `lde_brandkit` | 品牌系统 + 占位符 |
| `lde_lint` | 防滑报告 |
| `lde_export` | 代理交接包 |
| `lde_status` | 阶段、工件、后续步骤 |
| `lde_read_artifact` | 读取一个 `.design` 文件 |
### 资源和提示
- 资源：`lde://artifact/{path}` 镜像服务器工作目录 `.design` 树（通过进程 cwd / `LDE_PROJECT_DIR` 设置）
- 对于另一个项目路径，传递 `projectDir` 给工具或使用 `lde_read_artifact`
- 提示：`design_workflow`、`design_brief`、`refine_design`
推荐序列：
```text
lde_init → lde_brief → lde_directions → 可选 lde_select → lde_generate
→ lde_preview → 可选 lde_refine → lde_approve → lde_brandkit → lde_lint
→ lde_export → 读取 EXPORT.md → 实现 UI
```
## CLI：在您的项目中创建 `.design/`
从克隆的存储库根目录运行这些命令，或在发布 CLI 包后将 `pnpm lde` 替换为等效的已安装 `lde` 可执行文件。
```bash
pnpm lde -- init
pnpm lde -- brief \
--name "GastroOps" \
--summary "餐厅团队的运营" \
--domain "餐厅运营" \
--tension "在服务压力下保持控制，而不隐藏下一个交接。"
pnpm lde -- directions
pnpm lde -- select --direction 1
pnpm lde -- generate
pnpm lde -- approve
pnpm lde -- brandkit
pnpm lde -- preview
pnpm lde -- lint
pnpm lde -- export
```
输出是一个便携式设计包：
```text
.design/
├── BRIEF.md
├── DIRECTIONS.md
├── BRAND.md
├── pages/landing.design.md
├── brandkit.json
├── design.json
├── lint.json
├── assets/
├── previews/
├── EXPORT.md
└── manifest.json
```
`EXPORT.md` 是编码代理的紧凑交接。它携带了批准的视觉叙事、构图、响应行为、资产要求、运动方向和拒绝列表。
## GastroOps：前后对比
**之前：** “构建一个现代化的餐厅运营仪表盘。” 产品意义、材料语言、层次结构和交互行为是隐含的。
**之后：** GastroOps 从服务压力和下一个交接开始。 其批准的方向是 **专业厨房控制室**：黑色钢制工作台、印刷厨房票、站点标记、温暖的通道照明、刮痕的不锈钢表面、低命令栏和通道表面作为焦点。
该示例还包括真正不同的替代方案：**现场账本** （折叠的工作页面）、**信号地图** （通过操作噪声的路线）和 **材料存档** 。 在 [`examples/gastroops/`](examples/gastroops/) 中探索完整的案例研究。
## 设计格式
`pages/*.design.md` 是人们使用的 Markdown，具有 YAML 前置元数据和 JSON 安全有效载荷用于工具。 设计 AST 描述了场景节点、部分、响应规则、排版、颜色角色、运动、资产和禁止模式。 有关完整合同，请参见 [`docs/design-format.md`](docs/design-format.md)。
```markdown
---
id: gastroops-landing
route: /
concept: professional-kitchen-control-room
status: approved
---
# 叙事
钢制工作台和票务轨道使下一个交接可见。
# 构图
## 英雄
- 高度：76svh
- 焦点：通道表面
- 标题对齐：左下
```
## 架构
| 包 | 责任 |
| ------------------- | ----------------------------------------------------------------------------------------- |
| `core` | 项目简介、解释、方向、设计 AST、品牌套件、资产和 lint 合同 |
| `design-format` | Zod 验证加上 Markdown 前置元数据/解析器/序列化器 |
| `creative-director` | 模拟和 OpenAI 兼容的推理提供者 |
| `renderer` | 确定性 HTML/CSS/SVG 预览输出 |
| `brandkit` | 结构化身份系统、令牌、新闻标志、图像提示 |
| `image-provider` | 禁用/模拟和 OpenAI 兼容的图像适配器 |
| `anti-slop` | 确定性通用模式警告和评分 |
| `repo-scanner` | 未来视觉实现验证的扩展点 |
| `cli` | `lde` 命令和本地 Hono API |
| `mcp` | STDIO MCP 工具、资源和提示 |
阅读 [`docs/architecture.md`](docs/architecture.md) 和 [`docs/creative-pipeline.md`](docs/creative-pipeline.md) 以获取完整的流程。
## 提供者和资产
- **模拟推理提供者** — 确定性和测试友好。
- **OpenAI 兼容推理提供者** — 通过 `LDE_REASONING_ENDPOINT`、`LDE_REASONING_MODEL` 和 `LDE_REASONING_API_KEY` 进行配置。
- **禁用图像提供者** — 具有出处元数据的故意 SVG 占位符。
- **模拟图像提供者** — 用于本地开发的确定性 SVG 资产。
- **OpenAI 兼容图像提供者** — 可选的生成/细化适配器。
提供者缝隙在 [`docs/providers.md`](docs/providers.md) 中记录。图像资产源自批准的方向和记录角色、提示、负约束、长宽比、放置、提供者、模型和时间戳。
## 防滑报告
`lde lint` 返回一个分数，分数越低越好：
```text
AI 防滑分数：31/100
警告：
- 英雄构图与项目隐喻无关。
- 检测到六个视觉相同的卡片。
- 强调色梯度未被视觉语言解释。
```
规则涵盖通用分割英雄、圆形/药丸重复、浮动卡片、非相关渐变、玻璃形态、功能网格、抽象斑块、模拟、通用决策、缺少领域元素、库存图像、居中文本和对比度。参见 [`docs/anti-slop.md`](docs/anti-slop.md)。
## 支持的集成
Markdown 导出和 MCP 服务器设计用于 Codex、Claude Code、OpenCode、Oh My Pi 等编码代理。参见 [`docs/integrations.md`](docs/integrations.md)、[`docs/mcp/README.md`](docs/mcp/README.md) 和 [`AGENTS.md`](AGENTS.md)。
## 项目哲学
- 意义先于表面。
- 隐喻通过改变构图而获得其位置。
- 领域材料优于装饰性抛光。
- 约束是设计的一部分，而不是事后补充。
- 确定性使创意审查可测试。
- 提供者选择不得改变工件合同。
- 开源应暴露推理缝隙。
- 代理应接收设计，而不是在实现过程中发明它。
## 路线图
参见 [`ROADMAP.md`](ROADMAP.md)。自主图像到代码和完整的视觉实现验证器被故意推迟；包含干净的扩展点。
## 贡献
阅读 [`CONTRIBUTING.md`](CONTRIBUTING.md)，遵循 [`AGENTS.md`](AGENTS.md)，并保持变更集聚焦。每个行为变更都需要一个聚焦的测试和一个无密钥路径。
## 许可证和归属
MIT 许可。由 [LLMPolska](https://github.com/llmpolska) 构建和维护。
存储库主题：`ai`、`design`、`frontend`、`coding-agents`、`mcp`、`typescript`、`design-system`、`generative-ai`、`developer-tools`。
