Case studies

做了什么、为什么这样做、以及怎么把它做完:项目介绍尽量写成“可复用的方法”。

Back to home
Open case study: 创作全生命周期管理系统

创作全生命周期管理系统

捕获灵感 → AI加工 → 多平台分发

面向创作者的工作流工具:即时捕获、AI 辅助结构化、自动分发,并带数据追踪。

Capture · AI · Publish · Diary

Flow

Capture → Workshop → Publish → Track

Background

创作的痛点往往不在“写”,而在“从灵感到发布”的链路断裂:素材分散、加工耗时、分发重复。

Scenario

灵感捕获:语音/文字随手记录。 · 内容加工:把素材变成结构化的成品稿。 · 多平台发布:一次创作,多端适配。

Delivery

“捕获 / 工作台 / 发布 / 数据追踪”的清晰导航。 · 核心价值拆解:即时捕获、智能加工、自动分发。 · 以卡片化入口管理不同创作模块。

Design

用流程做信息架构:让用户按“阶段”思考。 · 强调“零摩擦”:减少切换成本与重复劳动。

Highlights

  • 捕获
  • 工作台

捕获灵感 → AI加工 → 多平台分发

Open →
Open case study: 漫画创作平台

漫画创作平台

AI驱动的故事创作工具

把漫画创作流程产品化:AI 生成故事与人物设定,辅助制作分镜脚本与模板化生产。

AI · Story · Storyboard · Character

Flow

Story → Character → Storyboard → Template

Background

漫画创作既是想象力也是工程:人物设定、剧情推进、分镜组织都需要结构。这个项目把“灵感”变成“可推进的流程”。

Scenario

从概念到角色:快速生成并迭代人物设定。 · 从故事到分镜:把剧情拆解成可制作的镜头脚本。 · 模板化:重复劳动交给系统,创作聚焦在表达。

Delivery

功能区与流程入口(功能特色/模板/价格等) · 登录/注册体系入口 · AI 辅助生成链路

Design

创作类产品需要“鼓励”:把阶段性成果显性化。 · 复杂流程用模板承接,让用户更快进入状态。

Highlights

  • 故事创作
  • 人物设定

AI驱动的故事创作工具

Open →
Open case study: 智能健康管理

智能健康管理

AI驱动的个人病例分析

安全上传体检报告,获取 AI 智能分析,并追踪长期健康趋势(强调隐私与可回溯)。

AI · Health · Privacy · Trends

Flow

Upload → Parse → Analyze → Track

Background

体检报告“可读”不等于“可行动”。这个项目的目标是把体检数据翻译成更可理解的洞察,并能长期追踪变化。

Scenario

上传体检报告,快速获得解释与风险提示。 · 长期趋势跟踪:关注指标变化,而非一次性结果。 · 以隐私为前提的个人健康数据管理。

Delivery

报告上传入口 · AI 分析结果呈现 · 趋势与历史记录 · 登录/注册与权限入口

Design

把“安全感”做成体验:显式说明隐私与数据边界。 · 洞察要可回溯:用户需要看到历史与变化。

Highlights

  • 体检报告解析
  • 趋势追踪

AI驱动的个人病例分析

Open →
Open case study: 语音播放工具

语音播放工具

支持多文本管理的语音合成播放器

把“文字转语音”做成可管理的播放列表:支持添加多段文本、速度/循环与播放控制。

TTS · Playlist · Speed · Loop

Flow

Add text → Queue → Speak → Repeat

Background

TTS 工具常常只解决“单次朗读”,但真实使用更像“播放列表”:需要可管理、可重复、可调速。

Scenario

长文分段朗读 · 语言学习跟读 · 把资料做成“可听”内容

Delivery

文本输入与快速添加(支持快捷输入提示)。 · 播放器状态(播放/暂停/循环/速度)。 · 播放列表与进度计数。

Design

把“添加”与“播放”拆成两个明确区域。 · 弱化复杂配置,强化即时反馈。

Highlights

  • 多文本管理
  • 播放控制

支持多文本管理的语音合成播放器

Open →
Open case study: 休闲游戏合集

休闲游戏合集

精选经典休闲游戏

一个即开即玩的小游戏集合:支持分类/标签筛选,并为每个游戏提供独立入口。

Games · Tags · Collection · Web

Flow

Browse → Play → Repeat

Background

游戏集合的体验关键在于“打开就能玩”:把入口做得足够清晰,让用户用最短路径进入乐趣。

Scenario

碎片时间放松 · 移动端随手打开 · 用标签快速找到想玩的类型

Delivery

首页游戏卡片(含推荐标记) · 标签筛选与类别侧栏 · 每个游戏独立路由入口

Design

用“可扫描”的卡片信息密度承载游戏描述与标签。 · 把“推荐”做成轻量标识,帮助快速决策。

