wireframe-generator

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Wire DSL Code Generator

Wire DSL代码生成器

Generate syntactically correct Wire DSL code for creating wireframes and UI prototypes. Wire DSL is a block-declarative language similar to Mermaid, but specifically designed for UI wireframing.

生成语法正确的Wire DSL代码，用于创建线框图和UI原型。Wire DSL是一种类似Mermaid的块声明式语言，但专为UI线框设计而打造。

What This Skill Does

该技能的功能

This skill enables LLMs to generate valid Wire DSL code by providing:

Complete syntax reference and grammar rules
Catalog of all 23 available components
Layout container patterns (Stack, Grid, Split, Panel, Card)
Best practices for code generation
Common UI patterns and examples

此技能让大语言模型（LLMs）能够生成有效的Wire DSL代码，提供以下支持：

完整的语法参考和语法规则
全部23个可用组件的目录
布局容器模式（Stack、Grid、Split、Panel、Card）
代码生成最佳实践
常见UI模式及示例

When to Use This Skill

使用场景

Use this skill when you need to:

Generate
```
.wire
```
files for wireframe prototypes
Create UI mockups using declarative syntax
Build multi-screen application wireframes
Design forms, dashboards, product catalogs, or admin interfaces
Convert UI requirements into Wire DSL code

在以下场景中使用此技能：

为线框原型生成
```
.wire
```
文件
使用声明式语法创建UI原型
构建多屏幕应用线框图
设计表单、仪表盘、产品目录或管理界面
将UI需求转换为Wire DSL代码

Core Concepts

核心概念

Structure: Every Wire DSL file follows this hierarchy:

project → theme → screen → layout → components

Syntax Style: Block-declarative with curly braces, similar to CSS/HCL:

wire

project "App Name" {
  theme { ... }
  screen ScreenName {
    layout <type> { ... }
  }
}

Key Rules:

String values MUST be quoted:
```
text: "Hello"
```
Numbers, booleans, enums are NOT quoted:
```
height: 200
```
,
```
checked: true
```
,
```
variant: primary
```
Property format:
```
key: value
```
Comments:
```
//
```
for line,
```
/* */
```
for block

结构： 每个Wire DSL文件遵循以下层级结构：

project → theme → screen → layout → components

语法风格： 带大括号的块声明式语法，类似CSS/HCL：

wire

project "App Name" {
  theme { ... }
  screen ScreenName {
    layout <type> { ... }
  }
}

关键规则：

字符串值必须加引号：
```
text: "Hello"
```
数字、布尔值、枚举值无需加引号：
```
height: 200
```
,
```
checked: true
```
,
```
variant: primary
```
属性格式：
```
key: value
```
注释：
```
//
```
用于单行注释，
```
/* */
```
用于块注释

Instructions for Code Generation

代码生成步骤

Step 1: Start with Project Structure

步骤1：从项目结构开始

Always begin with the project wrapper and theme configuration:

wire

project "Project Name" {
  theme {
    density: "normal"
    spacing: "md"
    radius: "md"
    stroke: "normal"
    font: "base"
  }

  // screens go here
}

始终从项目包裹器和主题配置开始：

wire

project "Project Name" {
  theme {
    density: "normal"
    spacing: "md"
    radius: "md"
    stroke: "normal"
    font: "base"
  }

  // screens go here
}

Step 2: Create Screens

步骤2：创建屏幕

Each screen represents a unique view in the application:

wire

screen ScreenName {
  layout <type> {
    // content
  }
}

Naming: Use CamelCase for screen names (e.g.,

UsersList

ProductDetail

Dashboard

)

每个屏幕代表应用中的一个独特视图：

wire

screen ScreenName {
  layout <type> {
    // content
  }
}

命名规则： 屏幕名称使用驼峰式（CamelCase），例如

UsersList

、

ProductDetail

、

Dashboard

Step 3: Choose Layout Container

步骤3：选择布局容器

Select the appropriate layout based on the UI structure:

Layout	Use Case	Children	Example
stack	Linear arrangement	Multiple	Forms, lists, vertical/horizontal sections
grid	Multi-column (12-col)	cells	Dashboards, product grids, responsive layouts
split	Sidebar + main area	Exactly 2	Admin panels, navigation + content
panel	Bordered container	Exactly 1	Highlighted sections, form groups
card	Content cards	Multiple	Product cards, user profiles, info boxes

根据UI结构选择合适的布局：

