Check connected HTML against selected structure, accessibility, design-system, and broken-reference categories, then emit a report and optional fixed HTML.
Where: Flowgen → Add → Website → Validation
Key ideas
- Technical categories: Select Structure, Accessibility, Design System, and Broken Refs independently in the card or properties sidebar.
- Report and fixed output: The node emits a text report and an HTML output; Auto-fix becomes available for issues the validation result can address.
- Versioned checks: Each run keeps its issues, score, fixed HTML/CSS, and timestamp so later changes can be compared.
- Validation card: ValidationNode uses the generic shared-card path. Validate HTML for selected technical categories and optionally emit an auto-fixed version.
- Properties sidebar: genOutputNodes.tsx
- Opened surfaces: HTML preview; version history
Steps
- Connect HTML to Validate and, for design-system checking, the relevant Design System.
- Choose the validation categories and run Validate.
- Inspect every error, warning, and informational issue in context.
- Use Auto-fix only for suitable issues, preview the fixed output, and rerun validation before continuing.
Validation controls and presets
- Add path: Flowgen → Add → Website → Validation.
- Card: ValidationNode.
- Properties: genOutputNodes.tsx.
- Controls: Structure; Accessibility; Design System; Broken Refs; issues/score; Validate; Auto-fix.
- Opened surfaces: HTML preview; version history.
Tips
- Treat an improved score as a signal to inspect the changed output, not automatic approval.
- Keep the design-system input connected when consistency matters.
Limitations and important notes
- Automated validation does not replace keyboard, screen-reader, responsive, content, security, or real-browser review.
Troubleshooting
Auto-fix changed the intended design
Return to the prior version, address only the relevant issues upstream, and validate again.