---
id: gh-codegen
name: "codegen"
url: https://skills.yangsir.net/skill/gh-codegen
author: vercel-labs
domain: ai-code-generation-quality
tags: ["code-generation", "ui-spec", "frontend", "automation", "json-render"]
install_count: 8900
rating: 4.50 (120 reviews)
github: https://github.com/vercel-labs/json-render/tree/main/skills/codegen
---

# codegen

> 从 UI 规范自动生成代码的实用工具集。通过树遍历、属性序列化和自定义导出器，快速将设计转化为标准组件代码，减少手动编写错误，提升前端开发效率。

**Stats**: 8,900 installs · 4.5/5 (120 reviews)

## Before / After 对比

### 页面编码时间

**Before**:

开发者需要手动解析UI规范，逐一编写组件代码，处理嵌套结构、属性绑定和状态路径，过程繁琐易出错，单页面编码平均耗时60分钟。

**After**:

此技能自动遍历UI树，生成标准化的组件代码和属性绑定，开发者只需微调即可，单页面编码时间降至10分钟。

| Metric | Before | After | Change |
|---|---|---|---|
| 单页面编码耗时 | 60分钟 | 10分钟 | -83% |

## Readme

# @json-render/codegen

Framework-agnostic utilities for generating code from json-render UI trees. Use these to build custom code exporters for Next.js, Remix, or other frameworks.

## Installation

```bash
npm install @json-render/codegen
```

## Tree Traversal

```typescript
import {
  traverseSpec,
  collectUsedComponents,
  collectStatePaths,
  collectActions,
} from "@json-render/codegen";

// Walk the spec depth-first
traverseSpec(spec, (element, key, depth, parent) => {
  console.log(`${" ".repeat(depth * 2)}${key}: ${element.type}`);
});

// Get all component types used
const components = collectUsedComponents(spec);
// Set { "Card", "Metric", "Button" }

// Get all state paths referenced
const statePaths = collectStatePaths(spec);
// Set { "analytics/revenue", "user/name" }

// Get all action names
const actions = collectActions(spec);
// Set { "submit_form", "refresh_data" }
```

## Serialization

```typescript
import {
  serializePropValue,
  serializeProps,
  escapeString,
  type SerializeOptions,
} from "@json-render/codegen";

// Serialize a single value
serializePropValue("hello");
// { value: '"hello"', needsBraces: false }

serializePropValue({ $state: "/user/name" });
// { value: '{ $state: "/user/name" }', needsBraces: true }

// Serialize props for JSX
serializeProps({ title: "Dashboard", columns: 3, disabled: true });
// 'title="Dashboard" columns={3} disabled'

// Escape strings for code
escapeString('hello "world"');
// 'hello \"world\"'
```

### SerializeOptions

```typescript
interface SerializeOptions {
  quotes?: "single" | "double";
  indent?: number;
}
```

## Types

```typescript
import type { GeneratedFile, CodeGenerator } from "@json-render/codegen";

const myGenerator: CodeGenerator = {
  generate(spec) {
    return [
      { path: "package.json", content: "..." },
      { path: "app/page.tsx", content: "..." },
    ];
  },
};
```

## Building a Custom Generator

```typescript
import {
  collectUsedComponents,
  collectStatePaths,
  traverseSpec,
  serializeProps,
  type GeneratedFile,
} from "@json-render/codegen";
import type { Spec } from "@json-render/core";

export function generateNextJSProject(spec: Spec): GeneratedFile[] {
  const files: GeneratedFile[] = [];
  const components = collectUsedComponents(spec);
  // Generate package.json, component files, main page...
  return files;
}
```


---
*Source: https://skills.yangsir.net/skill/gh-codegen*
*Markdown mirror: https://skills.yangsir.net/api/skill/gh-codegen/markdown*