布局	使用场景	子元素数量	示例
stack	线性排列	多个	表单、列表、垂直/水平区域
grid	多列（12列）	单元格	仪表盘、产品网格、响应式布局
split	侧边栏+主区域	恰好2个	管理面板、导航+内容
panel	带边框的容器	恰好1个	高亮区域、表单组
card	内容卡片	多个	产品卡片、用户资料、信息框

Step 4: Add Components

步骤4：添加组件

Choose from 23 available components organized in categories:

Text: Heading, Text, Paragraph, Label Input: Input, Textarea, Select, Checkbox, Radio, Toggle Buttons: Button, IconButton Navigation: Topbar, SidebarMenu, Breadcrumbs, Tabs Data: Table, List Media: Image, Icon, Avatar Display: Divider, Badge, Link, Alert Info: StatCard, Code, ChartPlaceholder Modal: Modal, Spinner

从按类别组织的23个可用组件中选择：

文本类： Heading、Text、Paragraph、Label 输入类： Input、Textarea、Select、Checkbox、Radio、Toggle 按钮类： Button、IconButton 导航类： Topbar、SidebarMenu、Breadcrumbs、Tabs 数据类： Table、List 媒体类： Image、Icon、Avatar 展示类： Divider、Badge、Link、Alert 信息类： StatCard、Code、ChartPlaceholder 模态框类： Modal、Spinner

Step 5: Validate Syntax

步骤5：验证语法

Before outputting, check:

✅ All strings are quoted
✅ Numbers/booleans/enums are NOT quoted
✅ All braces are closed
✅ Required properties are present
✅ Component names match exactly (case-sensitive)
✅ Split has 2 children, Panel has 1 child
✅ Grid cells have valid
```
span
```
values (1-12)

输出前，请检查：

✅ 所有字符串都加了引号
✅ 数字/布尔值/枚举值未加引号
✅ 所有大括号都已闭合
✅ 必要属性已存在
✅ 组件名称完全匹配（区分大小写）
✅ Split布局恰好有2个子元素，Panel布局恰好有1个子元素
✅ Grid单元格的
```
span
```
值有效（1-12）

Reference Files

参考文件

File	Purpose
core-syntax.md	Complete syntax rules, property formats, naming conventions
components-catalog.md	All 23 components with properties and examples
layouts-guide.md	Layout containers (Stack, Grid, Split, Panel, Card) with patterns
best-practices.md	Validation checklist, common mistakes, gotchas
common-patterns.md	Reusable patterns for forms, dashboards, navigation, cards

文件	用途
core-syntax.md	完整的语法规则、属性格式、命名规范
components-catalog.md	所有23个组件的属性及示例
layouts-guide.md	布局容器（Stack、Grid、Split、Panel、Card）及模式
best-practices.md	验证清单、常见错误、注意事项
common-patterns.md	表单、仪表盘、导航、卡片的可复用模式

Examples

示例

Example 1: Simple Login Form

示例1：简单登录表单

wire

project "Login App" {
  theme {
    density: "normal"
    spacing: "md"
    radius: "md"
    stroke: "normal"
    font: "base"
  }

  screen Login {
    layout stack(direction: vertical, gap: lg, padding: xl) {
      component Heading text: "Sign In"
      component Input label: "Email" placeholder: "your@email.com"
      component Input label: "Password" placeholder: "Enter password"
      component Checkbox label: "Remember me" checked: false
      component Button text: "Sign In" variant: primary
      component Link text: "Forgot password?"
    }
  }
}

wire

project "Login App" {
  theme {
    density: "normal"
    spacing: "md"
    radius: "md"
    stroke: "normal"
    font: "base"
  }

  screen Login {
    layout stack(direction: vertical, gap: lg, padding: xl) {
      component Heading text: "Sign In"
      component Input label: "Email" placeholder: "your@email.com"
      component Input label: "Password" placeholder: "Enter password"
      component Checkbox label: "Remember me" checked: false
      component Button text: "Sign In" variant: primary
      component Link text: "Forgot password?"
    }
  }
}

Example 2: Dashboard with Sidebar

示例2：带侧边栏的仪表盘

wire

