这个想法源于一个月前Gemini 3.0刚发布的时刻。那天我对着书柜发呆，思考着能用Gemini 3.0开发什么样的应用。当我的目光在书柜上游离，逐渐聚焦时，眼中的这台积满灰尘的打字机给了我灵感。于是，一个想法应运而生——我能否借助Google AI Studio和Gemini 3.0所宣称的强大编程能力，开发一款打字机应用呢？

我先给大家分享一下我的提示词：

我想做个webapp：
1，整个界面是一个仿真界面，在一个桌子上摆放着一台 Olivetti牌的Valentine打字机，拟真，充满细节。旁边放着一盏台灯，点击台灯的灯泡可以打开灯泡或关闭灯泡，且打开灯泡就是light mode，关闭灯泡就是dark mode。
2，打字机的每一个按键分别对应键盘输入的案件，比如用户点击案件a，则输入a。输出界面是一张打印纸，会随着内容增多而显示越来越多。但是限定高度，在显示足够内容后会切换纸张。纸张会被放到打字机旁边的装纸的篮子上。
3，功能就是，用户输入内容，回车后，调用AI回答，AI回答内容会自动打印在纸上。默认使用Gemini。

一开始的外观并不如人意，在我提供图像参考，以及多次的对话矫正后，才实现了上图打字机的样子。

最后，经过16个小时的总耗时打磨，终于将这个WebApp打磨到了百分之80的进度。目前我已经将其部署到了Google AI Studio配套的Cloud Console里。体验链接如下：

Olivetti Valentine AI：沉浸式复古智能打字机 点击体验→

注意：因API KEYS收费，无法承担巨额费用，目前开放体验截止到12月15日。后续完成该项目后，我会分享到Github去。到时候我再放链接到这里。

我让AI回顾所有会话记录，总结下来给大家一份说明和提示词建议：

Olivetti Valentine AI：沉浸式复古智能打字机

—— 功能简介、用户手册与构建指南

第一部分：产品功能简介与用户说明书

1.1 产品概述

Olivetti Valentine AI 是一款基于 Web 的沉浸式仿真应用。它不仅仅是一个文本编辑器，更是一次向 1969 年 Ettore Sottsass 设计的经典红色 Olivetti Valentine 打字机致敬的数字化艺术体验。

该应用将复古的机械触感与现代生成式 AI（Google Gemini / DeepSeek）完美融合。用户置身于一张虚拟的书桌前，伴随着机械按键的敲击声、纸张的摩擦声和台灯的电流声，与 AI 进行一场跨越时空的对话。

1.2 核心功能详解

1. 极致的拟物化仿真体验 (Skeuomorphism)

  • 视觉仿真：应用采用了 CSS 高级阴影、渐变和纹理技术，完美还原了打字机的塑料光泽、按键的下凹冲程、纸张的粗糙纹理以及桌面的材质感。
  • 听觉仿真：摒弃了外部音频文件，完全使用 Web Audio API 实时合成声音。包括清脆的击键声、沉闷的空格声、回车换行的滑架声、撕纸声以及台灯发出的 60Hz 交流电底噪，提供 ASMR 级的听觉享受。
  • 物理交互：台灯开关需要下拉拉绳，温度计可以拖拽，抽屉可以拉开，废纸篓里的纸团可以物理堆积。

2. 智能 AI 协作 (The Ghost in the Machine)

  • 对话模式：用户在打字机上输入文字，按下回车键，AI 会模拟打字机的击键速度，逐字逐句地将回复“打印”在纸上。
  • 双模型支持：内置 Google Gemini (Flash/Pro) 和 DeepSeek (Chat/Reasoner) 模型，用户可根据需求切换。
  • 数字/机械模式切换：
  • 机械模式：纯粹的打字机体验，按键直接上纸。
  • 数字模式：提供一个现代化的绿色 CRT 风格输入缓冲区的“显示屏”，允许用户编辑长文本后一次性发送给 AI。

3. 丰富的桌面配件系统

  • 多款复古设备 (Settings)：用于配置 API Key 的界面被伪装成经典的 PDA 设备。用户可在 Apple Newton MessagePad、Sony Ericsson P900、BlackBerry Passport、Sony Vaio UX Micro 和 Palm Treo 700 之间切换，每一款都有独特的 UI 和交互音效。
  • 拍立得相机 (Image Gen)：桌面放置了一台拍立得相机（支持切换 I-2, OneStep, SX-70 等 5 种款式）。用户输入提示词，相机闪光灯亮起，吐出一张照片，照片会在几秒钟内通过 CSS 动画慢慢“显影”。
  • 温度计 (Creativity Control)：一个物理温度计挂件，用户可以通过拖动液柱高度来调整 AI 的“温度”（Temperature），从而控制回答的严谨度或创造力。

