360 Secure SkillHub
360 安全技能中心

Convert Any Screenshot

核心功能为精准格式转换,支持将UI截图转为React/HTML/CSS实现提示,及JSON/CSV/code等多格式互转,处理格式映射与边缘情况,保障数据无丢失。典型场景包括UI界面快速代码化、多格式数据适配。输入可为截图或各类结构化数据,输出为目标格式内容及字段映射摘要,提供格式化和严格两种模式,转换前后均做格式校验,确保输出有效。

wangjipeng977
wangjipeng977
热度 16.10
最近更新 2026-05-27 11:30:08
分类:开发依赖:读写文件 / 内部调用大模型应用场景:代码生成 / UI 原型 / 文件转换

安装技能

复制下面的话术发给你的 Agent,它会通过 secure-skills 检索并安装该技能。

执行命令安装此 skill: npx secure-skills-cli add convert-any-screenshot
Metadata
name
convert-any-screenshot
description
Use when (1) Convert any UI screenshot into a clean React or HTML/CSS implementation prompt.
license
MIT
metadata
{"version":"1.0","category":"design","author":"wangjipeng","sources":["https://github.com/MiniMax-AI/skills"]}

Core Position

This skill transforms input data from one format into a target format, preserving structure and fidelity. It is NOT a simple copy-paste — it handles formatting, schema mapping, and edge cases.

Key responsibilities:

  • Parse the input format (JSON/CSV/code/etc.) and validate structure before transforming
  • Apply formatting rules specific to the target format (indentation, escaping, etc.)
  • Handle edge cases: missing fields, unusual characters, nested structures
  • Provide a clear mapping summary so the user understands how input maps to output

Modes

/convert-any-screenshot --pretty

Formatted output. Applies proper indentation, spacing, and style conventions.

/convert-any-screenshot --strict

Strict mode. Fails on any deviation from expected structure rather than guessing.

Execution Steps

  1. Parse input — Read and parse the input; detect format (JSON/CSV/XML/code/etc.)
    • If parsing fails, report: "Failed to parse input as [format] — error at line [N]: [detail]"
  2. Validate structure — Check required fields/columns are present
    • If missing required field X, stop and report: "Missing required field: [X]"
  3. Transform — Convert input to target format, applying format-specific rules
    • Preserve all data — do not silently drop fields
    • Apply proper escaping for special characters (quotes, newlines, etc.)
  4. Validate output — Run the target format parser on the result to confirm it's valid
    • If output is invalid, revert to previous version and report what went wrong
  5. Deliver — Return the converted output with a brief mapping summary

Mandatory Rules

Do not

  • Do not silently drop fields or data — if a field cannot be mapped, report it
  • Do not guess at missing data — if a field is absent, leave it null/empty and flag it
  • Do not apply formatting that destroys the semantic meaning of the data
  • Do not produce output that fails the target format validator
  • Do not convert binary data as if it were text — detect and handle binary separately

Do

  • Report the complete field mapping: [source] -> [target] for every field
  • Validate input and output formats before and after transformation
  • Preserve character encoding (UTF-8) throughout the conversion process
  • Handle large inputs in chunks if needed to avoid memory exhaustion
  • Log conversion statistics: fields mapped, fields dropped, warnings issued

Quality Bar

Criterion Minimum Ideal
Data fidelity Zero data loss — all fields mapped Full semantic equivalence, not just structural
Format validity Output passes target parser Output passes strict schema validation
Edge case handling Handles missing/null/empty gracefully Documents every edge case decision
Escaping correctness Proper escaping for target format Round-trip: convert back to source equals original
Performance Completes within 2x manual time Streaming output for large inputs

A good output passes the target format parser without errors and preserves all semantic content.

Good vs. Bad Examples

Scenario Bad Good
Missing field Omits field from output silently Reports "Field [X] absent — output null, flagged as warning"
Special characters Only escapes visible chars Escapes all special chars per target format spec
Large input Loads entire file into memory Streams in chunks, reports progress at 25/50/75%
Output validation Skips validation Runs target parser on output, confirms valid before returning
Format error Returns raw output with error text appended Returns nothing, reports "Output invalid: [parser error] at [location]"