Overview
We built a no-code and AI-assisted builder that empowers non-technical staff to create and publish custom forms, pages, and UI changes, while routing every AI-generated feature through the existing development workflow with pull requests, lint and test gates, and human approval. We delivered a platform that pairs drag-and-drop speed with the guardrails of draft-to-publish approvals, version history, rollback, role-gating, and audit trails so teams move fast without sacrificing safety.
Challenges
- Non-technical staff had no safe way to build and publish forms or pages without pulling developers into every small request.
- AI-generated code risked bypassing review entirely, reaching production without pull requests, lint and test checks, or human sign-off.
- Public forms were exposed to abuse and spam with no rate limiting or CAPTCHA protection in place.
- Anyone could publish changes with no separation between who builds a draft and who is authorized to approve and release it.
- Bad releases could go live with no draft, preview, version history, or rollback path to recover from a mistake.
- Tenant safety was at risk without tenant-aware templates, migration review, feature flags, and scoped roles around generated changes.
- Ad-hoc UI edits caused styling drift, broken brand consistency, and accessibility issues with no design-token or contrast enforcement.
- Staff making small copy, label, color, or visibility tweaks risked accidentally altering schema or business logic.
- Low-confidence AI outputs could proceed silently without being flagged for the extra human review they needed.
Solution highlights
- Built a drag-and-drop form builder supporting text, number, select, date, and file inputs with validation, conditional logic, and repeaters.
- Created a simple page composer using reusable sections such as hero, two-column layouts, card grids, and CTA blocks, with preview, responsive defaults, and existing design tokens.
- Implemented tenant-level schema storage with auto-generated routes and React views for every saved builder schema.
- Delivered a publish and unpublish workflow with version history, rollback, builder and approver roles, and an audit log for all published changes.
- Added tenant-scoped data capture for submissions with optional email notifications, CSV export, rate limiting, and CAPTCHA for public forms.
- Turned natural-language feature requests into structured implementation plans covering models, endpoints, routes, UI, and a test matrix.
- Generated AI scaffolding for backend models, serializers, views, URLs, and migrations plus frontend routes, components, types, forms, API hooks, and tests, gated by lint and test quality checks.
- Wired AI output into the existing development workflow with diff summaries, branch naming, status tracking, and pull requests, backed by generation run logs, prompts, artifacts, and confidence signals.
- Built a UI customizer for copy, labels, icons, colors, spacing, visibility toggles, cards, and sections with draft, preview, publish, rollback, role-gating, change logs, design-token enforcement, and contrast checks.
Outcomes
- Non-technical staff can now create and publish forms and pages on their own, without queuing up direct developer work for every change.
- Feature delivery moves faster because most implementation scaffolding is generated automatically while developers still review what ships.
- Every release is safer thanks to draft-to-publish approval, version history, rollback, role-gating, and full audit trails.
- New forms and pages stay visually consistent by reusing existing design tokens, shared components, responsive defaults, previews, and theme hooks.
- Submissions are captured per tenant with optional notifications and CSV export, giving teams reliable, organized data capture.
- AI-generated code reaches production trustworthy and reviewable, never bypassing pull requests, lint and test gates, or human approval.
- Teams gain clear observability into generation through stored logs, prompts, artifacts, and status tracking.
- Staff can make safe copy, label, icon, color, spacing, and visibility tweaks without ever touching business logic or schema.
- Accessibility and brand consistency improve through contrast checks, design-token limits, and disallowed-CSS controls, with low-confidence outputs flagged for extra review.