万形
文字即界面，留白即设计，克制即力量
概览
万形是什么
万形是一个专注于文心（Wenxin）设计语言的移动端应用概念展示。它将「文字即界面，留白即设计，克制即力量」的核心哲学带到移动端，在保持文心灵魂层（A9 克制之美、B9 温暖极简、D9 暖土调）不变的前提下，适配移动端的交互模式与平台惯例。
文心设计语言如同一杯水——本质永远不变，但倒入杯中即成杯形，流入河道即成河形。万形移动正是这杯水在移动端容器中的形态。
设计语言
文心正典
文心设计语言由三层结构构成。灵魂层（色彩系统、字体哲学、留白密度、点睛之色、动效节奏）永远不变；形态层（布局结构、导航形式、内容组织）随产品类型而化。点睛之色——砖红色——全页出现不超过两处，如同水墨画中的朱砂印章。
- 色彩：暖白底色 #F2F0EB，深炭文字 #3A3837，砖红点睛
- 字体：衬线优先 — Lora / EB Garamond / Noto Serif SC 组成温暖阅读体验
- 留白：大区块间距 ≥ 96px，觉得「太空了」往往才是对的
F2 形态
文心移动
文心移动（Wenxin Mobile）将文心设计语言适配到移动端。在保持灵魂层不变的前提下，适配 iOS HIG 与 Android Material Design 的平台惯例，核心统一、边缘适配。
iOS HIG + Android Material
iOS Tint Color 映射为文心 Accent；Android 不跟随 Material You 动态色，文心色彩灵魂不可妥协。系统控件样式注入文心色板，核心统一、边缘适配。
底部 Tab Bar · 导航栈 · Sheet 模态
3–5 个底部 Tab，线条图标，Accent 激活态。Push/Pop 动画使用文心缓动 420ms。Sheet 模态从底部滑入，遮罩层半透明。
触控目标 ≥ 48pt · 安全区域
最小触控区域 48pt（跨平台统一值），视觉元素小于此值时使用 padding 扩展 hit area。安全区域使用 env(safe-area-inset-*) 避开刘海屏和底部手势条。
温和流动映射
按钮按下使用 Light Impact 触觉，重要操作确认使用 Medium Impact，开关切换使用 Selection。连续快速操作避免过度触觉反馈。
E9-1 春雨
Push/Pop 过渡 420ms ease-out。Tab 切换内容淡入 + 微上移 4px。构建动画 stagger 60ms。品牌标识符 ■ 呼吸 4s 周期。尊重 prefers-reduced-motion。
九种演化
文心形态
文心设计语言支持九种正式输出形态。每一种都在保持灵魂层（A9/B9/D9）不变的前提下，适配特定媒介和场景。
文心正典 · HTML Web
响应式网站，暗色模式就绪，内容宽度 clamp() 流体布局。适用于博客、作品集、Landing Page。
文心移动 · Mobile App
iOS / Android 原生或混合应用。触控目标 ≥ 48pt，安全区域适配，平台核心统一边缘适配。你当前正在浏览的即是此形态。
文心品牌 · Brand Identity
朱砂印章 Logo 系统——砖红底座 + 纯白负空间冲压。品牌标识符 ■ 8×8px，呼吸动效 4s 周期。
文心书卷 · Print & Editorial
书籍、论文、杂志排版。pt 单位，CMYK 映射，Van de Graaf 经典版面。E8 印刷静止——无动效、无暗色模式。
文心演示 · Presentation
16:9 幻灯片，展示优先字号（14–88px）。6 种幻灯片类型，构建动画 fade-up stagger。演讲者备注独立区域。
文心文档 · Documentation
双栏布局（侧边栏 240px + 内容区），暖色调语法高亮（棕/金/红/灰），增强代码块含标题栏与复制按钮。
文心海报 · Poster & Cover
单页最强视觉表达。6 种画布比例，4 种构图模式。展示字号 12–192px，accent 可放宽至标题 + 署名各 1 处。
文心图解 · Diagram & Knowledge Map
架构图、流程图、知识地图。SVG/HTML 独立交付，Mermaid 转文心 SVG 重绘，禁用彩虹色块和粗黑箭头。
文心报告 · Report & LaTeX
Markdown → LaTeX → PDF 报告排版。核心章节：Executive Summary / Findings / Recommendations。论证即界面。
文心正式形态固定为 F1–F9，不再扩张。Newsletter、Dashboard、电商、游戏等不进入正式形态。
项目
关于万形
万形（Wanxing）是一个专注于文心设计语言的 OpenCode 设计工程项目。进入 wanxing 目录后，opencode 自动加载文心设计规范，用户描述需求即可产出 UI。
架构包含三层：Meta Agent（需求理解、约束澄清、分发）、Wenxin Agent（设计语言执行、HTML/CSS 输出）、Audit Agent（Render Contract + 截图视觉层 + 动效运行时审计）。
Token 速览
色彩
| 语义 | 亮色 | 暗色 |
|---|---|---|
| 暖白背景 | #F2F0EB | #1A1816 |
| 内页背景 | #FAFAF8 | #201E1B |
| 主文字 | #3A3837 | #E8E3DC |
| 辅助文字 | #888580 | #8A857D |
| 点睛色 | #8B3525 | #C4533E |
字体
| 用途 | 字体栈 |
|---|---|
| 展示/标题 | Lora, Georgia, Noto Serif SC, serif |
| 正文 | EB Garamond, Crimson Text, Noto Serif SC, serif |
| UI 标签 | system-ui, Noto Sans SC, PingFang SC, sans-serif |
| 代码 | JetBrains Mono, Fira Code, SF Mono, monospace |
间距
| Token | 值 | 典型用途 |
|---|---|---|
| --space-4 | 16px | 卡片内边距 |
| --space-5 | 20px | 段落间距 |
| --space-8 | 32px | 标题与正文 |
| --space-12 | 48px | 小区块间距 |
| --space-24 | 96px | 大区块间距 |
Wenxin Design Language · Version 3.0.0 · 2026