A visual website builder for creating and refining web pages through a canvas-based editing experience.

Contributions

Product direction, product thinking, UX and UI design, visual editor, interaction systems, responsive behavior, styling controls, application shell, project workflows, AI and MCP capabilities, design-system foundations, and AI-assisted implementation.

About

Philosophr is a visual website builder that lets people create and refine web pages through a canvas-based editing experience, with AI-assisted workflows becoming an important part of the product.

The project explores how visual design, AI assistance, and working implementation can come together to help people move from an idea to a functioning, visually structured website without having to manage every implementation detail themselves.

Goals

The goal was to explore how website creation could become more visual, direct, and expressive by bringing design, AI assistance, and implementation closer together.

• Make website creation feel visual and direct, rather than requiring users to think primarily in code.
• Bring AI into the building workflow while keeping the resulting work understandable and controllable.
• Create a flexible editing experience that supports responsive layouts, styling, positioning, and visual refinement.
• Make the product feel coherent and approachable, from the application shell to the canvas and inspector.
• Build a working foundation that could be extended, rather than stopping at a static prototype.

Design Considerations

• Visual control over implementation. Users should be able to understand and manipulate the page through the canvas, while the underlying implementation remains consistent.
• Responsive behavior as a first-class concern. Breakpoints, root-frame geometry, snapping, and positioning needed to behave consistently across viewport sizes.
• Clear spatial relationships. Selection outlines, snap guides, pinning, layers, and containment should communicate what is actually happening on the canvas.
• Synchronized editing surfaces. The canvas, inspector, and layers panel should reflect the same active element and state.
• AI with visual awareness. AI should understand the project’s existing media, icons, styleguide, and visual direction before introducing new design elements.
• Design and implementation evolving together. Interaction details such as responsive overrides, styleguide inheritance, and project persistence required corresponding decisions in the underlying system.

Philosophr brought together visual design, AI-assisted development, and a working website builder. The challenge was not only to make the editor look right, but to make its behavior understandable, consistent, and controllable as users moved between the canvas, inspector, layers, and AI-assisted workflows.

Design and implementation

Philosophr was designed and built as one continuous product process. I shaped the product direction, designed the visual editor and its interaction systems, made decisions about how the builder should work, and used AI-assisted development to implement and refine the product. The work involved moving between product reasoning, UX, UI, implementation, and testing rather than treating them as separate stages.

Reflection

Building Philosophr reinforced that a visual editor is defined by its edge cases. Selection, snapping, responsive behavior, containment, and state synchronization are not secondary details. They are central to whether the product feels understandable and reliable. It also showed me how closely design and implementation are connected in complex tools, where a small UX expectation can require changes across the underlying system.