716 lines
18 KiB
Markdown
716 lines
18 KiB
Markdown
# Screenshot Import Complete Examples
|
|
|
|
This document contains complete end-to-end examples of screenshot-to-uxscii conversion, showing input data, generated files, and expected outputs.
|
|
|
|
## Example 1: Simple Button Component
|
|
|
|
### Input: Vision Analysis Data
|
|
|
|
```json
|
|
{
|
|
"id": "submit-button",
|
|
"type": "button",
|
|
"category": "atomic",
|
|
"visualProperties": {
|
|
"width": 20,
|
|
"height": 3,
|
|
"borderStyle": "rounded",
|
|
"textContent": "Submit"
|
|
},
|
|
"states": ["default", "hover", "focus", "disabled"],
|
|
"accessibility": {
|
|
"role": "button",
|
|
"label": "Submit form"
|
|
}
|
|
}
|
|
```
|
|
|
|
### Output: submit-button.uxm
|
|
|
|
```json
|
|
{
|
|
"id": "submit-button",
|
|
"type": "button",
|
|
"version": "1.0.0",
|
|
"metadata": {
|
|
"name": "Submit Button",
|
|
"description": "An interactive button component for user actions. Submit form",
|
|
"author": "Fluxwing Screenshot Import",
|
|
"created": "2025-10-13T12:00:00Z",
|
|
"modified": "2025-10-13T12:00:00Z",
|
|
"tags": ["button", "imported", "screenshot-generated", "utility", "interactive"],
|
|
"category": "utility"
|
|
},
|
|
"props": {
|
|
"text": "Submit",
|
|
"variant": "secondary",
|
|
"size": "small"
|
|
},
|
|
"behavior": {
|
|
"states": [
|
|
{
|
|
"name": "default",
|
|
"properties": {
|
|
"border": "rounded",
|
|
"background": "filled",
|
|
"textColor": "default"
|
|
}
|
|
},
|
|
{
|
|
"name": "hover",
|
|
"properties": {
|
|
"border": "heavy",
|
|
"background": "filled",
|
|
"textColor": "default"
|
|
}
|
|
},
|
|
{
|
|
"name": "focus",
|
|
"properties": {
|
|
"border": "heavy",
|
|
"background": "filled",
|
|
"textColor": "default"
|
|
}
|
|
},
|
|
{
|
|
"name": "disabled",
|
|
"properties": {
|
|
"border": "dashed",
|
|
"background": "filled",
|
|
"textColor": "default",
|
|
"opacity": 0.5,
|
|
"cursor": "not-allowed"
|
|
}
|
|
}
|
|
],
|
|
"interactions": ["click", "keyboard"],
|
|
"accessibility": {
|
|
"role": "button",
|
|
"focusable": true,
|
|
"keyboardSupport": ["Enter", "Space"],
|
|
"ariaLabel": "Submit form"
|
|
}
|
|
},
|
|
"layout": {
|
|
"display": "inline-block",
|
|
"positioning": "static",
|
|
"spacing": {
|
|
"padding": { "x": 2, "y": 1 },
|
|
"margin": { "x": 0, "y": 0 }
|
|
},
|
|
"sizing": {
|
|
"minWidth": 20,
|
|
"height": 3
|
|
}
|
|
},
|
|
"ascii": {
|
|
"templateFile": "submit-button.md",
|
|
"width": 20,
|
|
"height": 3,
|
|
"variables": [
|
|
{
|
|
"name": "text",
|
|
"type": "string",
|
|
"required": true,
|
|
"default": "Submit",
|
|
"description": "button label text"
|
|
},
|
|
{
|
|
"name": "variant",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "primary",
|
|
"description": "Button style variant (primary, secondary, danger)"
|
|
},
|
|
{
|
|
"name": "size",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "medium",
|
|
"description": "Component size (small, medium, large)"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
```
|
|
|
|
### Output: submit-button.md
|
|
|
|
```markdown
|
|
# Submit Button
|
|
|
|
An interactive button component for user actions. Submit form
|
|
|
|
## Default State
|
|
|
|
```
|
|
╭──────────────────╮
|
|
│▓▓▓▓▓▓Submit▓▓▓▓▓▓│
|
|
╰──────────────────╯
|
|
```
|
|
|
|
## Hover State
|
|
|
|
```
|
|
┏━━━━━━━━━━━━━━━━━━┓
|
|
┃████████Submit████┃
|
|
┗━━━━━━━━━━━━━━━━━━┛
|
|
```
|
|
|
|
## Focus State
|
|
|
|
```
|
|
┏━━━━━━━━━━━━━━━━━━┓
|
|
┃▓▓▓▓▓Submit ✨▓▓▓▓┃
|
|
┗━━━━━━━━━━━━━━━━━━┛
|
|
```
|
|
|
|
## Disabled State
|
|
|
|
```
|
|
╭ ─ ─ ─ ─ ─ ─ ─ ─ ╮
|
|
│ Submit │
|
|
╰ ─ ─ ─ ─ ─ ─ ─ ─ ╯
|
|
```
|
|
|
|
## Variables
|
|
|
|
- `text` (string, required): button label text
|
|
- Default: "Submit"
|
|
- Example: "Submit Form"
|
|
|
|
- `variant` (string, optional): Button style variant (primary, secondary, danger)
|
|
- Default: "primary"
|
|
|
|
- `size` (string, optional): Component size (small, medium, large)
|
|
- Default: "medium"
|
|
|
|
## Accessibility
|
|
|
|
- **Role**: button
|
|
- **Focusable**: Yes
|
|
- **Keyboard Support**: Enter, Space
|
|
- **ARIA Label**: Submit form
|
|
|
|
## Usage Examples
|
|
|
|
```
|
|
╭──────────────────╮
|
|
│▓▓▓Submit Form▓▓▓▓│
|
|
╰──────────────────╯
|
|
```
|
|
|
|
---
|
|
*Generated by Fluxwing Screenshot Import*
|
|
```
|
|
|
|
---
|
|
|
|
## Example 2: Email Input Component
|
|
|
|
### Input: Vision Analysis Data
|
|
|
|
```json
|
|
{
|
|
"id": "email-input",
|
|
"type": "input",
|
|
"category": "atomic",
|
|
"visualProperties": {
|
|
"width": 40,
|
|
"height": 3,
|
|
"borderStyle": "light",
|
|
"textContent": "Email",
|
|
"placeholder": "Enter your email"
|
|
},
|
|
"states": ["default", "focus", "error", "disabled"],
|
|
"accessibility": {
|
|
"role": "textbox",
|
|
"label": "Email address"
|
|
}
|
|
}
|
|
```
|
|
|
|
### Output: email-input.uxm (abbreviated)
|
|
|
|
```json
|
|
{
|
|
"id": "email-input",
|
|
"type": "input",
|
|
"version": "1.0.0",
|
|
"metadata": {
|
|
"name": "Email Input",
|
|
"description": "A text input field for user data entry. Email address",
|
|
"category": "input"
|
|
},
|
|
"props": {
|
|
"text": "Email",
|
|
"placeholder": "Enter your email",
|
|
"type": "email",
|
|
"size": "large",
|
|
"maxLength": 32
|
|
},
|
|
"ascii": {
|
|
"templateFile": "email-input.md",
|
|
"width": 40,
|
|
"height": 3,
|
|
"variables": [
|
|
{
|
|
"name": "text",
|
|
"type": "string",
|
|
"required": true,
|
|
"default": "Email",
|
|
"description": "input label text"
|
|
},
|
|
{
|
|
"name": "placeholder",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "Enter your email",
|
|
"description": "Placeholder text when empty"
|
|
},
|
|
{
|
|
"name": "value",
|
|
"type": "string",
|
|
"required": false,
|
|
"default": "",
|
|
"description": "Current value"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
```
|
|
|
|
### Output: email-input.md
|
|
|
|
```markdown
|
|
# Email Input
|
|
|
|
A text input field for user data entry. Email address
|
|
|
|
## Default State
|
|
|
|
```
|
|
┌──────────────────────────────────────┐
|
|
│ Email │
|
|
│ Enter your email │
|
|
└──────────────────────────────────────┘
|
|
```
|
|
|
|
## Focus State
|
|
|
|
```
|
|
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
|
┃ Email │┃
|
|
┃ john.doe@example.com ┃
|
|
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
|
```
|
|
|
|
## Error State
|
|
|
|
```
|
|
┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
|
|
┃ ⚠️ Email ┃
|
|
┃ invalid@email ┃
|
|
┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
|
|
❌ Please enter valid email address
|
|
```
|
|
|
|
## Disabled State
|
|
|
|
```
|
|
┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┐
|
|
│ Email │
|
|
│ ────────────────────── │
|
|
└ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ┘
|
|
```
|
|
|
|
## Variables
|
|
|
|
- `text` (string, required): input label text
|
|
- Default: "Email"
|
|
|
|
- `placeholder` (string, optional): Placeholder text when empty
|
|
- Default: "Enter your email"
|
|
|
|
- `value` (string, optional): Current value
|
|
- Default: ""
|
|
|
|
## Accessibility
|
|
|
|
- **Role**: textbox
|
|
- **Focusable**: Yes
|
|
- **Keyboard Support**: Tab, Escape
|
|
- **ARIA Label**: Email address
|
|
|
|
---
|
|
*Generated by Fluxwing Screenshot Import*
|
|
```
|
|
|
|
---
|
|
|
|
## Example 3: Multi-Component Login Form
|
|
|
|
### Input: Vision Analysis Data
|
|
|
|
```json
|
|
{
|
|
"screen": {
|
|
"type": "login-form",
|
|
"name": "Login Screen",
|
|
"description": "User authentication screen with email/password inputs",
|
|
"layout": "vertical-center"
|
|
},
|
|
"components": [
|
|
{
|
|
"id": "email-input",
|
|
"type": "input",
|
|
"category": "atomic",
|
|
"visualProperties": { "width": 40, "height": 3, "borderStyle": "light", "textContent": "Email", "placeholder": "Enter your email" },
|
|
"states": ["default", "focus", "error"],
|
|
"accessibility": { "role": "textbox", "label": "Email address" }
|
|
},
|
|
{
|
|
"id": "password-input",
|
|
"type": "input",
|
|
"category": "atomic",
|
|
"visualProperties": { "width": 40, "height": 3, "borderStyle": "light", "textContent": "Password", "placeholder": "Enter your password" },
|
|
"states": ["default", "focus", "error"],
|
|
"accessibility": { "role": "textbox", "label": "Password" }
|
|
},
|
|
{
|
|
"id": "submit-button",
|
|
"type": "button",
|
|
"category": "atomic",
|
|
"visualProperties": { "width": 20, "height": 3, "borderStyle": "rounded", "textContent": "Sign In" },
|
|
"states": ["default", "hover", "disabled"],
|
|
"accessibility": { "role": "button", "label": "Sign in to account" }
|
|
},
|
|
{
|
|
"id": "login-form",
|
|
"type": "form",
|
|
"category": "composite",
|
|
"visualProperties": { "width": 50, "height": 20, "borderStyle": "rounded", "textContent": "Sign In" },
|
|
"states": ["default"],
|
|
"accessibility": { "role": "form", "label": "Login form" }
|
|
}
|
|
],
|
|
"composition": {
|
|
"atomicComponents": ["email-input", "password-input", "submit-button"],
|
|
"compositeComponents": ["login-form"],
|
|
"screenComponents": ["login-screen"]
|
|
}
|
|
}
|
|
```
|
|
|
|
### Files Generated
|
|
|
|
1. **Atomic Components:**
|
|
- `./fluxwing/components/email-input.uxm`
|
|
- `./fluxwing/components/email-input.md`
|
|
- `./fluxwing/components/password-input.uxm`
|
|
- `./fluxwing/components/password-input.md`
|
|
- `./fluxwing/components/submit-button.uxm`
|
|
- `./fluxwing/components/submit-button.md`
|
|
|
|
2. **Composite Component:**
|
|
- `./fluxwing/components/login-form.uxm`
|
|
- `./fluxwing/components/login-form.md`
|
|
|
|
3. **Screen:**
|
|
- `./fluxwing/screens/login-screen.uxm`
|
|
- `./fluxwing/screens/login-screen.md`
|
|
- `./fluxwing/screens/login-screen.rendered.md`
|
|
|
|
### Output: login-form.uxm (composite)
|
|
|
|
```json
|
|
{
|
|
"id": "login-form",
|
|
"type": "form",
|
|
"version": "1.0.0",
|
|
"metadata": {
|
|
"name": "Login Form",
|
|
"description": "A form container for collecting user input. Login form",
|
|
"category": "utility"
|
|
},
|
|
"props": {
|
|
"title": "Sign In",
|
|
"components": [
|
|
{ "id": "email-input", "slot": "field-1" },
|
|
{ "id": "password-input", "slot": "field-2" },
|
|
{ "id": "submit-button", "slot": "action" }
|
|
]
|
|
},
|
|
"ascii": {
|
|
"templateFile": "login-form.md",
|
|
"width": 50,
|
|
"height": 20,
|
|
"variables": [
|
|
{
|
|
"name": "title",
|
|
"type": "string",
|
|
"required": true,
|
|
"default": "Sign In",
|
|
"description": "Form title"
|
|
}
|
|
]
|
|
}
|
|
}
|
|
```
|
|
|
|
### Output: login-form.md (composite)
|
|
|
|
```markdown
|
|
# Login Form
|
|
|
|
A form container for collecting user input. Login form
|
|
|
|
## Default State
|
|
|
|
```
|
|
╭────────────────────────────────────────────────╮
|
|
│ Sign In │
|
|
├────────────────────────────────────────────────┤
|
|
│ │
|
|
│ {{component:email-input}} │
|
|
│ │
|
|
│ {{component:password-input}} │
|
|
│ │
|
|
│ {{component:submit-button}} │
|
|
│ │
|
|
╰────────────────────────────────────────────────╯
|
|
```
|
|
|
|
## Variables
|
|
|
|
- `title` (string, required): Form title
|
|
- Default: "Sign In"
|
|
|
|
## Accessibility
|
|
|
|
- **Role**: form
|
|
- **Focusable**: No
|
|
- **ARIA Label**: Login form
|
|
|
|
---
|
|
*Generated by Fluxwing Screenshot Import*
|
|
```
|
|
|
|
### Output: login-screen.rendered.md
|
|
|
|
```markdown
|
|
# Login Screen
|
|
|
|
User authentication screen with email/password inputs
|
|
|
|
## Rendered Example
|
|
|
|
```
|
|
╭────────────────────────────────────────────────╮
|
|
│ Sign In │
|
|
├────────────────────────────────────────────────┤
|
|
│ │
|
|
│ ┌──────────────────────────────────────┐ │
|
|
│ │ Email │ │
|
|
│ │ john.doe@example.com │ │
|
|
│ └──────────────────────────────────────┘ │
|
|
│ │
|
|
│ ┌──────────────────────────────────────┐ │
|
|
│ │ Password │ │
|
|
│ │ •••••••• │ │
|
|
│ └──────────────────────────────────────┘ │
|
|
│ │
|
|
│ ╭──────────────────╮ │
|
|
│ │▓▓▓▓Sign In▓▓▓▓▓▓▓│ │
|
|
│ ╰──────────────────╯ │
|
|
│ │
|
|
╰────────────────────────────────────────────────╯
|
|
```
|
|
|
|
**Example Data:**
|
|
- Email: john.doe@example.com
|
|
- Password: ••••••••
|
|
- Button: Sign In
|
|
|
|
**Actions:**
|
|
- Submit form → authenticate user
|
|
- Focus management → email → password → button
|
|
|
|
## Components Used
|
|
|
|
- `email-input` - Email Input (input)
|
|
- `password-input` - Password Input (input)
|
|
- `submit-button` - Submit Button (button)
|
|
- `login-form` - Login Form (form)
|
|
|
|
---
|
|
*Generated by Fluxwing Screenshot Import*
|
|
```
|
|
|
|
---
|
|
|
|
## Example 4: Checkbox Component
|
|
|
|
### Input: Vision Analysis Data
|
|
|
|
```json
|
|
{
|
|
"id": "remember-me-checkbox",
|
|
"type": "checkbox",
|
|
"category": "atomic",
|
|
"visualProperties": {
|
|
"width": 20,
|
|
"height": 1,
|
|
"borderStyle": "none",
|
|
"textContent": "Remember me"
|
|
},
|
|
"states": ["default", "checked", "disabled"],
|
|
"accessibility": {
|
|
"role": "checkbox",
|
|
"label": "Remember login credentials"
|
|
}
|
|
}
|
|
```
|
|
|
|
### Output: remember-me-checkbox.md
|
|
|
|
```markdown
|
|
# Remember Me Checkbox
|
|
|
|
A checkbox input for boolean selection. Remember login credentials
|
|
|
|
## Default State
|
|
|
|
```
|
|
[ ] Remember me
|
|
```
|
|
|
|
## Checked State
|
|
|
|
```
|
|
[✓] Remember me
|
|
```
|
|
|
|
## Disabled State
|
|
|
|
```
|
|
[─] Remember me
|
|
```
|
|
|
|
## Variables
|
|
|
|
- `text` (string, required): checkbox label text
|
|
- Default: "Remember me"
|
|
|
|
## Accessibility
|
|
|
|
- **Role**: checkbox
|
|
- **Focusable**: Yes
|
|
- **Keyboard Support**: Space
|
|
- **ARIA Label**: Remember login credentials
|
|
|
|
---
|
|
*Generated by Fluxwing Screenshot Import*
|
|
```
|
|
|
|
---
|
|
|
|
## Example 5: Badge Component
|
|
|
|
### Input: Vision Analysis Data
|
|
|
|
```json
|
|
{
|
|
"id": "new-badge",
|
|
"type": "badge",
|
|
"category": "atomic",
|
|
"visualProperties": {
|
|
"width": 8,
|
|
"height": 1,
|
|
"borderStyle": "none",
|
|
"textContent": "New"
|
|
},
|
|
"states": ["default"],
|
|
"accessibility": {
|
|
"role": "status",
|
|
"label": "New item indicator"
|
|
}
|
|
}
|
|
```
|
|
|
|
### Output: new-badge.md
|
|
|
|
```markdown
|
|
# New Badge
|
|
|
|
A small badge component for labels or counts. New item indicator
|
|
|
|
## Default State
|
|
|
|
```
|
|
▓ New ▓
|
|
```
|
|
|
|
## Variables
|
|
|
|
- `text` (string, required): badge label text
|
|
- Default: "New"
|
|
|
|
## Accessibility
|
|
|
|
- **Role**: status
|
|
- **Focusable**: No
|
|
- **ARIA Label**: New item indicator
|
|
|
|
---
|
|
*Generated by Fluxwing Screenshot Import*
|
|
```
|
|
|
|
---
|
|
|
|
## Usage Patterns
|
|
|
|
### Pattern 1: Generate Single Atomic Component
|
|
|
|
```typescript
|
|
const timestamp = new Date().toISOString();
|
|
const uxmData = generateAtomicUXM(visionComponentData, timestamp);
|
|
const mdContent = generateAtomicMD(visionComponentData, uxmData);
|
|
await saveAtomicComponent(componentId, uxmData, mdContent);
|
|
```
|
|
|
|
### Pattern 2: Generate All Components from Screen
|
|
|
|
```typescript
|
|
// 1. Generate atomics first
|
|
for (const atomicId of composition.atomicComponents) {
|
|
const componentData = components.find(c => c.id === atomicId);
|
|
await generateAtomicComponent(componentData);
|
|
}
|
|
|
|
// 2. Generate composites (can reference atomics)
|
|
for (const compositeId of composition.compositeComponents) {
|
|
const componentData = components.find(c => c.id === compositeId);
|
|
await generateCompositeComponent(componentData);
|
|
}
|
|
|
|
// 3. Generate screen (references everything)
|
|
await generateScreen(screenData, composition);
|
|
```
|
|
|
|
---
|
|
|
|
## Reference
|
|
|
|
These examples demonstrate the complete screenshot-to-uxscii workflow:
|
|
|
|
1. **Vision analysis** produces structured JSON
|
|
2. **Helper functions** (see screenshot-import-helpers.md) transform data
|
|
3. **ASCII generation** (see screenshot-import-ascii.md) creates visual representations
|
|
4. **File generation** produces valid .uxm + .md pairs
|
|
5. **Validation** ensures quality and schema compliance
|
|
|
|
All generated files conform to:
|
|
- `fluxwing/data/schema/uxm-component.schema.json` - JSON Schema
|
|
- Quality standards documented in the schema
|