内容
# 看书
> **为任何大型语言模型（LLM）提供设计品味** — 将任何模型（即使是本地运行的小模型）转变为资深前端工程师。
[](LICENSE)
<div align="center">
<a href="https://github.com/alexalexalex222/lookbook/raw/main/docs/assets/lookbook-demo.mp4">
<img src="docs/assets/lookbook-demo.gif" alt="使用 Lookbook 由 Qwen 3.6 27B（稠密）一键生成的具有联动筛选功能的分析控制台" width="860">
</a>
<sub><b>由 Qwen 3.6 27B (稠密) 一键生成</b> — 一个可以在您自己的机器上运行的模型 — 使用 Lookbook。无需前沿 API，无需设计系统，直接输入一个提示。 ▶ <a href="https://github.com/alexalexalex222/lookbook/raw/main/docs/assets/lookbook-demo.mp4">观看完整视频</a></sub>
</div>
---
该控制台 — 跨 donut 图、brushable 时间线、延迟直方图、区域条形图、实时事件日志和活动热图实现联动筛选，使用诚实的合成数据和零虚拟指标 — **不是** 由前沿模型构建。而是由一个 27B 稠密模型构建，该模型可以在单台机器上运行。区别在于 Lookbook。
Lookbook 是一个开源的 **MCP 服务器和数据包编译器**，用于前端生成。它接受产品简介，将其路由到一个精选的、经过浏览器验证的设计库，并返回一个紧凑的构建数据包：布局方向、源代码支持的模式代码片段，由最匹配的引用组成、硬实现约束和强制的防复制契约。模型不会获得主题或模板 — 它获得的是结构化的设计判断力，这是它所欠缺的。
## 为什么存在
通用模型将前端工作平面化为相同的几个动作：柔和的渐变、超大尺寸的英雄、相等的卡片网格、虚拟的“10,000+ 用户”社会证明、薄弱的表单和未经检查的移动布局。模型可以编写代码；它只是从薄弱的设计上下文开始。Lookbook 修复了*起始上下文*，因此第一次传递看起来就像产品工作室已经交付了一样 — 而且它适用于**任何**模型，而不仅仅是一个专有端点。
## 交付内容
- **MCP 标准输入/输出服务器**，适用于 OpenCode、Codex、Claude、Hermes、Grok、LM Studio 和任何与 MCP 兼容的运行时环境。
- **CLI 数据包编译器**，适用于离线或脚本化使用。
- **数据驱动的路由引擎**，根据锚点包和支持库对简介进行评分，并从匹配的模式中合成捐赠代码片段。
- **数据包渲染器**，具有从 `micro` 到完整源代码摘录的令牌模式，因此同一个库为 16k 上下文的本地模型和 1M 上下文的代理服务。
- **精选的、经过浏览器验证的设计库**（`goldensets/`）— 目标页面锚点和 72 个非目标页面交互模式。
- **验证、源代码卫生、防复制、路由替代和密度工具**。
## 防复制强制执行
引用库是危险的：容易出错的模式是一个模型复制捐赠网站 — 包括其名称、电话号码、推荐语和奖项。Lookbook 将每个捐赠者视为**模式源，而不是克隆的页面**，并在代码中强制执行，而不是在免责声明中：
- **捐赠者身份是违禁品。** 商业名称、电话号码、电子邮件、域名、评论、奖项和统计数据被归类为不安全的目标页面材料。清理器（`sanitizer.py` / `scan_source_hygiene`）在每个源代码摘录进入数据包之前扫描其是否存在身份 / 证明 / 栅格泄漏。
- **每个数据包都带有防复制契约**，指示模型编写新鲜的目标特定复制、使用中性标记的占位符替换缺失的证明，并使用捐赠者仅用于语气、层次和密度来组成自己的布局。
- **没有虚假的信任。** 生成的页面会标记占位符（`[STAT_VALUE]`，`[TESTIMONIAL_QUOTE]`），而不是虚拟的数字和客户。
- **栅格和外部资产 URL 被阻止**，除非您为目标构建提供资产。
- **路径遍历隔离**（`schemas.py`）：清单不能引用绝对路径或使用 `..` 逃离其包目录，因此中毒的包不能读取任意文件。这是一个经过验证的模式不变性，经过回归测试。
该库是一个 swatchbook，而不是一个剪贴板。
## 验证严格性
没有任何东西是凭直觉进入库或数据包的。
- **每个模式都经过浏览器验证。** 72 个交互模式在桌面和移动宽度上由真实的无头浏览器（Playwright）渲染，并通过 **零控制台错误和零水平溢出** 进行验证，然后才被纳入库中。
- **`validate_design_router`** 按需检查整个库：每个清单都加载到 Pydantic 模式中，每个源代码路径和捐赠目录都解析（无静默间隙），没有路径是绝对的，支持库具有 UX 角色覆盖，源代码卫生扫描是干净的。
- **路由是确定性的。** 包和示例选择使用明确的次要排序键 — 相同的简介始终产生相同的数据包，因此行为是可测试和可复制的。
- **令牌预算是强制执行的，而不是记录的。** 渲染器在 `token_mode` 天花板下保存每个数据包，因此小型本地模型永远不会获得它无法适应的数据包。
- **公共测试套件** 断言路由选择、数据包渲染、预算限制和防复制隔离保护 — 在下面运行它。
- **捐赠者饥饿审计** 提供了关于哪些引用被选择、拒绝或无法满足任何请求的准确信息，因此路由是可检查的，而不是一个黑盒。
## 模型目标
Lookbook 不依赖于一个专有模型。它是一个前端上下文层，适用于任何可以遵循构建数据包并编写代码的模型：
- 前沿编码代理（GPT-5.x，Codex 风格的存储库代理）；
- 强大的开放/本地模型 — 上面的演示是 **Qwen 3.6 27B（稠密）**；
- 通过 `token_mode: "micro"` / `"compact"` 支持小上下文模型；
- 通过 `code_profile: "code_first"` 和更大的源代码摘录支持更强大的代理。
## 安装
```bash
git clone https://github.com/alexalexalex222/lookbook.git
cd lookbook
python -m venv .venv
. .venv/bin/activate
pip install -e ".[dev,mcp]"
PYTHONPATH=src python -m design_router_mcp.cli --repo-root . validate
```
## CLI 用法
导出数据包：
```bash
PYTHONPATH=src python -m design_router_mcp.cli --repo-root . export \
--surface app.tool \
--task "一个具有联动图表和数据表的实时分析控制台" \
--output-dir /tmp/lookbook-packet \
--token-mode expanded \
--stack html_css \
--code-profile code_first
```
导出操作会写入 `PACKET.md` 和 `SOURCES.json`。将 `PACKET.md` 交给将构建页面的编码代理。
有用命令：
```bash
PYTHONPATH=src python -m design_router_mcp.cli --repo-root . list --examples # 浏览库
PYTHONPATH=src python -m design_router_mcp.cli --repo-root . validate # 验证所有内容是否解析
PYTHONPATH=src python -m design_router_mcp.cli --repo-root . hygiene --pack-id frontier_pattern_bank_20260628_v1
```
## MCP 用法
将您的 MCP 客户端指向标准输入/输出入口点（适用于 OpenCode、Codex、Claude、Hermes、Grok、LM Studio）：
```json
{
"mcpServers": {
"lookbook": {
"command": "/absolute/path/to/.venv/bin/design-router-gpt-5.5-mcp",
"args": ["--repo-root", "/absolute/path/to/lookbook"]
}
}
}
```
主要工具：`resolve_design_context`。其他可用工具：`inspect_design_library`，`get_source_excerpt`，`export_opencode_bundle`，`route_alternatives`，`donor_starvation_audit`，`code_density_metrics`，`audit_source_hygiene`，`validate_design_router`。
推荐的请求格式：
```json
{
"surface": "app.tool",
"task": "构建一个具有联动图表和数据表的实时分析控制台",
"stack": "html_css",
"token_mode": "expanded",
"code_profile": "code_first",
"packet_intent": "implementation_blueprint"
}
```
## 库内容
公共库目前包含 23 个路由包：
- **锚点包**，适用于 SaaS 仪表盘、格斗运动、水务服务、直播商务、开发者文档、奢侈品/编辑页面、产品/规格页面、交互式乐器、金融终端、园艺护理、法律/商业页面、橱柜、地板等本地服务表面；
- **前沿模式库**（`frontier_pattern_bank_20260628_v1`）：**72** 个经过浏览器验证的非目标页面 UI 模式 — 仪表盘、数据可视化、编辑器、应用壳、游戏和实时 3D/画布场景 — 因此 Lookbook 可以路由所有设计工作，而不仅仅是营销页面；
- **支持库**，适用于 GA SMB 页面结构和本地主机完整站点模式库；
- **共享原子**，适用于导航、英雄、卡片、表单、选项卡、FAQ、定价、统计数据、画廊、页脚和交互状态。
## 验证
```bash
PYTHONPATH=src python -m pytest tests -q # 路由 + 渲染 + 防复制保护
PYTHONPATH=src python -m design_router_mcp.cli --repo-root . validate # 验证整个库
```
## 项目布局
```text
src/design_router_mcp/ 规范的 Python 包
goldensets/ 公共路由设计库
tests/ 公共烟雾 + 硬化测试
docs/ 资产、评估笔记
server.json MCP/服务器清单
```
## 许可证
MIT。参见 `LICENSE`。
