Lanhu Code to Vue 2 Element UI Converter

Problem It Solves

Static pages exported from design tools or hand-built with HTML often contain repeated markup, fake form controls made from div + text + icon, and missing component state. Converting them by hand in Vue 2 + Element UI can create duplicated styles, missing methods, inconsistent class names, and controls that look component-like but do not behave like real components.

How the Skill Works

• Source boundary: it reads only src/views/${folderName}/index.vue, the CSS files that index.vue references, and resource paths; it does not use other Custom.vue files, router configs, shared components, or package.json as the page source. Router files are used only after generation to register or validate the page path.
• Structure and pseudo-control analysis: it detects layout, repeated sections, buttons, inputs, radio/checkbox groups, dropdowns, pagination, dialogs, ratings, and color pickers, then maps pseudo-controls to Element UI components such as el-input, el-select, el-checkbox, el-radio-group, el-pagination, and el-dialog.
• Direct output: it writes Custom.vue directly, completes template, data(), and methods, applies ::v-deep overrides to preserve visual fidelity, and follows a class naming rule such as [folderName]_feature_content_state.
• Limits: it is intended for static-to-dynamic refactoring on Vue 2 + Element UI, not for building pages from scratch, other stacks, or missing source files/styles.