Highlights

  • 游戏卡片列表
  • 标签/类别筛选

精选经典休闲游戏

Open →
Open case study: Music Board

Music Board

Collections · Tracks · Notes · Player

把音乐收藏与播放做成可检索的面板:合集/单曲/笔记一处管理,底部固定播放器嵌入,不跳转即可试听。

Music · Collections · Search · Filters

Flow

Browse → Search → Open → Play

Background

音乐收藏往往散落在多个平台:保存容易、回看困难。这个项目把“收藏”变成可检索的结构化面板,并把“播放入口”固定在页面底部。

Scenario

把不同平台的收藏汇总为一个入口(合集/单曲)。 · 通过搜索与标签快速定位“想听的那一首”。 · 听歌时随手记 Notes,形成长期沉淀。

Delivery

多视图信息架构:Home / Collections / Tracks / Notes。 · 搜索框 + tags/chips 筛选(面向“检索”而不是“浏览到底”。) · 底部播放器区:支持展开/清空,嵌入播放不打断当前页面。

Design

黑白极简 + 纸感层级:bg/paper/hairline 的微对比,避免纯黑纯白的硬。 · 字体分工:标题 serif 提升气质,辅助信息 mono 提升结构感与可扫读。 · 轻动效:hover 只做轻微位移/边框变化,保持克制。

Highlights

  • 合集/单曲/笔记三视图
  • 搜索与标签筛选

Collections · Tracks · Notes · Player

Open →
Open case study: Prompt Hub

Prompt Hub

all you need is prompt

面向个人/独立开发者的实用提示词收集库:精选可复用模板,减少试错成本。

Prompt · Templates · Search · Developer

Flow

Collect → Structure → Search → Copy

Background

当提示词变成“可复用资产”,它需要像代码一样可检索、可组织、可迭代,而不是散落在聊天记录里。

Scenario

个人工作流:把高频任务固化成模板,按需填空。 · 独立开发:产品/运营/研发常见场景,一键复用减少沟通成本。 · 团队共享:把团队共识写法沉淀成统一范式。

Delivery

提示词卡片库:标题、用途、输入输出约束、示例等结构化字段。 · 快速搜索与筛选:用“意图”而非“关键词”去定位模板。 · 可复制/可改写的模板:把“可用”放在第一位。

Design

信息架构先于视觉:先把“提示词是什么”讲清楚,再谈好看。 · 减少认知负担:列表+搜索是最直接的路径,避免复杂层级。 · 把“复用”做成默认:结构化字段与示例让迁移成本更低。

Highlights

  • 模板化沉淀
  • 搜索直达(⌘K)

all you need is prompt

Open →
Open case study: MIDI MELODY

MIDI MELODY

简易旋律生成器 · 黑白

黑白极简的 MIDI 旋律生成器:支持调性/节奏/和弦配置,生成后可播放与导出。

MIDI · Tone.js · Generator · Export

Flow

Configure → Generate → Play → Export

Background

音乐生成工具的门槛往往在“参数太多”;我想把可玩性和可控性压到一个极简界面里。

Scenario

快速得到旋律草稿(灵感触发)。 · 为视频/小游戏做简单 BGM 片段。 · 把生成结果导出到 DAW 继续编辑。

Delivery

调性、音符数量、节奏、BPM 与间歇密度等参数面板。 · 可选“加和弦(三和弦)”,并提供历史旋律列表。 · 钢琴卷帘视图用于快速理解结构。

Design

黑白视觉语言:把注意力集中在“结果”与“结构”。 · 先生成再播放/导出:把流程做成“不会走丢”的顺序。 · 参数默认值可用:降低第一次使用成本。

Highlights

  • 生成/播放/导出
  • 和弦开关

简易旋律生成器 · 黑白

Open →
Open case study: Remotion 视频模板

Remotion 视频模板

免费开源模板集合

浏览 Remotion 动画视频模板:按类型分类,支持一键复制代码快速上手。

Remotion · React · Templates · Copy

Flow

Browse → Filter → Copy → Build

Background

Remotion 的魅力在于“用 React 做视频”,但模板是上手速度的关键。这个集合把可复用的动画片段整理成入口。

Scenario

短视频/宣传片开场动画。 · 数据可视化/字幕模板快速复用。 · 作为团队视频工程的模板库。

Delivery

模板列表与分类按钮(如文字动画等) · 模板入口与预览信息 · 复制代码即用的工作流

Design

让“找到模板”比“看介绍”更快:筛选放在首屏。 · 把文档外链保留,但不打断浏览节奏。

Highlights

  • 分类筛选
  • 模板预览

免费开源模板集合

Open →
Open case study: 语音转录

语音转录

实时语音识别转文字

简洁高效的语音转录工具:实时识别、自动保存与历史回溯。

Speech · Transcription · History · Settings

Flow

