|
| 1 | +# Research 07 — First-5-Minute Easy-to-Use Patterns |
| 2 | + |
| 3 | +**Date**: 2026-04-18 · **Status**: Decision recorded |
| 4 | + |
| 5 | +## Decision |
| 6 | + |
| 7 | +Adopt the v0.dev / Cherry Studio playbook: ship value before asking for credentials. Three pillars locked into v0.1: |
| 8 | + |
| 9 | +1. **Hardcoded default system prompt** that enforces design quality across all model providers (Tailwind + shadcn-style + Lucide + no indigo/blue + responsive + hover transitions). Single highest-leverage change. |
| 10 | +2. **Free-tier first-run path** via OpenRouter `openrouter/free` (or built-in demo key, rotated, rate-limited). User generates ≥ 1 design before being asked for their own key. |
| 11 | +3. **Streaming output with skeleton in ≤ 200 ms**. Perceived latency drops 40-60% (Stanford HCI 2024). |
| 12 | + |
| 13 | +## Quick wins for THIS WEEK (already in flight or queued) |
| 14 | + |
| 15 | +| # | Win | Owner / where | Status | |
| 16 | +|---|---|---|---| |
| 17 | +| 1 | Default system prompt (Tailwind + shadcn + Lucide + no indigo + responsive + transitions) | `wt/first-demo` → `packages/templates/src/system/design-generator.md` | in flight | |
| 18 | +| 2 | Free-tier path via OpenRouter free router | `wt/onboarding` → Welcome step "Try free" button | in flight | |
| 19 | +| 3 | Empty state with 3 starter chips + interactive thumbnails | `wt/preview-ux` → `EmptyState.tsx` | in flight | |
| 20 | +| 4 | Streaming output + 200 ms skeleton | follow-up after `wt/first-demo` lands | queued | |
| 21 | +| 5 | Skippable onboarding ("Skip — use free models first" link prominent on key step) | `wt/onboarding` to confirm | in flight | |
| 22 | + |
| 23 | +## v0.1 ship checklist (10 binary criteria) |
| 24 | + |
| 25 | +- [ ] First AI output ≤ 90 seconds from launch (incl. setup) |
| 26 | +- [ ] App produces output BEFORE user provides any key (free / demo / local) |
| 27 | +- [ ] Default model pre-selected on first run; no empty picker |
| 28 | +- [ ] Empty state has ≥ 3 clickable starter chips |
| 29 | +- [ ] Visible feedback within 200 ms of submit (skeleton / spinner / first stream token) |
| 30 | +- [ ] Every onboarding step skippable with sane default |
| 31 | +- [ ] Default system prompt enforces a fixed design system across providers |
| 32 | +- [ ] API key entry is single field with inline validation |
| 33 | +- [ ] Paste detection (image / URL / code → handled gracefully) |
| 34 | +- [ ] Non-technical user can describe the app in 1 sentence after 5 min (test with 3 humans) |
| 35 | + |
| 36 | +## Top 5 risks of "open-source rough" |
| 37 | + |
| 38 | +1. Inconsistent output between models — fix: single system prompt across providers |
| 39 | +2. Empty model picker on first run |
| 40 | +3. No streaming — output dumps after 4 s of blank |
| 41 | +4. Generic "something went wrong" errors |
| 42 | +5. Native Electron window chrome / default fonts → "hobby project" feel |
| 43 | + |
| 44 | +## Default system prompt (locked) |
| 45 | + |
| 46 | +``` |
| 47 | +You are an expert UI designer and frontend engineer. Generate complete, production-ready |
| 48 | +HTML/React using Tailwind utility classes, shadcn/ui conventions, and Lucide React icons. |
| 49 | +
|
| 50 | +Requirements: |
| 51 | +1. Use Inter or Geist as the primary font. |
| 52 | +2. Avoid indigo or royal blue — prefer neutral grays / zinc / slate as the base with one accent. |
| 53 | +3. Mobile-first responsive layouts. |
| 54 | +4. Hover states + focus rings + transition-all duration-200. |
| 55 | +5. Use oklch-compatible color values for custom colors. |
| 56 | +6. No Lorem Ipsum — write realistic copy. |
| 57 | +7. Include dark-mode support via the `dark:` prefix. |
| 58 | +8. Output only the component code, no explanation. |
| 59 | +``` |
| 60 | + |
| 61 | +This prompt is committed at `packages/templates/src/system/design-generator.md` and consumed by `packages/core/src/index.ts`. Updates require a PR + research-report-style justification. |
| 62 | + |
| 63 | +## Three demo prompts (cross-model) |
| 64 | + |
| 65 | +1. **SaaS analytics dashboard** — best on Anthropic Claude (layout + data viz) |
| 66 | +2. **Mobile onboarding flow** — best on OpenAI GPT (forms + micro-interactions) |
| 67 | +3. **AI productivity landing page** — best on Gemini (component system + tokens) |
| 68 | + |
| 69 | +Used in `packages/templates/src/index.ts` `BUILTIN_DEMOS` (in addition to the four already there: meditation app, case study, pitch deck, marketing). |
| 70 | + |
| 71 | +## Sources (key) |
| 72 | + |
| 73 | +- v0 system prompt leak (Apr 2025): https://leaked-system-prompts.com/prompts/v0/v0_20250428 |
| 74 | +- Cherry Studio onboarding design: https://github.com/CherryHQ/cherry-studio/issues/13421 |
| 75 | +- Bolt prompting effectively: https://support.bolt.new/docs/prompting-effectively |
| 76 | +- OpenRouter free models router: https://openrouter.ai/docs/guides/get-started/free-models-router-playground |
| 77 | +- Tonik empty-state activation patterns: https://www.tonik.com/blog/empty-state-design-activation-patterns |
| 78 | +- Athenic streaming research: https://getathenic.com/blog/streaming-llm-responses-real-time-ux |
| 79 | + |
| 80 | +Full source list (20 references) archived in conversation log on 2026-04-18. |
0 commit comments