Files
jackyu66gitandCursor 2fb1dfee14 chore: seal Design Vision v1 and monorepo scaffold
Archive the differentiated YuXinGu product docs, AI engineering system,
design contract, and Go/Vue scaffold. Next execution prioritizes Cece-parity
over early innovation (see .ai/product/STRATEGY.md).

Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-02 16:00:44 +08:00

493 lines
22 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<!DOCTYPE html>
<html lang="zh">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-LVVXH3TL04"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-LVVXH3TL04');
</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>星镜 · 动态视频化性格&星盘测试</title>
<style>
:root{
--pri:#E54D42; --blue:#4A90E2; --green:#5CB85C; --gold:#C8923A;
--text:#333; --sub:#999; --bg-start:#FFD1C7; --bg-end:#FFC8B5;
--purple:#8B5CF6; --teal:#0D9488;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei","Helvetica Neue",sans-serif;
background:linear-gradient(180deg,var(--bg-start) 0%,var(--bg-end) 30%,#fff5f0 100%);
color:var(--text);max-width:430px;margin:0 auto;min-height:100vh;
-webkit-font-smoothing:antialiased;
}
/* Top Bar */
.topbar{
text-align:center;padding:14px 0 10px;
position:sticky;top:0;z-index:10;
background:linear-gradient(180deg,var(--bg-start) 0%,rgba(255,209,199,0.6) 100%);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
/* Hero */
.hero{
background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);
border-radius:20px;margin:8px 16px 0;padding:32px 20px 28px;
position:relative;overflow:hidden;
}
.hero .stars{position:absolute;inset:0;pointer-events:none}
.hero .stars span{position:absolute;background:#fff;border-radius:50%;animation:twinkle 3s ease-in-out infinite}
.hero .stars span:nth-child(1){width:3px;height:3px;top:15%;left:20%;animation-delay:0s}
.hero .stars span:nth-child(2){width:2px;height:2px;top:25%;right:25%;animation-delay:0.8s}
.hero .stars span:nth-child(3){width:4px;height:4px;top:40%;left:60%;animation-delay:1.5s}
.hero .stars span:nth-child(4){width:2px;height:2px;top:55%;right:15%;animation-delay:0.3s}
.hero .stars span:nth-child(5){width:3px;height:3px;top:30%;left:40%;animation-delay:1.1s}
.hero .stars span:nth-child(6){width:2px;height:2px;bottom:30%;left:12%;animation-delay:2.0s}
.hero .stars span:nth-child(7){width:3px;height:3px;bottom:25%;right:30%;animation-delay:0.5s}
.hero .stars span:nth-child(8){width:2px;height:2px;top:70%;left:75%;animation-delay:1.7s}
.hero .stars span:nth-child(9){width:4px;height:4px;top:10%;left:80%;animation-delay:2.3s}
@keyframes twinkle{0%,100%{opacity:0.3}50%{opacity:1}}
.hero .logo-wrap{position:relative;z-index:2;margin-bottom:8px}
.hero .tagline{font-size:13px;color:rgba(255,255,255,0.7);position:relative;z-index:2}
.hero .big-title{font-size:36px;font-weight:800;color:#fff;letter-spacing:6px;position:relative;z-index:2;margin:12px 0 6px}
.hero .sub-title{font-size:14px;color:rgba(255,255,255,0.85);position:relative;z-index:2;line-height:1.6}
.hero .conf-badge{
display:inline-block;background:rgba(255,255,255,0.12);color:rgba(255,255,255,0.8);
padding:4px 12px;border-radius:20px;font-size:11px;position:relative;z-index:2;margin-top:10px;
}
/* Section */
.section{padding:0 16px;margin-top:20px}
.sec-title{font-size:16px;font-weight:700;color:var(--text);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.sec-title .dot{width:8px;height:8px;border-radius:50%;background:var(--pri);flex-shrink:0}
.sec-subtitle{font-size:12px;color:var(--sub);margin-top:-8px;margin-bottom:12px}
/* Feature Card */
.feat-card{
background:#fff;border-radius:14px;padding:18px 16px;
margin-bottom:10px;box-shadow:0 2px 8px rgba(0,0,0,0.04);
position:relative;overflow:hidden;
}
.feat-card .f-num{
position:absolute;right:14px;top:12px;font-size:40px;font-weight:800;
color:rgba(0,0,0,0.03);line-height:1;
}
.feat-card .f-icon{font-size:20px;margin-bottom:6px}
.feat-card .f-title{font-size:14px;font-weight:700;color:var(--text);margin-bottom:4px}
.feat-card .f-desc{font-size:12px;color:var(--sub);line-height:1.7}
.feat-card .f-highlight{
margin-top:8px;padding:8px 10px;background:#FFF5F0;border-radius:8px;
font-size:11px;color:var(--pri);line-height:1.5;border-left:3px solid var(--pri);
}
/* Biz Tier */
.biz-tier{
background:#fff;border-radius:14px;padding:16px;margin-bottom:10px;
box-shadow:0 2px 8px rgba(0,0,0,0.04);
border-top:4px solid var(--pri);
}
.biz-tier.t2{border-top-color:var(--gold)}
.biz-tier.t3{border-top-color:var(--blue)}
.biz-tier.t4{border-top-color:var(--green)}
.biz-tier .t-label{
display:inline-block;padding:2px 10px;border-radius:10px;font-size:10px;
font-weight:600;margin-bottom:8px;color:#fff;
}
.biz-tier .t-label.l1{background:var(--pri)}
.biz-tier .t-label.l2{background:var(--gold)}
.biz-tier .t-label.l3{background:var(--blue)}
.biz-tier .t-label.l4{background:var(--green)}
.biz-tier .t-title{font-size:14px;font-weight:700;margin-bottom:2px}
.biz-tier .t-price{font-size:12px;color:var(--pri);margin-bottom:8px;font-weight:600}
.biz-tier .t-list{font-size:12px;color:var(--text);line-height:1.8}
.biz-tier .t-list li{margin-left:16px}
/* Compare Table */
.cmp-table{
background:#fff;border-radius:14px;overflow:hidden;
box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.cmp-table table{width:100%;font-size:12px;border-collapse:collapse}
.cmp-table th{background:#fafafa;padding:12px 8px;font-weight:600;color:var(--text);text-align:center}
.cmp-table th:first-child{text-align:left;padding-left:14px}
.cmp-table td{padding:10px 8px;text-align:center;border-top:1px solid #f5f5f5;line-height:1.5}
.cmp-table td:first-child{text-align:left;padding-left:14px;font-weight:500;color:#555}
.cmp-table .win{color:var(--green);font-weight:600}
.cmp-table .tag-pri{color:var(--pri);font-weight:600}
.cmp-table .tag-gold{color:var(--gold);font-weight:600}
/* MVP */
.mvp-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mvp-item{
background:#fff;border-radius:12px;padding:14px 12px;
text-align:center;box-shadow:0 2px 6px rgba(0,0,0,0.04);
}
.mvp-item .mvp-num{font-size:28px;font-weight:800;color:var(--pri);opacity:0.2;line-height:1}
.mvp-item .mvp-text{font-size:12px;color:var(--text);margin-top:2px;line-height:1.4}
/* Flow Steps */
.flow-wrap{display:flex;flex-direction:column;gap:0}
.flow-step{
display:flex;align-items:flex-start;gap:12px;padding:0 0 16px 0;
position:relative;
}
.flow-step:not(:last-child)::after{
content:"";position:absolute;left:13px;top:30px;bottom:0;width:2px;
background:linear-gradient(var(--pri),var(--bg-start));
border-radius:1px;
}
.flow-step .step-num{
width:28px;height:28px;border-radius:50%;background:var(--pri);
color:#fff;display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:700;flex-shrink:0;z-index:1;
}
.flow-step .step-content{font-size:13px;color:var(--text);line-height:1.6}
/* Risk */
.risk-card{
background:#fff;border-radius:14px;padding:16px;margin-bottom:10px;
box-shadow:0 2px 8px rgba(0,0,0,0.04);
}
.risk-card .r-title{font-size:13px;font-weight:700;color:var(--text);margin-bottom:4px}
.risk-card .r-desc{font-size:12px;color:var(--sub);line-height:1.6}
/* New Feature Highlight */
.new-badge{
display:inline-block;background:linear-gradient(135deg,#FF6B6B,#FF8E53);
color:#fff;font-size:9px;padding:2px 6px;border-radius:8px;margin-left:6px;
font-weight:600;vertical-align:middle;
}
/* Back link */
.back-link{
display:block;text-align:center;padding:30px 0 50px;
color:var(--sub);font-size:13px;text-decoration:none;
}
/* Animate */
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.floating{animation:float 3s ease-in-out infinite}
.bottom-spacer{height:60px}
</style>
</head>
<body>
<div class="topbar"><img src="logo.png" alt="愈心谷" style="height:24px;vertical-align:middle"></div>
<!-- Hero -->
<div class="hero">
<div class="stars">
<span></span><span></span><span></span><span></span><span></span>
<span></span><span></span><span></span><span></span>
</div>
<div class="logo-wrap"><img src="logo.png" alt="愈心谷" style="height:28px"></div>
<p class="tagline">愈心谷 · 产品设计档案</p>
<div class="big-title">星 镜</div>
<p class="sub-title">动态视频化性格&星盘测试平台<br>让每一次自我探索,都成为可播放的电影</p>
<div class="conf-badge">信心指数 · 91%</div>
</div>
<!-- 产品定位 -->
<div class="section">
<div class="sec-title"><span class="dot"></span>产品定位</div>
<div class="feat-card">
<p style="font-size:13px;color:var(--text);line-height:1.8">
<strong>年轻人自我探索平台</strong>——星盘、性格类型、人格测评,全部支持动态动画与AI生成个人专属短视频报告。<br><br>
对标「测测」以图文静态报告和图文社区为主,<strong>星镜</strong>的核心差异化在于:<span style="color:var(--pri)">动态可视化星盘、AI数字人视频解读、短视频化测试结果、视频社区、真人短视频咨询</span>,把传统文字报告变成可看、可播放、可二次剪辑分享的视频内容。
</p>
</div>
</div>
<!-- 核心痛点 -->
<div class="section">
<div class="sec-title"><span class="dot"></span>测测现存痛点</div>
<div class="feat-card">
<div style="display:flex;flex-wrap:wrap;gap:8px">
<span style="background:#FFECEC;color:var(--pri);padding:6px 12px;border-radius:20px;font-size:12px">全部文字长报告 · 阅读门槛高</span>
<span style="background:#FFF5EC;color:#E8985A;padding:6px 12px;border-radius:20px;font-size:12px">社区仅图文 · 缺少短视频沉浸感</span>
<span style="background:#E6F0FF;color:var(--blue);padding:6px 12px;border-radius:20px;font-size:12px">报告不便于社交传播</span>
<span style="background:#E6FFE8;color:var(--green);padding:6px 12px;border-radius:20px;font-size:12px">解读冰冷 · 缺少情绪氛围感</span>
</div>
</div>
</div>
<!-- 模块一:动态视频报告 -->
<div class="section">
<div class="sec-title"><span class="dot"></span>模块一 <span class="new-badge">王牌</span></div>
<div class="sec-subtitle">测试完成 → 自动生成个人动态视频报告</div>
<div class="feat-card">
<div class="f-num">01</div>
<div class="f-icon">🎬</div>
<div class="f-title">个人专属短视频报告</div>
<div class="f-desc">
用户输入生辰、地点做星盘,或完成性格测试后,输出两套结果:<strong>传统文字报告 + 自动生成专属短视频</strong><br><br>
• 动态星盘动画:行星转动、相位连线、宫位切换特效,星空背景流转<br>
• AI数字人出镜讲解:根据本命盘/测试结果,数字人主播口述性格天赋、情绪短板、感情模式、流年提示<br>
• 免费版:30-45秒短视频(带水印);付费完整版:2-4分钟完整解读<br>
• 一键保存本地,可加字幕和背景音乐,直接分享社交平台
</div>
<div class="f-highlight">对比测测:测测只有图文海报,星镜产出可播放的个性化视频,自带裂变传播属性</div>
</div>
</div>
<!-- 模块二 -->
<div class="section">
<div class="sec-title"><span class="dot"></span>模块二</div>
<div class="sec-subtitle">动态可视化星盘引擎</div>
<div class="feat-card">
<div class="f-num">02</div>
<div class="f-icon">🌌</div>
<div class="f-title">三维动态星盘</div>
<div class="f-desc">
• 可拖拽旋转星空,行星随真实天象实时缓慢运转<br>
• 点击任意行星,弹出动画+语音讲解(非静态图片)<br>
• 行运动态对比:播放动画演示行星移动对本命盘相位变化,直观看懂水逆、木星过境<br>
• 合盘动态动画:两人星盘叠加演示缘分相位
</div>
<div class="f-highlight">降低占星理解门槛,把抽象相位关系变成可视动画</div>
</div>
</div>
<!-- 模块三 -->
<div class="section">
<div class="sec-title"><span class="dot"></span>模块三</div>
<div class="sec-subtitle">短视频化社区(替代测测微博式图文社区)</div>
<div class="feat-card">
<div class="f-num">03</div>
<div class="f-icon">📱</div>
<div class="f-title">短视频优先信息流</div>
<div class="f-desc">
• 首页信息流优先短视频:占星师、心理博主发布测评解读短视频<br>
• 用户可发布个人测试短视频报告到社区,带标签<br>
• 支持评论、合拍、二次剪辑<br>
• 达人供给侧:占星师、心理成长博主入驻,积攒粉丝,承接付费咨询<br>
• 同时保留图文帖子,视频优先、图文为辅
</div>
</div>
</div>
<!-- 模块四 -->
<div class="section">
<div class="sec-title"><span class="dot"></span>模块四</div>
<div class="sec-subtitle">咨询体系升级(视频优先,兼容语音/图文)</div>
<div class="feat-card">
<div class="f-num">04</div>
<div class="f-icon">💬</div>
<div class="f-title">视频 + 异步 + 传统,全矩阵</div>
<div class="f-desc">
<strong>视频一对一咨询</strong>:占星师/心理师视频通话解读<br>
<strong>预约预制短视频解读</strong>:用户提交问题,达人录制专属短视频回复(低压力、产能更高)<br>
• 保留语音、图文咨询,形成完整矩阵
</div>
</div>
</div>
<!-- 模块五 -->
<div class="section">
<div class="sec-title"><span class="dot"></span>模块五</div>
<div class="sec-subtitle">互动式动态测试</div>
<div class="feat-card">
<div class="f-num">05</div>
<div class="f-icon">🎮</div>
<div class="f-title">告别静态答题</div>
<div class="f-desc">
• 部分测评加入<strong>短情景视频片段作为题干</strong>,观看情景后选择反应<br>
• 测试潜意识性格、亲密关系模式<br>
• 答题过程伴随轻量动画反馈,提升沉浸感
</div>
</div>
</div>
<!-- 模块六 -->
<div class="section">
<div class="sec-title"><span class="dot"></span>模块六</div>
<div class="sec-subtitle">AI陪伴动态卡片</div>
<div class="feat-card">
<div class="f-num">06</div>
<div class="f-icon"></div>
<div class="f-title">每日动态短视频运势</div>
<div class="f-desc">
• 每日运势不再是一段静态文字<br>
• AI生成几十秒动态短视频运势卡片,数字人播报今日提示<br>
• 支持桌面小组件播放简易动态星象
</div>
</div>
</div>
<!-- 商业模式 -->
<div class="section">
<div class="sec-title"><span class="dot"></span>商业模式</div>
<div class="sec-subtitle">沿用行业成熟三层变现,叠加视频新增收入</div>
<!-- 第一层 -->
<div class="biz-tier">
<span class="t-label l1">第一层 · 免费流量层</span>
<div class="t-title">拉新钩子</div>
<ul class="t-list">
<li>免费基础排盘、基础性格测试</li>
<li>生成30秒精简版AI数字人短视频报告(带水印,鼓励分享裂变)</li>
<li>免费每日动态短视频运势;基础社区浏览</li>
</ul>
<div class="f-highlight" style="margin-top:10px">核心策略:短视频报告向外分享到抖音/小红书,带来外部回流下载,实现社交裂变——这是对比测测新增的获客通路</div>
</div>
<!-- 第二层 -->
<div class="biz-tier t2">
<span class="t-label l2">第二层 · 会员订阅</span>
<div class="t-title">稳定现金流</div>
<div class="t-price">首月 ¥9.9 | 月 ¥24 | 年 ¥168</div>
<ul class="t-list">
<li>解锁无水印完整 1-4 分钟个人专属视频报告,不限次数</li>
<li>高清三维动态星盘全部功能</li>
<li>无广告,全部深度文字报告解锁</li>
<li>AI数字人多风格切换(理性心理向 / 氛围感占星向)</li>
<li>会员专属短视频课程库</li>
</ul>
</div>
<!-- 第三层 -->
<div class="biz-tier t3">
<span class="t-label l3">第三层 · 单次付费</span>
<div class="t-title">小额转化</div>
<div class="t-price">¥9.9 - ¥49.9</div>
<ul class="t-list">
<li>专项短视频报告:¥19.9「流年事业视频解读」、¥24.9「感情合盘视频报告」</li>
<li>专题心理测评包,输出视频结果</li>
<li>保留传统文字报告,给不爱视频的用户备选</li>
</ul>
</div>
<!-- 第四层 -->
<div class="biz-tier t4">
<span class="t-label l4">第四层 · 高客单达人服务</span>
<div class="t-title">利润大头</div>
<div class="t-price">平台抽成 35%-45%</div>
<ul class="t-list">
<li>视频一对一咨询(主力新形态)、语音、图文咨询</li>
<li>定制录制专属短视频解读:达人录制 5-15 分钟定制视频</li>
<li>达人付费短视频专栏课程(占星、性格成长)</li>
</ul>
</div>
<!-- 新增创新商业化 -->
<div class="feat-card">
<div class="f-title">新增创新商业化(测测不具备)</div>
<div class="f-desc">
<strong>视频报告增值模板商店</strong>:付费购买不同风格视频模板(星空治愈、极简心理风、酷感潮酷风),几块钱单次渲染<br>
<strong>B端对外接口</strong>:把「生辰生成个性化视频报告」能力对外输出,给其他心理、社交应用做能力授权
</div>
</div>
</div>
<!-- 用户体验闭环 -->
<div class="section">
<div class="sec-title"><span class="dot"></span>用户体验完整闭环</div>
<div class="flow-wrap">
<div class="flow-step">
<div class="step-num">1</div>
<div class="step-content">新用户下载 → 输入生辰 / 做性格测试</div>
</div>
<div class="flow-step">
<div class="step-num">2</div>
<div class="step-content">得到结果:<strong>查看文字报告</strong> <strong>播放我的专属视频报告</strong></div>
</div>
<div class="flow-step">
<div class="step-num">3</div>
<div class="step-content">免费版短视频 → 提示开通会员解锁完整版无水印视频</div>
</div>
<div class="flow-step">
<div class="step-num">4</div>
<div class="step-content">用户把短视频分享小红书/抖音 → 带来新用户回流下载</div>
</div>
<div class="flow-step">
<div class="step-num">5</div>
<div class="step-content">应用内看短视频社区内容,种草达人</div>
</div>
<div class="flow-step">
<div class="step-num">6</div>
<div class="step-content">小额单次报告 → 开通会员 → 预约达人视频一对一咨询</div>
</div>
</div>
</div>
<!-- 与测测对比 -->
<div class="section">
<div class="sec-title"><span class="dot"></span>优劣势对比</div>
<div class="cmp-table">
<table>
<tr>
<th></th><th>测测</th><th style="color:var(--pri)">星镜</th>
</tr>
<tr>
<td>报告载体</td>
<td>图文+海报,静态</td>
<td class="win">AI个性化短视频 + 动态三维星盘,保留图文</td>
</tr>
<tr>
<td>社区形态</td>
<td>微博式图文为主</td>
<td class="win">短视频信息流优先,图文为辅,支持用户发布个人测试视频</td>
</tr>
<tr>
<td>对外裂变</td>
<td>只能图片海报传播</td>
<td class="win">短视频自带社交平台传播能力,外部引流更强</td>
</tr>
<tr>
<td>咨询形态</td>
<td>图文、语音连麦为主</td>
<td class="win">视频咨询 + 达人定制短视频回复,同时兼容语音图文</td>
</tr>
<tr>
<td>核心短板</td>
<td>文字阅读负担重,传播弱</td>
<td class="tag-gold">AI视频生成有算力成本;需要做好内容风控</td>
</tr>
</table>
</div>
</div>
<!-- 风险与规避 -->
<div class="section">
<div class="sec-title"><span class="dot"></span>核心风险与规避</div>
<div class="risk-card">
<div class="r-title">内容合规</div>
<div class="r-desc">产品定位为<strong>心理娱乐、自我探索工具</strong>,不做宿命论算命;解读偏向性格分析、行为模式、心理成长,弱化"预测吉凶"表述;明确提示:不替代心理咨询及医院就诊。</div>
</div>
<div class="risk-card">
<div class="r-title">成本控制</div>
<div class="r-desc">大量用AI数字人 + 模板化动画引擎——把星盘/测试数据映射到大模型输出脚本,再驱动数字人生成视频;鼓励达人上传预制短视频内容承接咨询。</div>
</div>
<div class="risk-card">
<div class="r-title">兼容存量用户</div>
<div class="r-desc">不完全砍掉图文模式,给用户开关选择「视频版 / 传统文字版」报告,照顾不喜欢视频的人群。</div>
</div>
</div>
<!-- MVP -->
<div class="section">
<div class="sec-title"><span class="dot"></span>最小可落地版本</div>
<div class="sec-subtitle">优先实现,无需一次性做完全部</div>
<div class="mvp-grid">
<div class="mvp-item"><div class="mvp-num">1</div><div class="mvp-text">基础排盘引擎 + 性格测试</div></div>
<div class="mvp-item"><div class="mvp-num">2</div><div class="mvp-text">30秒AI数字人短视频报告</div></div>
<div class="mvp-item"><div class="mvp-num">3</div><div class="mvp-text">三维动态星盘基础动画</div></div>
<div class="mvp-item"><div class="mvp-num">4</div><div class="mvp-text">短视频信息流社区</div></div>
<div class="mvp-item"><div class="mvp-num">5</div><div class="mvp-text">会员订阅体系</div></div>
<div class="mvp-item"><div class="mvp-num">6</div><div class="mvp-text">真人视频预约咨询</div></div>
</div>
</div>
<div class="bottom-spacer"></div>
<a href="index.html" class="back-link">← 返回愈心谷首页</a>
</body>
</html>