Record → Transcribe → Save → Review

Background

转录工具最重要的是“开始就能用”和“记录不丢”——减少按钮、强调状态反馈,是这个项目的核心。

Scenario

会议记录 · 口述灵感 · 语言练习与复盘

Delivery

录制计时与状态展示 · 一键进入历史列表 · 可配置的设置入口

Design

状态可视化(准备/录制/暂停)比功能堆叠更重要。 · 历史作为主资产:默认可回溯。

Highlights

  • 实时转录
  • 历史记录

实时语音识别转文字

Open →
Open case study: Roya拉丁舞

Roya拉丁舞

您的私人拉丁舞线上学习空间

覆盖五大舞种的线上学习平台:从入门到进阶的系统化路径,并提供清晰的内容导航。

Learning · Dance · Curriculum · Navigation

Flow

Browse → Learn → Practice

Background

学习型产品的核心是“路径感”。与其堆内容,不如把内容组织成从零开始的课程地图。

Scenario

想系统入门拉丁舞的学习者。 · 按舞种/动作/节拍训练等主题查找内容。 · 把练习拆解成可跟随的步骤。

Delivery

侧边栏导航(首页/舞种概览/基础动作等) · 舞种与标签维度的内容组织 · 移动端可折叠菜单

Design

导航要清晰:学习时最怕“找不到下一步”。 · 用标签承接碎片知识,用路径承接系统学习。

Highlights

  • 舞种概览
  • 基础动作

您的私人拉丁舞线上学习空间

Open →
Open case study: 我的个人博客

我的个人博客

分享技术、生活和思考

长期写作与知识沉淀:以文章、标签与阅读体验为核心,持续迭代个人表达体系。

Blog · Writing · Next.js · Personal

Flow

Write → Tag → Publish

Background

把“做过的事”写下来,才能变成可复用的方法论;博客是我沉淀思考、复盘项目与输出体系的长期容器。

Scenario

技术笔记与项目复盘 · 方法论沉淀 · 作为个人身份与作品入口

Delivery

文章/标签的内容结构 · 首屏浏览与阅读详情页 · 与其他项目的互相导流入口

Design

阅读体验优先:排版、层级、行宽与留白。 · 让“内容结构”可见:标签与分类帮助建立知识地图。

Highlights

  • 文章列表与标签
  • 阅读体验优化

分享技术、生活和思考

Open →
Open case study: AI产品经理修炼心得

AI产品经理修炼心得

个人学习记录

把 AI 产品经理学习路径结构化:核心能力体系、产品分类、面试指南、资源与实战案例。

AI PM · Notes · Guide · Cases

Flow

Learn → Structure → Practice → Iterate

Background

学习记录如果只是“文章”,很难形成体系;我把内容拆成能力、产品、面试、资源、案例等模块,便于长期迭代。

Scenario

系统学习 AI 产品岗位能力 · 面试准备与复盘 · 从案例出发做实战拆解

Delivery

模块化导航(核心能力/产品分类/面试/资源/案例/社区) · 内容分层:从概念到可执行清单 · 可持续扩展的目录结构

Design

用“路径”组织知识,而不是仅按时间线。 · 阅读型产品强调可读性与信息密度的平衡。

Highlights

  • 导航到各主题
  • 体系化内容组织

个人学习记录

Open →
Open case study: LIFEOS 个人目标树

LIFEOS 个人目标树

认识自己,了解真相,体验人生,记录痕迹

用目标树/对齐/看板把人生目标结构化,并提供实时解析预览,支持编辑与回看。

Goal Tree · Kanban · Alignment · Editor

Flow

Define → Structure → Align → Review

Background

目标管理的难点不在“写目标”,而在“持续对齐”:把抽象愿望拆成可执行结构,并在不同视图中保持一致。

Scenario

人生规划:从愿景到阶段目标的层级结构。 · 对齐视图:把目标与行动关联起来。 · 编辑器:用文本/结构化方式维护目标树。

Delivery

侧边导航(规划/看板/对齐/编辑) · 目标结构实时预览 · 编辑与可视化并行

Design

多视图但单一真相:不同视图服务不同任务。 · 实时反馈减少“编辑焦虑”:输入即预览。

Highlights

  • Goal Tree Editor
  • Goal Alignment

认识自己,了解真相,体验人生,记录痕迹

Open →
Open case study: 愿景测试器

愿景测试器

探索你的人生核心目标与方向

10–15 分钟的愿景探索测试:自我认知、价值探索、目标具象化与障碍识别,结果本地存储。

Vision · Test · Onboarding · LocalStorage

Flow

Onboard → 4 stages → Feedback → Save

Background

很多“目标工具”从列表开始,但愿景需要从自我探索开始。这个项目把“自我提问”做成可完成的互动流程。

Scenario

