Article Editor with AI Generative UI
Our team spent too much time laying out blog articles by hand. Even with finished copy, someone had to assemble content blocks, choose layouts, adjust typography, resize elements, and place media. As we produced more marketing and product content, this work became a publishing bottleneck
The goal
Give the team a useful first layout they could edit.
AI would handle the repetitive composition work. The team would retain control over the article's structure, visual treatment, and final presentation.
A shared design system for AI and manual editing
I started by defining base design tokens, then semantic tokens for typography, color, spacing, corner radii, and layout. I applied them across the application, including buttons, forms, inputs, and interaction states.
Next, I built reusable components and defined rules for combining them into article layouts. The manual editor and AI used the same components and layout rules, so generated articles followed the same visual system as articles assembled by hand.
This was a central design decision. The design system gave the AI a defined set of components to compose and gave users familiar controls for refining its output.
The editing workflow
- Paste Markdown or rough content into the editor.
- Click Auto Layout.
- Review the generated composition, including typography, sizing, layout, and media placeholders.
- Refine the layout manually or insert specific components.
I kept the generated layout inside the editing workflow. Users could review and change it before publishing, without giving up the manual tools they already needed.
Shipping and results
I implemented the editor and AI-assisted layout workflow and shipped them to production.
The editor reduced the manual work required to prepare articles for publishing. It helped the team produce consistent layouts faster and spend more time on content quality and creative decisions. The design system also provided reusable components and tokens for the rest of the application.
The key product decision was where to apply AI. Article composition was repetitive enough to automate, while the final layout still needed human judgment. The editor supported both through the same components and controls.