# Harriet iOS experience concept

A static HTML presentation and 20 rendered iPhone screens based on the Harriet MVP interview.

## Open the presentation

- Public presentation: <https://harriet.tail669f5.ts.net/>
- Public screen gallery: <https://harriet.tail669f5.ts.net/gallery.html>
- Static ZIP export: <https://harriet.tail669f5.ts.net/downloads/harriet-ios-ux-concept-static.zip>
- Live client concept index: <https://harriet.tail669f5.ts.net/clients.html>
- Drei Stuben client concept: <https://harriet.tail669f5.ts.net/drei-stuben/>
- Café 1842 client concept: <https://harriet.tail669f5.ts.net/cafe-1842/>
- Kafischnaps client concept: <https://harriet.tail669f5.ts.net/kafischnaps/>
- Azzurro client concept: <https://harriet.tail669f5.ts.net/azzurro/>
- Local files: [`index.html`](index.html) and [`gallery.html`](gallery.html)

Tailscale Funnel currently exposes this static directory publicly. Visitors do not need to belong to the tailnet. Disable public access on the Harriet server with:

```bash
sudo tailscale funnel --https=443 off
```

## Screens

1. `01-handoff.png` — migrated website invitation and value summary
2. `02-home.png` — website status and primary request entry point
3. `03-conversation.png` — conversational website update
4. `04-progress.png` — non-technical agent progress
5. `05-review.png` — visual preview and owner approval gate
6. `06-published.png` — successful production deployment
7. `07-history.png` — plain-language Git-backed revision history
8. `08-care.png` — website health and optional improvements
9. `09-welcome.png` — first launch and invitation entry
10. `10-hosting.png` — customer-owned hosting selection
11. `11-launch.png` — domain and DNS launch checklist
12. `12-quick-requests.png` — library of common business requests
13. `13-voice.png` — voice request with editable transcript
14. `14-photos.png` — photo attachment and preparation flow
15. `15-clarify.png` — focused clarification question
16. `16-requests.png` — working, ready, and published request inbox
17. `17-request-detail.png` — request activity and checks
18. `18-restore.png` — earlier revision preview and restoration
19. `19-settings.png` — domain, hosting, source, and export settings
20. `20-language.png` — English, Bulgarian, and German selection

Rendered images are under [`assets/screens/`](assets/screens/). The screen source is [`mockups.html`](mockups.html); select an artboard with a query such as `mockups.html?screen=review`.

## Design direction

**Calm, capable colleague.** Harriet uses warm editorial typography, deep green, lime, and coral to feel trustworthy and human rather than like a developer tool or generic AI chatbot.

The concept deliberately encodes current MVP decisions:

- Native iPhone-first experience
- Natural-language and voice requests
- Outcome-oriented progress instead of terminal output
- Visual review before every production deployment
- Git-backed revision history and restoration
- Customer ownership and no lock-in
- Optional proactive accessibility, SEO, and performance improvements

## Running locally

From this directory:

```bash
python3 -m http.server 8788
```

Then open <http://127.0.0.1:8788/>.
