01 / 17
(RE)³ 像素 Logo
作品集 · Portfolio 2026

(RE)³

Know Yourself. — 自我反思助手

RECORD REFLECT REWIRE
Why?

我们为什么不了解自己？

每天的情绪、想法和困惑都在无声流逝，
没有被看见，更没有被理解。

01

日子太忙了

从来没有时间停下来，问问自己今天过得怎么样。

02

情绪来了就走

焦虑、期待、困惑，都只是一阵风，留不下任何痕迹。

03

不知道自己的模式

同样的错误一再发生，却不知道问题出在哪里。

Product Concept

(RE)³ 的三环路

三个 RE — 三个维度的自我觉察。每次循环带你更深入地认识自己。

✎ RECORD

记录

想法 · 情绪 · 困惑
每天 3 个维度，渐进式输入

→
◎ REFLECT

反思

7天周期
AI 发现思维模式

→
↻ REWIRE

重塑

洞察 → 行动
生成壁纸，固化改变

↑ 每完成一次 Reflect 即开启下一周期，持续积累

Feature 01

RECORD

记录每天真实的自己

  • 渐进式输入 — 想法、情绪、困惑依次展开
  • 日期切换 — 今天 ↔ 昨天，支持补记
  • 保存锁定 — 记录后只读，保留真实
  • 历史折叠卡片 — 倒序展示过往记录
第 X 天计数 今天 / 昨天
Record 页面空状态截图
Record 页面填写状态截图
UX Detail

渐进式输入

降低「开始」的门槛，让记录成为习惯

  • 初始只显示「想法」一个输入框
  • 有内容后才出现「继续 →」按钮
  • 情绪框、困惑框依次滑入
  • 三框全部出现后显示保存按钮
  • 保存触发震动反馈 + Toast 提示
Feature 02

REFLECT

看见你的思维模式

  • 7 天进度方块 — 可视化周期完成情况
  • 累积 ≥ 4 天解锁生成按钮
  • AI 输出「思维模式」+「阻碍因素」
  • 生成后自动开启新周期
  • 多周期历史导航，左右箭头切换
Claude API 7天周期
Reflect 页面截图
Under the Hood

7 天周期 × AI 分析

周期进度

✓
✓
✓
✓

≥ 4天已达成 → 生成按钮解锁

  • 周期从第一次记录日起算
  • 不强制自然周，降低焦虑感
  • 生成后重置，开启新循环

AI 分析输出

思维模式 PATTERN

你倾向于在做决定前过度分析，害怕不完美的结果，这让你错过了很多「足够好」的时机。

阻碍因素 BLOCKS

对「失败」的恐惧，让你在起步阶段就消耗了大量能量，导致实际行动迟缓。

Rewire 页面截图
Feature 03

REWIRE

重塑你的行动模式

  • 基于 Reflect 洞察，AI 生成「重塑方案」
  • 「为什么要改变」—— 温暖的说明
  • 「本周行动」—— 一句可执行的信念
  • 一键复制行动文字
  • 生成壁纸 — Canvas 绘制，BallpointPen 字体，动态字号自适应
  • Web Share API 一键分享，可设为手机壁纸
Mindset first Canvas API Web Share API
Full Flow

三个页面，一个完整闭环

从「记录」到「反思」到「重塑」，每一步都建立在上一步的基础上。

✎ RECORD 每天记录

想法 + 情绪 + 困惑
7天内记录 ≥ 4 天

◎ REFLECT 周期反思

AI 分析思维模式
输出「模式 + 阻碍」

↻ REWIRE 行动重塑

AI 生成行动信念
壁纸固化，新周期开启

每完成一次 Reflect → 自动开启下一个 7 天周期
Design

克制、温暖、真实

调色板

暖米色系 × 雾蓝 accent。
无纯黑 #000，无纯白 #FFF，无高饱和度色。

字体组合

EleYang River副标题 · 笔触感 今天的想法 THOUGHTS
BallpointPen输入 · 清晰规整 写下你今天想到的...
VT323设计体 · 像素风 RECORD REFLECT REWIRE

设计原则

  • 移动端优先，内容聚焦
  • 渐进式交互降低摩擦
  • 克制动画，0 干扰
  • 功能完整 > 视觉炫技
Technology

技术栈

⚛ React 18

函数组件 + Hooks，Context 全局状态管理

⚡ Vite 5

极速热更新，构建体积最小化

🎨 Tailwind CSS 3

Utility-first，CSS 变量设计系统

◎ Claude API

claude-sonnet-4-6，智能反思与重塑方案生成

▲ Vercel

Functions 代理 API Key，Serverless 部署

📦 localStorage

PWA 本地存储，3r_ 前缀规范，无需后端

Architecture

API 安全代理架构

前端不暴露 API Key。所有 Claude 调用通过 Vercel Functions 中转。

📱

iPhone PWA

用户操作

→

⚛

React 前端

fetch('/api/...')

→

▲

Vercel Function

API Key 在此

→

◎

Claude API

sonnet-4-6

🔒 ANTHROPIC_API_KEY 仅存在于 Vercel 环境变量，客户端代码中永远看不到。

generate-reflection.js

输入：7天记录 → 输出：思维模式 + 阻碍因素

generate-rewire.js

输入：反思结果 → 输出：为什么改变 + 本周行动

Mobile Experience

PWA — 原生应用级体验

安装到手机主屏幕，无需 App Store，打开即用。

📲

添加到主屏幕

Safari「分享」→「添加到主屏幕」，像原生 App 一样启动

🎨

(RE)³ 像素 Logo

icon-192 / icon-512，主屏幕有完整的品牌标识

📱

移动端优先

iOS Safari 14+ / Chrome 90+，全面适配主流移动设备

💾

本地存储

localStorage 保证数据隐私，无需注册账号即可使用

Live · 线上版本

现在就可以体验

在手机浏览器打开，添加到主屏幕，开始你的第 1 天。

3r-six.vercel.app

iOS Safari Chrome Mobile PWA 可安装

「不要想太多，这周只考虑如何完善自身」

Design Decisions

四个「为什么」

为什么周期是 7 天？

用户可能任意一天开始，弹性周期降低焦虑。以第一次记录为起点，更有仪式感，也不绑定自然周。

为什么生成门槛是 4 天？

4/7 = 57%。不需要完美，但需要认真对待。降低门槛让用户更快体验到 AI 反思的核心价值。

为什么 Rewire 是信念而非任务清单？

具体任务容易产生压力和失败感。信念转变更持久，易于内化，不会在第 2 天就放弃。

为什么壁纸用模板图而非渐变？

模板图有手工质感和品牌感。用户更愿意将有温度的视觉设为壁纸，并主动分享给朋友。

V2 展望

(RE)³

Know Yourself.

React 18 · Vite 5 · Tailwind CSS 3 · Claude API · Vercel · 2026