Claw Design

AI 设计引擎。一句话输入，演示文稿 / 图表 / 架构图 / 海报输出。

Claude Design 的免费开源替代——基于泄露的系统提示词逆向工程，独立重建。

AI design engine. One sentence in, presentation / chart / architecture diagram / poster out.

Free, open-source alternative to Claude Design — reverse-engineered from leaked system prompts, independently rebuilt.

功能特性

• 零图像生成依赖 — 在任何文本 LLM 上运行。不需要 DALL-E、Midjourney 或 GPU。
• 12 种制品类型 — 演示文稿、图表、架构图、流程图、海报、落地页、交互原型、UI 线框、仪表盘、信息图、逻辑图、视频分镜。
• 纯 HTML/CSS/SVG 渲染 — 每个制品都是自包含的 HTML 文件，任何浏览器直接打开。
• 多格式导出 — HTML（原生）、PPTX、PDF、PNG、SVG。
• 三层质量门禁 — 结构验证（L1）、风格一致性（L2）、语义审查（L3）。
• 基于 Skill 的架构 — 每种制品类型是一个可插拔的 Skill，拥有独立的契约、渲染器和质量规则。

Features

• Zero image-generation dependency — runs on any text LLM. No DALL-E, no Midjourney, no GPU.
• 12 artifact types — slides, charts, architecture diagrams, flowcharts, posters, landing pages, interactive prototypes, UI mockups, dashboards, infographics, logic diagrams, video storyboards.
• Pure HTML/CSS/SVG rendering — every artifact is a self-contained HTML file you can open in any browser.
• Multi-format export — HTML (native), PPTX, PDF, PNG, SVG.
• 3-layer quality gates — structural validation (L1), style consistency (L2), semantic review (L3).
• Skill-based architecture — each artifact type is a pluggable Skill with its own contract, renderer, and quality rules.

30 秒快速体验

npx @self-evolving-harness/claw-design generate "帮我做一个关于AI趋势的演示文稿"

输出 ./output/index.html，浏览器直接打开即可查看。无需 LLM API Key，自动走关键词降级路径。

更多用法：

# 指定输出目录
npx @self-evolving-harness/claw-design "系统架构图" -o ./my-output

# 查看帮助
npx @self-evolving-harness/claw-design --help

30-Second Quick Start

npx @self-evolving-harness/claw-design generate "Create a presentation about AI trends"

Opens ./output/index.html in any browser. No LLM API key required — keyword fallback produces a complete artifact.

# Custom output directory
npx @self-evolving-harness/claw-design "system architecture diagram" -o ./my-output

# Help
npx @self-evolving-harness/claw-design --help

快速开始

npm install @self-evolving-harness/claw-design

import { createPipeline } from '@self-evolving-harness/claw-design';

const pipeline = await createPipeline();
const result = await pipeline.run('帮我做一个季度汇报 PPT');

if (result.bundle) {
  console.log('HTML:', result.bundle.htmlPath);
  console.log('PPTX:', result.bundle.pptxPath);
  console.log('Quality:', result.quality.conclusion); // 'pass' | 'warn' | 'block'
}

注入 LLM 分类器以实现语义意图路由（推荐）。不注入时路由器回退到关键词匹配：

import { createPipeline } from '@self-evolving-harness/claw-design';
import type { IntentClassifierProvider } from '@self-evolving-harness/claw-design';

const classifier: IntentClassifierProvider = {
  async classify(input, skills) {
    // call your LLM here
    return { skillName: 'slides', confidence: 0.95, reasoning: '...' };
  },
};

const pipeline = await createPipeline(undefined, { classifierProvider: classifier });
const result = await pipeline.run('System architecture overview for our microservices');

Quick Start

npm install @self-evolving-harness/claw-design

import { createPipeline } from '@self-evolving-harness/claw-design';

const pipeline = await createPipeline();
const result = await pipeline.run('帮我做一个季度汇报 PPT');

if (result.bundle) {
  console.log('HTML:', result.bundle.htmlPath);
  console.log('PPTX:', result.bundle.pptxPath);
  console.log('Quality:', result.quality.conclusion); // 'pass' | 'warn' | 'block'
}

Inject an LLM classifier for semantic intent routing (recommended). Without it, the router falls back to keyword matching:

import { createPipeline } from '@self-evolving-harness/claw-design';
import type { IntentClassifierProvider } from '@self-evolving-harness/claw-design';

const classifier: IntentClassifierProvider = {
  async classify(input, skills) {
    // call your LLM here
    return { skillName: 'slides', confidence: 0.95, reasoning: '...' };
  },
};

const pipeline = await createPipeline(undefined, { classifierProvider: classifier });
const result = await pipeline.run('System architecture overview for our microservices');

架构

用户输入经过四阶段流水线处理：

