/
© 2026 RiffOn. All rights reserved.
  1. Behind the Craft
  2. A Proven 5-Step System to Prototype Apps with AI | Xinran Ma
A Proven 5-Step System to Prototype Apps with AI | Xinran Ma

A Proven 5-Step System to Prototype Apps with AI | Xinran Ma

Behind the Craft · Nov 30, 2025

Xinran shares 5 'Vibe Designing' tips to overcome AI coding tool limitations, focusing on exploration, iteration, and creating unique designs.

Generate Multiple Design Variants Simultaneously to Accelerate Brainstorming

To break out of a linear design path, use AI tools that can generate multiple, distinct design options from a single prompt or command. For example, Magic Patterns’ '/inspiration' command produces four variants, allowing for rapid brainstorming and side-by-side comparison of different approaches.

A Proven 5-Step System to Prototype Apps with AI | Xinran Ma thumbnail

A Proven 5-Step System to Prototype Apps with AI | Xinran Ma

Behind the Craft·3 months ago

Bridge AI and Manual Workflows with Tools that Toggle Between Prompting and Design Modes

The handoff between AI generation and manual refinement is a major friction point. Tools like Subframe solve this by allowing users to seamlessly switch between an 'Ask AI' mode for generative tasks and a 'Design' mode for manual, Figma-like adjustments on the same canvas.

A Proven 5-Step System to Prototype Apps with AI | Xinran Ma thumbnail

A Proven 5-Step System to Prototype Apps with AI | Xinran Ma

Behind the Craft·3 months ago

Combine AI Prototype Components by Dragging and Dropping Between Different Variants

AI often generates several good ideas across multiple prototypes. Instead of recreating them manually, use a tool like Subframe that allows you to directly drag and drop components from one AI-generated variant into another. This 'kitbashing' approach accelerates the creation of a polished design.

A Proven 5-Step System to Prototype Apps with AI | Xinran Ma thumbnail

A Proven 5-Step System to Prototype Apps with AI | Xinran Ma

Behind the Craft·3 months ago

Use Canvas-Based AI Tools like Magic Patterns to Overcome Linear Prototyping Workflows

Standard AI coding tools force a linear A-to-B iteration process, which stifles the divergent thinking essential for design exploration. Tools with a 'canvas' feature allow designers to visualize, track, and branch off multiple design paths simultaneously, better mirroring the creative process.

A Proven 5-Step System to Prototype Apps with AI | Xinran Ma thumbnail

A Proven 5-Step System to Prototype Apps with AI | Xinran Ma

Behind the Craft·3 months ago

Use a Custom GPT to Structure Your First AI Design Prompt and Avoid Wasted Iterations

Many users blame AI tools for generic designs when the real issue is a poorly defined initial prompt. Using a preparatory GPT to outline user goals, needs, and flows ensures a strong starting point, preventing the costly and circular revisions that stem from a vague beginning.

A Proven 5-Step System to Prototype Apps with AI | Xinran Ma thumbnail

A Proven 5-Step System to Prototype Apps with AI | Xinran Ma

Behind the Craft·3 months ago

Create Unique AI Designs by Reverse-Prompting a Custom Design System

To avoid generic, 'purple AI slop' UIs, create a custom design system for your AI tool. Use 'reverse prompting': feed an LLM like ChatGPT screenshots of a target app (e.g., Uber) and ask it to extrapolate the foundational design system (colors, typography). Use this output as a custom instruction.

A Proven 5-Step System to Prototype Apps with AI | Xinran Ma thumbnail

A Proven 5-Step System to Prototype Apps with AI | Xinran Ma

Behind the Craft·3 months ago

Pair a Custom Instruction 'Why' with a Component Library 'What' for Optimal AI Design

A custom instruction defines your design system's principles (e.g., spacing, color), but it's most effective when paired with a pre-defined component library (e.g., buttons). The instruction tells the AI *how* to arrange things, while the library provides the consistent building blocks, yielding more coherent results.

A Proven 5-Step System to Prototype Apps with AI | Xinran Ma thumbnail

A Proven 5-Step System to Prototype Apps with AI | Xinran Ma

Behind the Craft·3 months ago