4. 个性化定制 (The Drawer)

  • 底部抽屉拉开后，用户可以自定义工作环境：
  • 台灯风格：工业风、银行家台灯、Pixar 工作室灯、复古球形灯、现代 LED 灯。
  • 桌面材质：胡桃木、钢化玻璃、哑光黑、大理石、混凝土。
  • 设备样式：切换用于设置的 PDA 样式。
  • 相机样式：切换文生图相机的外观。

5. 文件管理系统

  • 成品纸堆：打满的纸张或生成的照片会自动飞入右侧的纸堆。用户可以点击展开网格视图，查看、下载（Markdown 或 PNG）或丢弃。
  • 废纸篓：被丢弃的纸张会变成揉皱的纸团扔进废纸篓，支持从废纸篓恢复或永久销毁。

1.3 用户操作指南

  • 启动与开灯：进入网页，点击台灯的拉绳（或触摸开关）点亮桌面。你会听到电流的嗡嗡声。
  • 配置密钥：点击桌面左侧的 PDA 设备（默认为 Apple Newton），输入你的 Google Gemini 或 DeepSeek API Key 并保存。设备支持拖拽移动。
  • 开始写作：点击打字机键盘或直接使用物理键盘输入。
  • 换行：按 Enter 键。
  • 呼叫 AI：在机械模式下，输入问题后等待（或按红色的特殊功能键）；在数字模式下，点击发送按钮。
  • 生成图片：点击右上角的 拍立得相机 快门，输入画面描述，等待照片显影。
  • 调整环境：点击屏幕底部的把手打开抽屉，更换你喜欢的台灯或桌面。
  • 保存作品：点击右侧的纸堆，在弹出的视图中选择下载为图片或 Markdown 文档。

第二部分：App 构建过程解析

构建这样一个高度拟物化且功能复杂的 Web App，主要经历了以下几个技术阶段：

2.1 技术栈选择

  • 核心框架：React 18 (使用 Hooks 管理复杂的交互状态)。
  • 样式引擎：Tailwind CSS (利用其强大的 Utility classes 实现复杂的阴影、渐变和动画)。
  • 逻辑处理：TypeScript (确保类型安全，特别是对于 API 响应和配置对象)。
  • 音频引擎：Web Audio API (原生 API，零素材加载，实时合成音效)。
  • AI 接入：Google GenAI SDK (@google/genai) 和 Fetch API (用于 DeepSeek)。
  • 工具库：html2canvas (网页截图)、marked (Markdown 渲染)。

2.2 关键模块实现

1. 拟物化视觉构建 (CSS Art)

  • 光影实现：不使用 3D 建模，而是通过 CSS 的 box-shadow (多重内阴影与外阴影叠加) 和 linear-gradient/radial-gradient 来模拟物体的体积感。例如，打字机按键的凹陷感是通过 inset 阴影实现的；台灯的光照效果是通过 mix-blend-mode: screen 混合模式叠加径向渐变实现的。
  • 纹理生成：使用了 SVG Filter (feTurbulence) 生成噪点纹理，叠加在纯色背景上，模拟纸张的粗糙感、木纹的纹理和塑料的磨砂感。

2. 音频合成服务 (soundService.ts)

  • 这是一个纯代码实现的音效引擎。
  • 击键声：使用 createBufferSource 生成一段白噪声，配合高通滤波器模拟机械撞击的高频部分；同时使用 Oscillator 生成一段极短的低频三角波，模拟底盘共振的“咚”声。
  • 电机声：使用锯齿波振荡器，配合 GainNode 的线性渐变（LinearRamp）来实现电机启动时的频率爬升（Spool up）和停止时的频率下降。

3. 打字机逻辑核心 (Typewriter.tsx)

  • 笔画级渲染：为了模拟打字机的真实感，文字不是作为纯字符串渲染的，而是作为一个二维数组 Stroke[][]。每个字符都是一个对象，包含字符本身和样式（红字、加粗）。这允许实现退格键的真实逻辑（物理上只是回退，不擦除，虽然 App 为了易用性实现了擦除）。
  • AI 流式打字：当 AI 返回结果时，使用 setInterval 定时器逐个字符触发 typeChar 函数，配合按键的视觉下沉动画，模拟看不见的幽灵在打字的视觉效果。