路由器解析请求并分类意图（LLM 或关键词回退）→ 执行器分派到匹配的 Skill 生成 HTML 制品 → 质量门禁运行三层验证（结构 → 风格 → 语义）→ 导出将制品打包为 HTML、PPTX、PDF、PNG 或 SVG，通过宿主适配器交付。

Input → IntentRouter → SkillExecutor → QualityGate (L1→L2→L3) → ExportAdapter → DeliveryBundle

Architecture

User input flows through a four-stage pipeline:

Router parses the request and classifies intent (LLM-based or keyword fallback) → Executor dispatches to the matched Skill, which generates an HTML artifact → Quality Gate runs three validation layers (structural → style → semantic) → Export packages the artifact into HTML, PPTX, PDF, PNG, or SVG and delivers it through the host adapter.

Input → IntentRouter → SkillExecutor → QualityGate (L1→L2→L3) → ExportAdapter → DeliveryBundle

制品类型

| 类型 | 说明 | |------|------| | slides | 演示文稿 | | chart | 数据可视化（柱状图、折线图、饼图等） | | arch-diagram | 软件架构图 | | flowchart | 流程图和决策流 | | poster | 活动海报和宣传图 | | landing-page | 单页营销站点 | | prototype | 带路由和状态的交互原型 | | ui-mockup | 静态 UI 线框和模型 | | dashboard | 多面板数据仪表盘 | | infographic | 信息图和可视化摘要 | | logic-diagram | 逻辑关系图 | | video | 视频分镜和剪辑方案 |

Artifact Types

| Type | Description | |------|-------------| | slides | Presentation decks | | chart | Data visualizations (bar, line, pie, etc.) | | arch-diagram | Software architecture diagrams | | flowchart | Process and decision flows | | poster | Event posters and promotional graphics | | landing-page | Single-page marketing sites | | prototype | Interactive UI prototypes with routing and state | | ui-mockup | Static UI mockups and wireframes | | dashboard | Data dashboards with multiple panels | | infographic | Information graphics and visual summaries | | logic-diagram | Logic and relationship diagrams | | video | Video storyboards and editing plans |

导出格式

| 格式 | 方式 | 说明 | |------|------|------| | HTML | 原生 | 自包含，任何浏览器打开 | | PPTX | pptxgenjs | 可在 PowerPoint / Google Slides 中编辑 | | PDF | 无头浏览器 | 印刷级输出 | | PNG | 无头浏览器 | 逐页光栅化 | | SVG | DOM 序列化 | 图表矢量输出 |

Export Formats

| Format | Method | Notes | |--------|--------|-------| | HTML | Native | Self-contained, opens in any browser | | PPTX | pptxgenjs | Editable in PowerPoint / Google Slides | | PDF | Headless browser | Print-ready | | PNG | Headless browser | Per-page rasterization | | SVG | DOM serialization | Vector output for diagrams |

开发

git clone https://github.com/yuchangxu1989-Openclaw/self-evolving-harness.git
cd claw-design
npm install
npm test          # vitest
npm run build     # tsc → dist/

Development

git clone https://github.com/yuchangxu1989-Openclaw/self-evolving-harness.git
cd claw-design
npm install
npm test          # vitest
npm run build     # tsc → dist/

项目结构

src/
├── routing/       # 意图分类和多意图路由
├── execution/     # Skill 执行器和内置 Skill 装配
├── skills/        # Skill 实现（每种制品类型一个）
│   └── shared/    # 布局引擎、配色系统、字体排版、图标
├── quality/       # L1/L2/L3 质量门禁
├── export/        # HTML → PPTX/PDF/PNG/SVG 转换
├── packaging/     # 资源打包、元数据注入、交付
├── adapter/       # 宿主适配器（OpenClaw、CLI、独立运行）
├── template/      # 主题引擎和品牌套件提取
├── templates/     # 内置模板注册表
├── output/        # 输出格式化器（HTML、SVG）
├── types.ts       # 核心领域类型
└── index.ts       # 公开 API 表面

Project Structure

src/
├── routing/       # Intent classification and multi-intent routing
├── execution/     # Skill executor and built-in skill wiring
├── skills/        # Skill implementations (one per artifact type)
│   └── shared/    # Layout engine, color system, typography, icons
├── quality/       # L1/L2/L3 quality gates
├── export/        # HTML → PPTX/PDF/PNG/SVG conversion
├── packaging/     # Asset bundling, metadata injection, delivery
├── adapter/       # Host adapters (OpenClaw, CLI, standalone)
├── template/      # Theme engine and brand kit extraction
├── templates/     # Built-in template registry
├── output/        # Output formatters (HTML, SVG)
├── types.ts       # Core domain types
└── index.ts       # Public API surface

License

MIT