Bridging the gap with content partners
Helping content contributors preview and format copy for AI tools—without needing to know code.
Summary
This project addresses a frequent friction between content contributors, designers, and developers: content provided as free-form text often lacks the structured formatting needed for consistent layouts and effective AI training. Recognizing the broader value of proactively leveraging AI, I took initiative beyond traditional ideation by building a tangible, functional software solution. This real-time formatting and preview tool blends AI-driven automation with intuitive editing, enabling contributors to write naturally while ensuring content is structurally sound and presentation-ready.
The development of this tool exemplifies a forward-thinking UX workflow—one where hearing about challenges within the team inspires immediate problem-solving through the rapid prototyping capabilities offered by modern AI tools. This approach demonstrates not just conceptual thinking but the essential drive and ability to transform ideas into concrete, usable software solutions quickly.
The challenge
Our team needed content that was clean, structured, and formatting-ready for use in bot training and in-app responses. But most content contributors were writing in long-form prose—understandable, but misaligned with the needs of structured interfaces.
- Inconsistent outputs in production tools
- Manual rework by design and dev teams
- A tricky balancing act between creative freedom and technical constraints
Process & approach
Identifying the Need: I recognized that contributors struggled to predict how their content would render in structured AI interfaces, leading to workflow inefficiencies.
Early Prototyping: I created a straightforward editor allowing users to paste content and immediately visualize it in various structured formats, bridging the gap between raw content and its final representation.
Iterative Refinement: After initial user testing, I incorporated critical feedback to enhance the tool. This included:
- Adding export capabilities, enabling users to capture and share visual snapshots of content previews.
- Implementing AI tabs with predefined system prompts to automate repetitive formatting tasks, significantly reducing manual editing effort.
- Streamlining user inputs for configuring API keys and adjusting model parameters such as temperature ranges, empowering contributors with greater control over AI-assisted outputs.
Technical Architecture
Entirely client-side, this web application leverages:
Frontend: HTML, CSS, JavaScript (Next.js and React in later iterations).
AI APIs: Integrations with OpenAI and Claude, configurable by users with secure, browser-stored API keys.
Deployment: Hosted via Vercel, ensuring lightweight infrastructure and data privacy.
Key features
Rich Text & File Import: Integrated Quill.js editor for direct text entry, with support for importing .docx (parsed via Mammoth.js) and .xlsx files (parsed via SheetJS).
Flexible Format Previews: Instantly switch views between HTML, Markdown, and styled "card" components, using libraries like Showdown.js, Markdown-it, and Prism.js for syntax highlighting.
AI-Enhanced Structuring Workflow:
Step 1: The AI automatically applies a structured format (like converting paragraphs into ordered/unordered lists or defining headers), guided by a built-in system prompt tailored to the desired content structure.
Step 2: Further AI processing checks additional structural requirements, ensuring consistent display and readability across the experience. This multi-step workflow allows contributors to focus on content, while AI ensures uniformity and structural integrity.
This approach lets content experts freely produce text while offloading all structured formatting responsibilities to AI, achieving consistency and user-friendliness simultaneously.
Live Card Rendering: Real-time visual previews of content in various card templates, exportable as PNG images via html2canvas.
Seamless Export & Clipboard Integration: Easy copy-to-clipboard functionality and direct downloads for quick integration elsewhere.
Collaboration & use cases
This tool wasn't rolled out org-wide—but it proved helpful to a small network of product-area content collaborators. They used it to:
- Preview chatbot responses and content blocks
- Format their writing to reduce dev handoffs
- Better understand design-system guardrails without formal training
It also made internal reviews faster by catching issues early.
Outcome & reflection
While lightweight, the tool solved a real problem for a very specific audience—and helped smooth collaboration across design, content, and dev teams.
It also demonstrated how designers can ship quick, scrappy utilities to support cross-functional work—without needing to spin up a full product cycle.
Opportunities for Expansion
- Additional file type integrations (PDF)
- Advanced AI features like content summarization or tone adjustments
- Backend integrations for collaborative content management