4. 多设备切换架构 (ConfidentialFolder.tsx & PolaroidCamera.tsx)

  • 为了支持 Newton, P900, BlackBerry 等多种设备外观，代码采用了策略模式。父组件维护一个 padType 或 cameraType 状态，子组件根据该状态渲染完全不同的 DOM 结构和 CSS 样式。每种设备都有独立的 renderXXX 函数，确保细节（如 Palm OS 的顶栏、BlackBerry 的键盘布局）高度还原。

5. 交互与物理模拟

  • 拖拽系统：实现了通用的拖拽逻辑，通过监听 mousemove 和 mouseup 事件计算 clientX/Y 的差值，更新组件的 position: absolute 坐标。
  • 状态机：管理着复杂的应用状态，例如：isTyping (打字中)、isThinking (AI 思考中)、isEjecting (退纸动画中)。这些状态互斥，防止在动画过程中触发新的操作。

第三部分：生成同款 App 的精准提示词 (Prompt Engineering)

如果你希望使用 AI 编码助手（如 Cursor, Windsurf, 或 ChatGPT）复刻一个类似的拟物化 AI 应用，你需要提供极具结构化和描述性的提示词。

以下是一套分步走的精准提示词策略：

3.1 核心架构提示词 (The “Mega Prompt”)

Role: World-class Frontend Engineer & UI/UX Designer specialized in Skeuomorphism.
Goal: Build a React application acting as a realistic simulation of a vintage 1969 Olivetti Valentine Typewriter.
Tech Stack: React, TypeScript, Tailwind CSS, Web Audio API (No external assets), Google GenAI SDK.
Core Requirements:
– Visuals: Use CSS shadows (box-shadow), gradients, and SVG noise filters to create a photorealistic, top-down view of a red typewriter on a wooden desk. It must look 3D but use 2D CSS.
– Mechanism: Implement a typing engine. When I type on my keyboard, the virtual keys should depress (CSS transform), sound effects should play (synthesized via Web Audio API), and letters should appear on a central paper sheet.
– AI Integration: Integrate the @google/genai SDK. When I press “Enter” on an empty line, send the current page text to Gemini and have it “type” the response back character-by-character.
– Atmosphere: Include a desk lamp that casts a dynamic glow overlay using mix-blend-mode. Add ambient room hum audio.
– Components:
– Typewriter: The main chassis and keys.
– PaperStack: Manage completed pages.
– ConfidentialFolder: A skeuomorphic folder or PDA device to input API keys.

Style Guide: Retro, Tactile, High-Fidelity, Warm lighting.

3.2 细节打磨提示词 (针对特定模块)

针对音效 (Audio):

“Implement a soundService.ts using the Web Audio API. Do not use external MP3 files. Create functions for:
– playKeySound(): A mix of white noise burst and low-frequency oscillator thud to simulate plastic hitting paper and metal resonance.
– playReturnSound(): A sliding pitch noise for the carriage return followed by a sine wave ‘ding’.
– startAmbientHum(): A 60Hz sine wave with low gain to simulate an old electrical lamp.”

针对多设备切换 (Device Switching):

“Create a ConfidentialFolder component that serves as the settings menu. Add a prop styleVariant that switches the visual rendering between:
– Apple Newton MessagePad: Greenish LCD screen, stylus, handwriting font.
– BlackBerry Passport: Square screen, physical keyboard bottom, dark theme.
– Palm Treo: Resistive touchscreen look, grey plastic body.Use Tailwind CSS to style these completely using gradients and borders to simulate the physical hardware.”

针对拍立得相机 (Polaroid):

“Create a PolaroidCamera component.
– Visual: CSS-only drawing of a Polaroid I-2 camera. Lens, flash, viewfinder.
– Action: When the shutter is clicked, play a mechanical whirring sound (oscillator ramp).
– Animation: Animate a white photo card sliding out from the bottom.
– Developing: The photo should start grey and slowly reveal the image (fetched from Gemini Image Gen) using a CSS filter brightness/contrast transition over 5 seconds.”

3.3 总结性建议

要生成这种级别的 App，关键在于“分而治之”：

  • 先让 AI 画出静态的、好看的拟物化 UI（Tailwind 是神器）。
  • 再让 AI 写出无素材的音效引擎（这一步通常很难，需要明确指示使用 Oscillator）。
  • 最后接入 AI 逻辑。

使用“Skeuomorphic Design”（拟物化设计）、“Procedural Audio”（程序化音频）和“CSS Art”（CSS 绘图）是获得高质量代码的三个魔法关键词。

了解 ~/jintaoblog/朝夕见闻志⚡️ 的更多信息

订阅后即可通过电子邮件收到最新文章。