Build From Scratch, Using AI
Goal: Create a brand new publishing/literacy support application from scratch. Build it incredibly fast, using artificial intelligence and a very lean process.
My Roles: Product designer, researcher, strategist, AI Engineer.
Impact: Product spun up from a blinking cursor to beta in weeks, ready for public launch.
Storyaliz
Storyaliz has a complex mission - as people read less, they want to make reading as binge-able as movies, as fun as social media and as accessible as anything else online.
Situation
The content and social scroll on the Storyaliz web app.
Task
Starting from just a concept, design the product, and then implement it.
Design went through three phases:
-
Ideation
-
Design
-
Implementation using AI
Actions
Ideation
We needed a user experience for web and mobile that would work equally well with tweens and adults that would
-
Foster binge reading
-
Include a social engagement feature (that we would subtly but effectively nudfe users to use
-
Gamify the user's progress enough to engage users of all ages without getting in the way of reading
-
Have an engaging user experience
-
Since home schools were a key market, allow. parental control
-
Be implementable and maintainable with AI coding tools, while not succumbing to the user problems with AI-generated software, and above al not looking like AI software.
It was a tall order.
I decided to let other companies' research do some of the work for us, and use as an example other products that foster binge-consumption. I ran with a basic interaction model patterned after "X", featuring:
-
A "Scroll" page that would be an endless timeline of story releases, user comments and gamification achievements.
-
A "Shelf" that would include stories the user was reading, had liked, or were part the library of any "group" they were in
-
A Search function that use a large language model to help users find stories they were interested in
-
Pages for user profile, account and gamification standings
-
And, most important (and difficult) of all, a "Read" page allowing users to binge-read stories in 3-5 minute chunks while participating in social engagement using direct interaction with the text.
The "read" page, including a comment from our patent-pending social interaction system.
Design
I created a simple, effective atomic design system in Figma.
Why not use artificial intelligence for this part?
Because AI is, at this point, either reliably consistent nor accountably traceable. We wanted to have a "Gold standard" to fall back on when AI wavered off track.
As it did. Frequently.
But using the design system, I was able to come up with some design archtypes that we were able to feed into our development LLM as steady, reliable baselines.
Elements from our design system. With thorough annotation, it held up to a LOT of churn in AI without breaking down.
A page archetype. . Given to Claude AI as a baseline prototype of a page, it set the standards for layout, responsiveness and other constants that we didn't want to break down over time.
Implementation
Implementation was a completely new experience; rather than feeding designs to a group of engineers, I worked with one engineer and Claude AI. The engineer used the LLM to build the back end. I built the entire user experience and UI myself using Claude, VSCode and a series of Github repositories.
The tricky part? Getting solid, consistent, scalable, maintainable, testable results. While the sizzle copy about AI discusses "building entire apps in an afternoon with a single prompt", we use a process that leveraged Claude's analytic strength to give us code that we could actually maintain over time.
-
Write out the requiements. My background in technical writing helped a lot.
-
Use the LLM to generate a Product Requirement Document. Review it carefully .
-
Use the PRD to generate an Architecture Specification, defining the application architecture. The PRD and Architecture provide guardrails that help prevent hallucination and creep, and maintains a context that guides the LLM's development efforts.
-
Use the documents above to create Task Lists - essentially ensuring the traceability of the development effort.
While this was a little slower than the myth about "vibe coding", it made the code robust, maintanable and manageable.
Results
Storyaliz, with the UX designed using a hybrid of manual and AI techniques and implemented with bleeding-edge AI tools grounded in software engineering principles, is currently in a very successful beta release.