A designer’s 2026 workflow uses Fable, MCP, and Sketch to speed up prototype design
michalmalewicz · x · 2026-07-21
A designer shared a detailed 2026 workflow built around AI tools for product design and prototyping.
Workflow outline
- Gather requirements and do competitive analysis.
- Write user stories.
- Turn user stories into a flow diagram with Fable.
- Manually annotate the diagram to fix AI mistakes and specify UI elements.
- Export the annotated flow as JSON and use Fable to generate HTML/CSS prototypes, including custom Markdown files for lo-fi styling and navigation.
- Test the clickable prototype.
- Make manual code tweaks in the HTML.
- Import the HTML into Sketch via MCP as frames.
- Do the high-fidelity design in Sketch.
- Export styles back for developers.
Takeaway
The author says this workflow is about knowing where AI helps with repetitive work and where humans still need to define structure and remove slop. They also say they plan to release the internal tool behind steps 2–6 as a buy-once, self-deployable product.
More from Apps
- Whop launches a CLI so businesses can be run programmatically from the terminal — eptwts · 2026-07-21
- Business chatbots should add RAG only when answers depend on company-specific documents — recro69 · 2026-07-21
- HandoffAI says its H1 model can automate construction takeoffs like a human estimator — ycombinator · 2026-07-21
- A privacy email provider is building email for AI agents, with JMAP, PoW signups and 2,000 accounts — Atomic_Ke · 2026-07-21
- Open-source PenEcho AI whiteboard now renders interactive animated explanations — Civil-Direction-6981 · 2026-07-21
- Gamma demo imagines an AI tutor that adapts to each student in real time — ahuja_priyank · 2026-07-21