想梳理人生方向但无从下手 · 阶段性自我复盘 · 把抽象渴望转化为可表达的目标语言

Delivery

欢迎引导与“安全空间”的 onboarding。 · 四阶段流程:自我认知 → 价值探索 → 目标具象化 → 障碍识别。 · 进度与状态管理,并把结果存到本地。

Design

渐进式体验:降低测试疲劳。 · 温暖的视觉氛围:让用户更愿意诚实回答。 · “匿名 + 本地存储”降低心理负担。

Highlights

  • 渐进式体验设计
  • 多阶段流程

探索你的人生核心目标与方向

Open →
Open case study: MermaidFlow

MermaidFlow

Free Online Mermaid Diagram Editor

在线 Mermaid 图表编辑器:语法高亮、实时预览与导出能力,让“文本即图表”更顺手。

Mermaid · Diagram · Editor · Export

Flow

Write → Preview → Export

Background

流程图往往卡在“画图工具太重”与“Markdown 太轻”之间;Mermaid 的优势是可维护,但编辑体验常常不够顺滑。

Scenario

写文档与技术方案:在 README / Spec 中维护图表。 · 产品/流程梳理:快速迭代流程版本,不被拖拽 UI 绑架。 · 学习与分享:以链接/导出图像的方式传播。

Delivery

编辑区 + 预览区的实时联动。 · 面向可写性的语法高亮与输入体验。 · 导出能力:把图表带走,进入你的文档与汇报。

Design

“输入/输出”一眼可见:把主要精力留给内容本身。 · 低干扰 UI:工具存在感要低,但反馈要及时。 · 默认可用:打开即写,不让用户先做配置。

Highlights

  • 实时预览
  • 语法高亮

Free Online Mermaid Diagram Editor

Open →
Open case study: CLI Command Reference

CLI Command Reference

Modern Syntax Guide

Gemini CLI、Claude Code 与 Shell 交互语法参考:支持搜索、过滤与一键复制。

CLI · Cheatsheet · Search · Copy

Flow

Browse → Filter → Copy

Background

命令行工具越多,语法越碎;要把“记忆成本”变成“检索成本”,让查询比回忆更快。

Scenario

写脚本/写提示词时快速查语法。 · 在不同工具之间切换(Gemini / Claude / Shell)时保持一致的检索体验。 · 把常用命令当作“可复制资产”。

Delivery

命令卡片库 · 工具维度 Tabs/过滤 · 搜索输入框 + 即时结果

Design

黑底白字的终端语境:把“工具感”设计成界面语言。 · 信息密度:在不拥挤的前提下把关键字段放在首屏。 · 复制体验优先:减少多余跳转。

Highlights

  • 实时搜索
  • 按工具过滤

Modern Syntax Guide

Open →
Open case study: BiographyAI

BiographyAI

AI-Powered Biographical Video Creation

用 AI 自动生成传记类短视频:脚本、视觉与配音一体化,支持多语言与低成本架构。

AI · Video · Multi-language · Sources

Flow

Sources → Script → Voice → Video

Background

人物故事天然适合短视频叙事,但制作链路长(资料→脚本→画面→配音→剪辑)。这个项目尝试把链路压缩到可复用的流程里。

Scenario

历史人物/民间故事/纪录片式短片。 · 女性先锋、人物传记等内容选题。 · 面向社媒平台的一键生成与分发。

Delivery

脚本、视觉与配音的自动生成与组合。 · 多语言内容入口与展示。 · 权威来源引用与可点击验证(降低“幻觉风险”)。

Design

把复杂能力拆成“从输入到输出”的可理解步骤。 · 在生成类产品中,信任来自“可验证”。

Highlights

  • 多语言支持
  • 一键合成

AI-Powered Biographical Video Creation

Open →
Open case study: Digital Nomad Toolkit

Digital Nomad Toolkit

应用岛 · 数字游民生存装备分享

把 AI 工具与数字游民常用服务做成信息卡片库:可搜索、可分类,并突出决策维度。

Toolkit · Cards · Search · Curation

Flow

Curate → Tag → Search → Decide

Background

工具推荐不是“列表”,而是“决策”——需要把对比维度显性化,才能真正帮助选择。

Scenario

快速找到某一类工具(团队协作/设计/效率等)。 · 用可比较的字段做选择,而不是靠感觉。 · 把探索过程变成可复用的“工具地图”。

Delivery

工具卡片库:名称、简介、链接与关键指标。 · 分类筛选 + 搜索入口。 · 以“瀑布流/多列”提升浏览效率。

Design

卡片即对比:将信息密度控制在“可扫描”。 · 让“链接外跳”更轻:用户不必反复返回列表。 · 首页就提供搜索:避免先浏览再迷路。

Highlights

  • 搜索工具
  • 分类与数量统计

应用岛 · 数字游民生存装备分享

Open →