mcpField
T
text-code

text-code

github.com/meitu开发36106 次安装9 周前更新
代码仓库

关于 text-code

根据描述生成 React/TSX 页面代码的技能,可选图片或视频作为参考。适用于新页面和组件,不用于修改现有代码或生成后端代码。

主要功能

  1. 01从零生成 React/TSX 页面
  2. 02支持图片和视频参考
  3. 03可按提示词名称扩写简短描述
  4. 04自动选择或指定生成模型
  5. 05保存为 TSX 或 JSX 源码

适用场景

  1. 01根据需求创建落地页
  2. 02搭建活动或营销页面
  3. 03生成数据可视化页面
  4. 04快速构建 React 组件原型

安装

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

$npx skills add https://github.com/meitu/meitu-skills --skill text-code

安装后在 Claude Code 中输入/text-code确认已加载。

详细介绍

来自项目 README

Text Code(代码生成)

Overview

从零生成 React/TSX 页面代码,支持素材参考(图片/视频)与 prompt 扩写。适用于落地页、活动页、数据可视化页面、界面原型、React 组件快速搭建。不处理:修改已有源码、非 React/HTML 框架、后端代码(Python/Java 等)、像素级还原设计稿、复杂后端对接。

API Mapping

场景后端 API
React/TSX 页面代码生成text_code

model 映射:

  • auto(默认)/ 不传 → 按路由规则决策
  • pretzel_pro / pretzel_lite → 直接指定模型
  • 模型回退链:pretzel_pro → pretzel_lite

Dependencies

  • meitu-cli: >=2.0.6
  • 凭证:CONFIG AKSK → meitu tools update;EXEC AKSK → 跑命令(见根 CONFIG.md)
  • 环境变量:MEITU_OPENAPI_TOOL_TASK_MODE=command

Core Workflow

Preflight → Execute → Deliver
Preflight
  1. meitu --version ≥ 2.0.6,未装则 npm install -g meitu-cli@latest
  2. meitu auth verify --json → 凭证无效走 CONFIG.md SOP
  3. 确认本地 ~/.meitu/tool-registry.json 已包含 text-code,否则 meitu tools update
  4. 解析 output_dir:openclaw.yaml → ./output/;else → ~/.openclaw/workspace/visual/output/text-code/;mkdir -p {output_dir}
Execute

触发信号 / 路由规则

场景判定关键词路由
从零生成 React 页面做个页面、生成网页、落地页、活动页、数据可视化、生成组件text_code
简短 prompt + 有 prompt_nameprompt < 10 字符自动扩写后调用
提供 source_code_url + 修改意图改代码、加按钮、调样式不属于本工具(走 text-code-edit)
要求生成非 React/HTML 代码后端、Python、Java告知仅支持 React/TSX

参数定义

参数类型必填范围默认值说明
promptSTRING是----页面描述,尽量详细。缺失 → 追问
modelENUM否auto / pretzel_pro / pretzel_litepretzel_pro模型选择,非法值回退 pretzel_pro
image_listARRAY否--[]参考图片 URL 列表,无效项静默过滤
video_listARRAY否--[]参考视频 URL 列表,无效项静默过滤
prompt_nameSTRING否----系统提示词名称

工具调用

基础生成:

meitu text-code --prompt "{page_description}" --json --download-dir {output_dir}  --skill_name skill_text-code

指定模型 + 参考素材:

meitu text-code \
  --skill_name skill_text-code \
  --prompt "{page_description}" \
  --model pretzel_pro \
  --image_list "{url1}" --image_list "{url2}" \
  --json --download-dir {output_dir}

简短 prompt + prompt_name(自动扩写):

meitu text-code --prompt "做个页面" --prompt_name "{template_name}" --json --download-dir {output_dir} --skill_name skill_text-code

错误降级

场景处理方式
prompt 缺失提示"请描述你想生成的网页"
prompt < 10 字符 + 有 prompt_name自动扩写
prompt < 10 字符 + 无 prompt_name原样传入
model 非法值回退至 pretzel_pro
image_list 全部无效但用户有参考意图提示"请提供有效的图片链接"
请求非 React/HTML 代码告知仅支持 React/TSX
超时沿 pretzel_pro → pretzel_lite 重试,链尽返回错误
代码不完整原模型重试 1 次 → 返回错误
内容合规拦截直接返回合规提示,不重试
Deliver

解析 --json:

  • ok: true → downloaded_files[0].saved_path 为本地 .tsx 源码;或 media_urls[0] 为 code_url
  • ok: false → 输出 code + hint

落盘:mv {file} {output_dir}/{YYYY-MM-DD}_{descriptive-name}.tsx,记录 code_url 以便后续 text-code-edit 自动引用。

Output

  • 格式: .tsx / .jsx 源码文件
  • 命名: {YYYY-MM-DD}_{descriptive-name}.tsx
  • 位置: 由 Deliver 步骤决定(项目 → ./output/,一次性 → ~/.openclaw/workspace/visual/output/text-code/)

基线 Task ID

见根目录 references/task-id-baseline.md 中 text-code 条目。

评论

支持 Markdown