CoDesign JSON → Vue Agent Skill

An Agent Skill that converts Tencent CoDesign design files (screen meta JSON + preview images) into Vue 3 responsive pages with 95%+ pixel accuracy and 100% component coverage.

Installation

npx skills add daugf2527/codesign-json-to-vue

Or install for a specific agent:

# For Windsurf/Codex
npx skills add daugf2527/codesign-json-to-vue -a codex

# For Claude Code
npx skills add daugf2527/codesign-json-to-vue -a claude-code

# For Cursor
npx skills add daugf2527/codesign-json-to-vue -a cursor

What It Does

This skill enables AI coding agents to:

• Parse CoDesign inspect URLs and download design metadata + preview images
• Identify UI components from design previews using vision AI
• Map design elements to your project's existing Vue 3 component library
• Generate responsive Vue 3 SFC pages with proper layout (CSS Grid/Flexbox)
• Validate output against 13 quality gates (structure, semantics, code)

Use When

• "Convert this CoDesign page to Vue"
• "Implement this design file as a responsive page"
• "Turn this CoDesign inspect URL into code"
• Processing CoDesign inspect URLs, JSON meta files, or preview images
• Need pixel-accurate design-to-code with your project's template components

Skill Structure

codesign-json-to-vue/
├── SKILL.md              # Main skill instructions for the agent
├── scripts/              # Automation scripts (Python 3)
│   ├── codesign_pipeline.py          # Step 1: Download meta JSON + preview
│   ├── simplify-design.py            # Step 2: Simplify JSON → lite + style
│   ├── search-region.py              # Step 3.2: Anchor point coordinate search
│   ├── extract-component-styles.py   # Step 3.3: Style extraction
│   ├── build-component-manifest.py   # Step 3.5: Assemble component manifest
│   ├── build-component-index.py      # Step 0.5: Scan Vue SFC → component index
│   ├── extract-design-tokens.py      # Step 0.5: Extract design tokens
│   ├── codesign_utils.py             # Shared utilities
│   ├── codesign_preview_download.py  # Preview image downloader
│   ├── slice_preview.py              # Long page slicer (>2000px)
│   ├── merge_vision_results.py       # Merge multi-slice results
│   ├── validate-anchors.py           # Anchor validation (AI backup)
│   ├── compute-spacing.py            # Spacing computation (AI backup)
│   ├── verify-output.py              # Gate checks (AI backup)
│   └── manifest_lib/                 # Manifest builder sub-modules
│       ├── builder.py
│       ├── inference.py
│       ├── layout.py
│       ├── rules.json
│       └── utils.py
└── references/           # Supporting documentation
    ├── workflow.md           # Complete workflow & script dependencies
    ├── project-mapping.md    # Component mapping & templates
    ├── vision-prompt.md      # Vision AI component recognition prompts
    └── troubleshooting.md    # Common issues & solutions

Quick Start

Requires a CoDesign API token. Do NOT commit tokens to your repository.

python3 ~/.codex/skills/codesign-json-to-vue/scripts/codesign_pipeline.py \
  "https://codesign.qq.com/app/design/<design_id>/<screen_id>/inspect"

Key Principles

1. Block-first: Cut blocks first, then process within blocks
2. containerRect only for inference: Never hardcode widths/coordinates
3. Responsive layout: Must use minmax(0, 1fr) / clamp() — no fixed column widths
4. 100% coverage: All components must be identified, no orphans
5. Semantic flow: DOM order follows semantic flow, not coordinates
6. AI-driven inference: Step 6 uses AI to read manifest and intelligently select component templates

Execution Pipeline

Step	Method	Executor
Step 1: Download raw data	codesign_pipeline.py	Script
Step 2: Simplify JSON	simplify-design.py	Script
Step 3.1: Visual component recognition	Preview + text nodes	AI
Step 3.2: Anchor alignment	search-region.py	AI orchestrated
Step 3.3: Style extraction	extract-component-styles.py	Script
Step 3.4: Spacing inference	Read containerRect	AI
Step 3.5: Assemble manifest	build-component-manifest.py	Script
Step 4: Layout pattern	Infer grid/flex strategy	AI
Step 5: Component mapping	3-level inference	AI
Step 6: Generate Vue	Responsive SFC generation	AI
Step 7: Validation	13-item gate check	AI

Requirements

• Python 3.8+
• requests library (for CoDesign API calls)
• A valid CoDesign API token

License

MIT