H2oslabs Synnovatorzero AI UI Generator

AI UI Generator

Generate structured UI/UX specifications from user journeys and requirements when no Figma design is available.

When to Use

This skill is the "Branch B" in the frontend development workflow:

Phase 4: UI/UX 设计检测
├── 分支 A (有 Figma): figma-resource-extractor → ui-spec-generator
└── 分支 B (无 Figma): ai-ui-generator  ← THIS SKILL

Automatic Detection: Use this skill if:

• specs/design/figma/ does NOT exist, OR
• User explicitly requests "无 Figma 设计" / "no Figma design"

Workflow

Phase 1: Gather Requirements

1.1 Read User Journeys

# Read all user journey documents
ls docs/user-journeys/*.md

Parse each journey file to extract:

• Pages needed: What screens/views are required
• Components needed: What UI elements appear
• Actions: What user interactions occur
• Data displayed: What information is shown

1.2 Read Test Cases

# Read test cases for UI requirements
ls specs/testcases/*.md

Extract from test cases:

• Form fields: What inputs are needed
• Validation rules: What constraints exist
• Success/error states: What feedback is shown
• Permissions: What role-specific UI exists

1.3 Read Design System

Reference the Neon Forge design system:

• specs/ui/style.pen or specs/design/ - Design tokens
• frontend/tailwind.config.ts - Theme configuration

Phase 2: Generate Page Specifications

For each page identified, create a specification in specs/design/pages.yaml.

2.1 Page Structure Template

pages:
  - id: page-id
    name: 页面名称
    route: /path
    description: 页面功能描述
    source: "Generated from {user-journey-file}"

    sections:
      - id: section-id
        name: 区块名称
        layout: grid | flex | stack

        components:
          - id: component-id
            name: 组件名称
            type: card | list | form | button | ...
            shadcn_component: Card | Table | Form | Button | ...
            data_source: post | category | user | ...
            fields:
              - field_name
            actions:
              - action_name

2.2 Component Mapping

Use shadcn MCP to find appropriate components:

# Search for matching components
mcp__shadcn__search_items_in_registries(
  registries: ["@shadcn"],
  query: "card"
)

# Get component details
mcp__shadcn__view_items_in_registries(
  items: ["@shadcn/card"]
)

Map user journey actions to shadcn/ui components:

2.3 Layout Patterns

Reference layout-patterns.md for common layouts:

Phase 3: Generate UX Specifications

For each page, create interaction specs in specs/ux/pages/{page-id}.yaml.

3.1 UX Spec Structure

# Page: {page-name}
route: "/{path}"
description: 页面交互说明

sections:
  {section-id}:
    components:
      {component-id}:
        interactions:
          - trigger: click | hover | focus | submit
            action: navigate | show_modal | call_api | update_state
            target: "{route}" | "{modal-id}" | "{api-endpoint}"
            params: { ... }

          - trigger: form_submit
            action: call_api
            api_call:
              method: POST
              endpoint: "/api/{resource}"
              body: "{form_data}"
            on_success:
              - action: show_toast
                message: "操作成功"
              - action: navigate
                target: "/{success-route}"
            on_error:
              - action: show_toast
                type: error
                message: "{error.message}"

3.2 Interaction Patterns

Reference interaction-patterns.md for common patterns:

Phase 4: Validate & Install Components

4.1 List Required Components

After generating specs, compile the list of shadcn components needed:

required_components:
  - Card
  - Button
  - Input
  - Form
  - Table
  - Dialog
  - Toast

4.2 Generate Installation Commands

Use shadcn MCP to get installation commands:

mcp__shadcn__get_add_command_for_items(
  items: ["@shadcn/card", "@shadcn/button", "@shadcn/form"]
)

Output to specs/design/component-install.sh:

#!/bin/bash
npx shadcn@latest add card
npx shadcn@latest add button
npx shadcn@latest add form
# ...

Phase 5: Output Files

Generate the following files:

Design System Integration

Neon Forge Theme Tokens

Apply these tokens in generated specs:

theme:
  colors:
    primary: nf-lime (#BBFD3B)
    background: nf-dark (#181818)
    surface: nf-surface (#222222)
    secondary: nf-secondary (#333333)
    text: nf-white
    muted: nf-muted
    error: nf-error

  spacing:
    xs: 4px
    sm: 8px
    md: 16px
    lg: 24px
    xl: 32px

  radius:
    sm: 4px
    md: 8px
    lg: 12px
    xl: 21px
    pill: 50px

Component Styling Conventions

All components should follow:

1. Dark theme by default - Use bg-nf-surface, text-nf-white
2. Lime accent - Primary actions use bg-nf-lime text-nf-near-black
3. Border styling - Use border-nf-secondary
4. Hover states - Use hover:bg-nf-secondary or hover:text-nf-lime

Example: Generating from User Journey

Input: User Journey (J-003 发帖子)

# J-003: 用户发帖子

## 前置条件
- 用户已登录

## 流程
1. 用户点击"发布"按钮
2. 系统显示发帖表单
3. 用户填写标题、内容、标签
4. 用户点击"提交"
5. 系统验证内容
6. 系统创建帖子
7. 系统跳转到帖子详情页

Output: pages.yaml

pages:
  - id: post-create
    name: 发布帖子
    route: /posts/create
    source: "Generated from docs/user-journeys/j003-create-post.md"

    sections:
      - id: form-section
        name: 帖子表单
        layout: stack

        components:
          - id: post-form
            name: 帖子表单
            type: form
            shadcn_component: Form
            fields:
              - name: title
                type: text
                required: true
                label: 标题
              - name: content
                type: markdown
                required: true
                label: 内容
              - name: tags
                type: tag-input
                required: false
                label: 标签
            actions:
              - id: submit
                type: submit
                label: 发布
                api_call: POST /api/posts

Output: specs/ux/pages/post-create.yaml

route: "/posts/create"
description: 发布新帖子

sections:
  form-section:
    components:
      post-form:
        interactions:
          - trigger: submit
            action: call_api
            api_call:
              method: POST
              endpoint: "/api/posts"
              body: "{form_data}"
            loading_state: submit-button
            on_success:
              - action: show_toast
                message: "发布成功"
              - action: navigate
                target: "/posts/{new_post.id}"
            on_error:
              - action: show_form_errors

Integration with Other Skills

Upstream Dependencies

Downstream Consumers

Troubleshooting

No User Journeys Found

Error: docs/user-journeys/ is empty

Solution: Create user journey documents first using the requirements.

Component Not Found in shadcn

If a required component doesn't exist in shadcn/ui:

1. Check Magic UI MCP for animated alternatives
2. Create custom component based on shadcn primitives
3. Document in specs/design/custom-components.md

Conflicting Requirements

If test cases and user journeys conflict:

1. Prioritize test cases (they define expected behavior)
2. Flag conflicts in specs/design/pages.yaml with comments
3. Ask user for clarification

References

• component-catalog.md - Available shadcn components
• layout-patterns.md - Common layout patterns
• interaction-patterns.md - Interaction patterns
• neon-forge-tokens.md - Design system tokens

Converted and distributed by TomeVault — claim your Tome and manage your conversions.