thesys-generative-ui

Name: thesys-generative-ui
Author: secondsky

github.com/secondsky设计与 UI240377 次安装5 周前更新

代码仓库

关于 thesys-generative-ui

使用 Thesys 根据自然语言描述生成 React UI 组件的技能，通过 Schema 支持类型化组件生成，并附带集成、主题和工具调用资料。

主要功能

01自然语言描述 UI
02基于 Schema 生成组件
03类型安全的 React 组件
04主题定制指南
05工具调用模式
06集成模板与参考资料

适用场景

01根据描述生成个人资料卡
02创建联系表单
03使用模板构建聊天界面
04为 UI 流程配置工具调用

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/secondsky/claude-skills --skill thesys-generative-ui

安装后在 Claude Code 中输入/thesys-generative-ui确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/

ai-provider-setup.md

common-errors.md

component-api.md

error-catalog.md

integration-guide.md

tool-calling.md

use-cases-examples.md

what-is-thesys.md

scripts/

check-versions.sh

install-dependencies.sh

templates/

basic-usage.tsx

templates/cloudflare-workers/

frontend-setup.tsx

worker-backend.ts

wrangler.jsonc

templates/nextjs/

api-chat-route.ts

app-page.tsx

package.json

tool-calling-route.ts

templates/python-backend/

fastapi-chat.py

flask-chat.py

README.md

requirements.txt

templates/shared/

streaming-utils.ts

theme-config.ts

tool-schemas.ts

templates/vite-react/

basic-chat.tsx

custom-component.tsx

package.json

theme-dark-mode.tsx

tool-calling.tsx

详细介绍

Thesys 生成式 UI

最后更新：2025-11-10

快速开始

import { generateUI } from 'thesys';

const ui = await generateUI({
  prompt: 'Create a user profile card with avatar, name, and email',
  schema: {
    type: 'component',
    props: ['name', 'email', 'avatar']
  }
});

export default function Profile() {
  return <div>{ui}</div>;
}

核心功能

自然语言：使用通俗易懂的英语描述 UI
模式驱动：生成类型安全的组件
React 组件：生成可用于生产环境的组件
AI 驱动：使用大模型进行智能设计

示例

const form = await generateUI({
  prompt: 'Create a contact form with name, email, and message fields',
  theme: 'modern'
});

资源

核心文档

references/what-is-thesys.md - TheSys C1 是什么、成功指标和入门指南
references/use-cases-examples.md - 适用场景、可避免的 12 种错误和全部模板目录
references/tool-calling.md - 完整的工具调用指南，包含 Zod 模式
references/integration-guide.md - Vite、Next.js 和 Cloudflare Workers 的完整设置指南

补充参考

references/component-api.md - 完整的组件属性参考
references/ai-provider-setup.md - OpenAI、Anthropic 和 Cloudflare Workers AI 的设置指南
references/tool-calling-guide.md - 工具调用模式
references/theme-customization.md - 主题系统深入介绍
references/common-errors.md - 扩展错误目录

模板（15+ 个文件）

Vite + React：basic-chat.tsx、custom-component.tsx、tool-calling.tsx、theme-dark-mode.tsx
Next.js：app/page.tsx、app/api/chat/route.ts、tool-calling-route.ts
Cloudflare Workers：worker-backend.ts、frontend-setup.tsx
实用工具：theme-config.ts、tool-schemas.ts、streaming-utils.ts

官方文档：https://docs.thesys.dev | Playground：https://console.thesys.dev/playground

支持 Markdown

登录后评论