Non-Designer PM in AI Era: Mastering Vibe Design & Generative UI

AIGC: A Seismic Shift in Production

AIGC (AI Generated Content) is not merely AI writing copy or drawing images; it fundamentally lowers the barrier of content production to near zero. The author traces three stages: PGC (professional production, high cost/slow), UGC (user-generated, lower barrier but variable quality), and AIGC where the "human doing" step is bypassed. Earlier AI acted as an advisor; AIGC-era AI acts as an executor delivering finished assets—images, video, music, UI, copy, code—in one click.

Two real-world cases illustrate the shift:

Case 1: BaWang ChaJi × DeepSeek – For Valentine's Day, DeepSeek generated bespoke poems for each tea product, weaving ingredients, taste, and cultural meaning into verses that felt human. Social engagement surged 200%. The insight: AIGC can produce "content with feeling," and that feeling is the new value.

Case 2: Jimeng AI × "Sanxingdui: Future Revelation" – ByteDance's Jimeng AI co-produced a sci-fi short drama with Bona Film Group. Ten AIGC technologies handled script, concept art, storyboards, image-to-video, and editing. A project that once required hundreds of people was done by a small team. Production speed, cost, and barrier changed fundamentally.

Vibe Design: Does the Product Have a Soul?

The term "Vibe" (Vibe Coding, Vibe Design, Vibe Marketing) signals that the boundary of "I can't" is disappearing. Vibe Coding means non-coders can build software; Vibe Design means non-designers can craft products that feel right. When everyone can build, "what was built" is no longer a differentiator—"how it feels" is.

Vibe Design marks a transition from static UI/UX (pixels, grids, predictable clicks) to dynamic, ambient human-machine relationships. Multimodal AI acts as a creative amplifier: humans provide intent via natural language, screenshots, or reference URLs; AI handles structural generation; humans retain intuitive control via drag-and-drop and fine-tuning.

In generative AI apps, user paths are non-deterministic. PMs must design atmosphere boundaries rather than fixed journeys:

Persona atmosphere : Is the AI an invisible efficient tool or a witty collaborative partner? (e.g., cold CLI vs. conversational assistant)

Trust/safety atmosphere : How does the system handle uncertainty or hallucination? A product that confidently fabricates fails; one that says "I'm 70% sure, please verify" builds a transparent, partner-like vibe.

Mainstream Vibe Design Tool Ecosystem (Four Camps)

Pure AI-native design canvas – Infinite canvas + input box; describe a feeling or business goal, feed a screenshot, get high-fidelity UI.

Interface-as-code – Describe look, layout, interaction in plain language; tool renders live front-end code in browser. Ideal for high-fidelity PM demos.

Full-stack closed loop (Vibe Coding/Design unified) – Tools that produce runnable apps with data flow and deployability.

Three Dimensions of Vibe Design

Breathing Rhythm (Speed as Art) – Streaming token-by-token output (like Claude) makes users feel the AI is "thinking," not "computing." A 5-second spinner then a wall of text feels like a database query; gradual output with pauses feels like human dialogue.

Persona Warmth (Tone Temperature) – Example: User says "I'm exhausted." No-vibe AI: bullet-point health tips. Vibe AI: "(sigh) Sounds really tough, want to tell me what's weighing on you?" The sigh and the invitation to share are deliberate product decisions defining the AI's persona—friend vs. consultant.

Vitality (Living Interface / Generative UI) – Interfaces are no longer fixed; they grow in real time per user need. 1,000 users see 1,000 different interfaces adapted to their context.

Generative UI: The Product Form That Gives Goosebumps

Generative UI gives Vibe Design real-time, per-user vitality, but requires atmosphere boundaries to prevent unconstrained freedom. The LLM outputs structured interface instructions alongside text; a front-end rendering engine weaves them into live components. The traditional PM–designer–developer chain (days) collapses into a single conversational loop.

Four Scenarios Contrasting No-Vibe vs. Vibe Generative UI

Loan Calculator – User: "30-year mortgage, monthly ≤ ¥8,000, how much can I borrow?" No-vibe: chat dump of formulas. Vibe: a live calculator panel slides in with sliders and charts; drag to adjust, numbers update instantly.

Emotional Companion – User at midnight: "Pressure's crushing me." No-vibe: ordered list of generic tips. Vibe: UI warms color palette, widens line spacing, AI replies softly, then grows three action cards—"Talk tonight?", "List worries", "Guided meditation"—like outstretched hands.