project "Admin Dashboard" {
  theme {
    density: "normal"
    spacing: "md"
    radius: "md"
    stroke: "normal"
    font: "base"
  }

  screen Dashboard {
    layout split(sidebar: 260, gap: md) {
      layout stack(direction: vertical, gap: md, padding: md) {
        component Heading text: "Menu"
        component SidebarMenu items: "Dashboard,Users,Settings,Analytics" active: 0
      }

      layout stack(direction: vertical, gap: lg, padding: lg) {
        component Heading text: "Dashboard Overview"

        layout grid(columns: 12, gap: md) {
          cell span: 3 {
            component StatCard title: "Total Users" value: "2,543"
          }
          cell span: 3 {
            component StatCard title: "Revenue" value: "$45,230"
          }
          cell span: 3 {
            component StatCard title: "Growth" value: "+12.5%"
          }
          cell span: 3 {
            component StatCard title: "Active Now" value: "892"
          }
        }

        component ChartPlaceholder type: "line" height: 300
        component Table columns: "User,Email,Status,Role" rows: 8
      }
    }
  }
}

wire

project "Admin Dashboard" {
  theme {
    density: "normal"
    spacing: "md"
    radius: "md"
    stroke: "normal"
    font: "base"
  }

  screen Dashboard {
    layout split(sidebar: 260, gap: md) {
      layout stack(direction: vertical, gap: md, padding: md) {
        component Heading text: "Menu"
        component SidebarMenu items: "Dashboard,Users,Settings,Analytics" active: 0
      }

      layout stack(direction: vertical, gap: lg, padding: lg) {
        component Heading text: "Dashboard Overview"

        layout grid(columns: 12, gap: md) {
          cell span: 3 {
            component StatCard title: "Total Users" value: "2,543"
          }
          cell span: 3 {
            component StatCard title: "Revenue" value: "$45,230"
          }
          cell span: 3 {
            component StatCard title: "Growth" value: "+12.5%"
          }
          cell span: 3 {
            component StatCard title: "Active Now" value: "892"
          }
        }

        component ChartPlaceholder type: "line" height: 300
        component Table columns: "User,Email,Status,Role" rows: 8
      }
    }
  }
}

Example 3: Product Grid (E-Commerce)

示例3：产品网格（电商）

wire

project "Product Catalog" {
  theme {
    density: "comfortable"
    spacing: "lg"
    radius: "lg"
    stroke: "thin"
    font: "base"
  }

  screen Products {
    layout stack(direction: vertical, gap: xl, padding: xl) {
      layout grid(columns: 12, gap: md) {
        cell span: 8 {
          component Heading text: "Featured Products"
        }
        cell span: 4 align: end {
          component Button text: "View All" variant: primary
        }
      }

      layout grid(columns: 12, gap: lg) {
        cell span: 4 {
          layout card(padding: md, gap: md, radius: lg, border: true) {
            component Image placeholder: "square" height: 220
            component Heading text: "Wireless Headphones"
            component Text content: "Premium sound quality"
            component Badge text: "New" variant: primary
            layout stack(direction: horizontal, gap: sm) {
              component Text content: "$129.99"
              component Button text: "Add to Cart" variant: primary
            }
          }
        }

        cell span: 4 {
          layout card(padding: md, gap: md, radius: lg, border: true) {
            component Image placeholder: "square" height: 220
            component Heading text: "Smart Watch"
            component Text content: "Track your fitness"
            component Badge text: "Sale" variant: success
            layout stack(direction: horizontal, gap: sm) {
              component Text content: "$199.99"
              component Button text: "Add to Cart" variant: primary
            }
          }
        }

        cell span: 4 {
          layout card(padding: md, gap: md, radius: lg, border: true) {
            component Image placeholder: "square" height: 220
            component Heading text: "Laptop Stand"
            component Text content: "Ergonomic design"
            component Badge text: "Popular" variant: info
            layout stack(direction: horizontal, gap: sm) {
              component Text content: "$49.99"
              component Button text: "Add to Cart" variant: primary
            }
          }
        }
      }
    }
  }
}

wire

project "Product Catalog" {
  theme {
    density: "comfortable"
    spacing: "lg"
    radius: "lg"
    stroke: "thin"
    font: "base"
  }

  screen Products {
    layout stack(direction: vertical, gap: xl, padding: xl) {
      layout grid(columns: 12, gap: md) {
        cell span: 8 {
          component Heading text: "Featured Products"
        }
        cell span: 4 align: end {
          component Button text: "View All" variant: primary
        }
      }

      layout grid(columns: 12, gap: lg) {
        cell span: 4 {
          layout card(padding: md, gap: md, radius: lg, border: true) {
            component Image placeholder: "square" height: 220
            component Heading text: "Wireless Headphones"
            component Text content: "Premium sound quality"
            component Badge text: "New" variant: primary
            layout stack(direction: horizontal, gap: sm) {
              component Text content: "$129.99"
              component Button text: "Add to Cart" variant: primary
            }
          }
        }

        cell span: 4 {
          layout card(padding: md, gap: md, radius: lg, border: true) {
            component Image placeholder: "square" height: 220
            component Heading text: "Smart Watch"
            component Text content: "Track your fitness"
            component Badge text: "Sale" variant: success
            layout stack(direction: horizontal, gap: sm) {
              component Text content: "$199.99"
              component Button text: "Add to Cart" variant: primary
            }
          }
        }

        cell span: 4 {
          layout card(padding: md, gap: md, radius: lg, border: true) {
            component Image placeholder: "square" height: 220
            component Heading text: "Laptop Stand"
            component Text content: "Ergonomic design"
            component Badge text: "Popular" variant: info
            layout stack(direction: horizontal, gap: sm) {
              component Text content: "$49.99"
              component Button text: "Add to Cart" variant: primary
            }
          }
        }
      }
    }
  }
}

