圆角、柔光、瓷面。
页面以白色瓷面为主，底下垫一层桃/紫/薄荷的极光渐变。大圆角、双层嵌套和带紫调的柔和阴影，让卡片像被磨过，而不是被裁出来。
DESIGN FILE / MINI PROGRAM · 2026
开镜的界面，
长什么样。
温润的瓷白、柔和的渐层、圆润的立体感。用户端已经迁入微信小程序；这里是它的视觉基线、原生页面结构与可点击的 H5 同构预览。
TYPE / DISPLAY
Noto Sans SC
700 → 800
#FF6B57
品牌落地页 · 微信小程序 · 生成运行台
用户端是微信小程序 · 查看小程序预览 →
01 / PRINCIPLES
三条原则，
撑住所有页面。
开镜不是一套“好看的后台”。它要在白色瓷面与柔和渐变之间，同时装下一个品牌、一个内容工作台和一份拍摄文档。
一种强调色，剩下交给层级。
珊瑚橙只负责行动与重点，薄荷绿只负责状态，紫色只做辅助。信息用字号、字重、留白和圆角分层，不靠彩虹。
Aa
每个界面都指向下一步。
生成过程能停，表单会自动保存，方案能导出。界面不是展示结果，是让人把一条视频真正拍完。
✓
02 / COLOR & MATERIAL
白不是留白，
是一层有温度的材料。
中性色向紫灰偏移，让白有冷调的瓷感。强调色只有一个，状态色不与品牌色抢注意力。
瓷白底#F4F2FB页面底色 · 78% 像素
纯白#FFFFFF卡片 · 面板
深墨#211D33主文字 · 主按钮
珊瑚橙#FF6B57唯一强调色
薄荷绿#5DC7AB状态 · 成功
暖黄#F4C36A数字 · 备注
MATERIAL / LOCAL RENDER
瓷面、极光渐变、柔和立体阴影。
全部图像由 tools/generate-art.mjs 在本地生成，没有图库下载、没有外部图床。浅色背景上用带紫调的漫射阴影和内高光，避免“贴纸感”；渐变只做氛围，不压过内容。
22 SVGSVG0 downloadsgrain .012
paper
paper-2
paper-3
surface
surface-3
ink-4
ink-3
ink-2
ink
03 / TYPOGRAPHY
把热点，
拍成你的生意。
先让观众坐到窗边，再给他一杯咖啡。
话术、分镜、时间表，一次给全。
Noto Sans SC · 700 / 780 / 800 字重对比 · 负字距
Displayclamp(3.5rem, 7.4vw, 7rem)−0.05em / .98
Section H2clamp(2.2rem, 4.4vw, 4rem)−0.045em / 1.04
Page H1clamp(1.65rem, 2.4vw, 2.1rem)−0.045em / 1.2
Body16px / 1.7400 · ink-2
Small / Label10–12px500 · ink-3
MonoConsolas · 8.5–11px0.12em tracking
不使用 Inter 作为默认，不靠渐变文字制造层级。数据、时间码和编号统一使用等宽字，保证可扫读。
04 / COMPONENT KIT
不是组件墙，
是工作时的手感。
每个控件都按真实产品状态制作。按钮有按下与禁用，表单有聚焦与错误，生成过程有停止。
BUTTON / 06 STATESPrimitive
主按钮是珊瑚渐变药丸，次级按钮是白色玻璃。箭头永远待在自己的圆形容器里。
TAG / STATUSSemantic
小红书
已生成
抖音
快手
示例数据
30-45秒
8 个镜头
平台、状态、时长共用一种胶囊，只靠语义色与文字区分。颜色之外始终有文字。
FIELD / FOCUS & ERRORForm
会出现在话术、发布包与拍摄通告里。
用一句话描述目标客群
标签永远在输入框上方。错误说明“怎么修”，不是只写“无效”。
CHOICE / RADIO CARDSWorkflow
有后果的选择用卡片，不用裸 radio。选中态同时改变边框、底色与圆点。
FEEDBACK / TOAST & RINGSystem
拍摄通告已导出，可以带去现场
72%
8 / 14 项
拍摄前准备
反馈只出现 3–5 秒；进度环同时给数字与百分比，不依赖颜色。
MOTION / STOPPABLERUN CONSOLE
读取店铺画像
0.5s画像完整度 100% · 3 个卖点
生成三个钩子
进行中先给场景与情绪，不先报店名
生成运行台的主按钮是“停止”。每一步都有名称、结果和耗时，不是一只转圈。
05 / IMAGE SYSTEM
每一张图，
都参与叙事。
22 张本地 SVG：品牌静物、能力卡、门店案例、8 个分镜示意。没有外部图库，加载稳定，也不会撞图。
06 / REAL SCREENS
真实界面，
不是概念稿。
以下截图来自本地运行的工作台，使用演示门店数据。点击标题可以打开对应页面。
下一场拍摄、本周节奏、热点与作品。
选热点、定风格、生成前检查。
创意、逐句话术、分镜、流程与发布包。
结构曲线、逐句技巧与复刻方案。
按行业、城市与拍摄条件筛过的选题。
方案、拆解与收藏话术的留档。
画像完整度与 AI 预览。
08 / MINI PROGRAM MOBILE
小程序里，
带着去现场。
原生 TabBar、44px 触控区、safe-area 内边距。手机首屏只留下一次主动作，生成按钮始终在拇指能到的地方。
以上均为运行中的真实截图，数据为演示门店「山野咖啡」。手机截图在 390 × 844 视口下拍摄，作为小程序的原生页面视觉基线；真实小程序使用原生导航与 TabBar。
09 / DETAILS
质感藏在
这些小事里。
01
可停止的生成
停止是一个常驻主按钮，不是藏在菜单里的取消。停止后立刻改变界面状态，再与服务端对账。
02
会自动说“不知道”
链接读不到逐字文案时，界面明确说需要补充，不会用一段通用文案假装已经读懂。
03
话术与分镜共用一套编号
每个镜头都对应一句或一段话，拍完就能剪，不在后期硬凑。
04
导出是一等公民
方案导出 Markdown 通告单，全部数据导出 JSON。本地优先，不把作品锁在云里。