AutoPage

Required plugin: JavaScript

Demo Video: https://www.bilibili.com/video/BV1Ye411h7Qu/

implementation: [cc.unitmesh.database.flow.AutoPageFlow]

Design Flow

Common flow for frontend development:

• getRoutes
• getComponents
• getDesignSystemComponents
• sampleRemoteCall
• sampleStateManagement

Prompt Override

Steps:

• step 1: prompts/genius/page/page-gen-clarify.vm
• step 2: prompts/genius/page/page-gen-design.vm

Context:

data class AutoPageContext(
    val requirement: String,
    var pages: List<String>,
    val pageNames: List<String>,
    var components: List<String>,
    val componentNames: List<String>,
    val routes: List<String>,
    val frameworks: List<String> = listOf("React"),
    val language: String = "JavaScript",
)

Current Prompt

Clarify:

    You are a professional Frontend developer.
    According to the user's requirements, you should choose the best components for the user in List.

    - Framework: ${context.frameworks}
    - Language: ${context.language}
    - User component: ${context.componentNames}, ${context.pageNames}
    
    For example:
    
    - Question(requirements): Build a form for user to fill in their information.
    - You should anwser: [Input, Select, Radio, Checkbox, Button, Form]
    
    ----
    
    Here are the User requirements:
    
    ```markdown
    ${context.requirement}

Please choose the best Components for the user, just return the components names in a list, no explain.

Design:

```markdown
    You are a professional Frontend developer.
    According to the user's requirements, and Components info, write Component for the user.
    
    - Framework: ${context.frameworks}
    - Language: ${context.language}
    - User Components Infos: ${context.components}
    
    For example:
    
    - Question(requirements): Build a form for user to fill in their information.
      // componentName: Form, props: { fields: [{name: 'name', type: 'text'}, {name: 'age', type: 'number'}] }
      // componentName: Input, props: { name: 'name', type: 'text' }
      // componentName: Input, props: { name: 'age', type: 'number' }
    - Answer:
    <Form>
        <Input name="name" type="text" />
        <Input name="age" type="number" />
    </Form>
    
    ----
    
    Here are the requirements:
    
    ${context.requirement}
    
    Please write your code with Markdown syntax, no explanation is needed:

Theory of AutoPage

Common frontend flow:

1. Functional bootstrap
2. Request Transform / Data validation, IO Handing.
3. Process IPC/RPC Calling
4. Output Transform / Render