Child Learning – 8-year-old: "Why is the sky blue?" No-vibe: Rayleigh scattering text. Vibe: animation of white sunlight hitting atmosphere, blue waves scattering like playful fish; caption: "Blue light is the naughtiest, runs fastest, jumps everywhere!" Child says "Oh!" and asks next question.

Medical Triage – Elderly, mobility-impaired: "Stomach ache two days, what department?" No-vibe: list of internal medicine, surgery, gastro, ER differences. Vibe: single huge button "One-Tap Call Doctor"; no menus, no decisions needed.

Vibe Design + Vibe Coding: A Closed Loop

Core relationship: Vibe Design is the steering wheel and acceptance criteria for Vibe Coding. Without clear Vibe Design, Vibe Coding drifts in a sea of meaningless AI-generated code; without Vibe Coding, stunning Vibe Design remains a static, non-interactive image.

Traditional flow: PM writes PRD → Designer makes visuals → Developer codes. Huge cognitive gaps. Vibe era compresses this into an integrated agile loop:

Vibe Design (Soul & Definition – Input) – Define psychological field and human-machine relationship: empathy for pain points, defense of cognitive sovereignty, planning for dynamic adaptability. Example: "Ultra-simple voice triage for low-literacy elderly" → Goal: eliminate loneliness/anxiety; Atmosphere: extreme whitespace, breathing voice ripple, absolutely inclusive tone.

Vibe Coding (Flesh & Engineering – Output) – Use AI agents (Claude Code, Bolt.new) with high-frequency prompting to encode the defined feeling. Prompt: "Generate triage page. Visual: minimal, warm off-white, no complex menus. Center: giant green mic button with soft breathing glow. When AI speaks, show smooth water-ripple animation."

Iterate – Run, observe: animation too fast, prompt too stiff ("Please enter symptoms"). Vibe Design judges: "Too mechanical, oppressive for elderly." Vibe Coding corrects: "Slow animation 3×, make it breathe. Change prompt to: 'Grandpa, where does it hurt? Tell me, I'll help.'" AI instantly rewrites; atmosphere realigns.

What Can a Non-Designer PM Do Now?

Misconception: "Vibe Design is for designers." Reality: AI generates possibilities, not the right answer. Selecting the right answer from possibilities is the PM's job—based on user understanding, product temperament grasp, and perception of "what the user needs at this moment."

AIGC commoditizes both development and design speed. Features and visual styles are easily copied. What cannot be copied is temperament —the systemic, consistent, detail-deep DNA from first greeting to error handling to celebration to 3 AM companionship. That DNA is defined by the PM.

Practical Vibe Workflow for PMs

Collect Inspiration – Screenshot or copy URLs of interfaces matching your product's tone.

Visual Generation (Google Stitch / Visily) – Feed screenshots/URLs to extract design system; describe business scenes in natural language; get 3–5 key page prototypes.

Front-End Shell (v0 / Bolt.new) – Throw prototypes or screenshots to v0/Bolt; refine micro-interaction atmosphere via prompts (e.g., "typing animation like human thinking with breathing rhythm, perceived latency wrapped in smooth progressive bar"). Iterate through practice.

Seamless Handoff to Engineering – Deliver generated code or Figma links. No longer a hollow PRD, but a living, breathing demo with tuned rhythm.

The core of this flow is not tool mastery but clarity of business scenario: Who are the users? What is their context? What do they most need understood? What can they absolutely not tolerate?

Closing Thoughts

"In the AI era, engineers push the technical boundaries, but PMs must guard the temperature of technology."

Algorithms don't know "correct feeling." An LLM can generate 1,000 UI variants but doesn't know which one fits the user crying at 3 AM, or the non-tech-savvy elder who needs one giant button, or the newly unemployed person who needs "You did great today" more than five tips. Those judgments require human understanding, emotional perception, standing in the user's shoes—things AI cannot yet do. That is the PM's raison d'être. AIGC doesn't replace PMs; it frees them from "how to implement" to focus on "what to implement and with what feeling." When technical boundaries (context windows, token limits) are commoditized, the ultimate competitive advantage is the product's relationship with its human users. Whoever designs the most intuitive, respectful, empowering "vibe" wins.