Quick Tips

快速提示

Spacing: Use

gap

and

padding

with tokens:

xs

sm

md

lg

xl

Padding Default: Layouts have 0px padding by default - always specify when needed Grid System: 12-column grid, cells can span 1-12 columns Icons: Use Feather Icons names:

search

settings

menu

user

star

heart

, etc. CSV Lists: Comma-separated strings for items:

items: "Home,About,Contact"

Variants: Components support:

primary

secondary

ghost

success

warning

error

info

间距： 使用

gap

和

padding

搭配令牌：

xs

、

sm

、

md

、

lg

、

xl

默认内边距： 布局默认内边距为0px - 需要时务必指定 网格系统： 12列网格，单元格可跨1-12列 图标： 使用Feather Icons的名称：

search

、

settings

、

menu

、

user

、

star

、

heart

等 CSV列表： 用逗号分隔的字符串表示项目：

items: "Home,About,Contact"

变体： 组件支持：

primary

、

secondary

、

ghost

、

success

、

warning

、

error

、

info

Common Mistakes to Avoid

需避免的常见错误

❌ Forgetting quotes on strings:

text: Hello

→ ✅

text: "Hello"

❌ Adding quotes to numbers:

height: "200"

→ ✅

height: 200

❌ Wrong component case:

button

→ ✅

Button

❌ Using kebab-case for screens:

user-list

→ ✅

UserList

❌ Forgetting padding: Layouts default to 0px, not theme spacing ❌ Split with 3 children → Must have exactly 2 ❌ Panel with multiple children → Must have exactly 1 ❌ Invalid grid span:

span: 15

→ Must be 1-12

❌ 忘记给字符串加引号：

text: Hello

→ ✅

text: "Hello"

❌ 给数字加引号：

height: "200"

→ ✅

height: 200

❌ 组件名称大小写错误：

button

→ ✅

Button

❌ 屏幕名称使用短横线命名：

user-list

→ ✅

UserList

❌ 忘记设置内边距：布局默认内边距为0px，而非主题间距 ❌ Split布局有3个子元素 → 必须恰好2个 ❌ Panel布局有多个子元素 → 必须恰好1个 ❌ 无效的网格跨度：

span: 15

→ 必须为1-12

Output Guidelines

输出规范

When generating Wire DSL code:

Always validate syntax before outputting
Include complete, runnable examples - not partial snippets
Use realistic content - "John Doe", "john@example.com", actual values
Follow naming conventions - CamelCase screens, exact component names
Add proper spacing - Use
```
gap
```
and
```
padding
```
appropriately
Structure logically - Group related components, nest layouts properly
Comment when helpful - Explain complex structures with
```
//
```
comments

生成Wire DSL代码时：

输出前务必验证语法
包含完整可运行的示例 - 而非部分代码片段
使用真实内容 - 如“John Doe”、“john@example.com”、实际数值
遵循命名规范 - 屏幕名称用驼峰式，组件名称完全匹配
添加合适的间距 - 合理使用
```
gap
```
和
```
padding
```
逻辑化结构 - 关联组件分组，正确嵌套布局
必要时添加注释 - 用
```
//
```
注释解释复杂结构

Getting Help

获取帮助

For more details, see the reference files in the

references/

folder or consult:

Project docs:
```
/home/user/wire-dsl/docs/
```
User docs:
```
/home/user/wire-dsl/apps/docs/
```
Examples:
```
/home/user/wire-dsl/examples/
```

如需更多详情，请查看

references/

文件夹中的参考文件，或查阅：

项目文档：
```
/home/user/wire-dsl/docs/
```
用户文档：
```
/home/user/wire-dsl/apps/docs/
```
示例：
```
/home/user/wire-dsl/examples/
```