00%
dapeng.uno design

dapeng.uno design

官方品牌设计系统。采用 1B 实心圆角正方蒙版与纯单色极简块状规范，专为 dapeng.uno 母品牌及旗下个人应用、开源系统（如 newapi API 网关）提供全套工程规范、组件交互与 Agent 协作协议。

下载设计资产包 (.zip) llms.txt ↗ tokens.json ↗

02 图标与微缩 (Icons & Scalability)

16px (Favicon)
20px (Nav)
24px (Badge)
32px
48px (Touch)
64px (Avatar)
84px (App Icon) 
<link rel="icon" href="https://design.dapeng.uno/icons/favicon.svg" type="image/svg+xml">
<link rel="apple-touch-icon" href="https://design.dapeng.uno/icons/favicon.svg">

03 颜色与字体 (Color & Typography)

Ink 墨黑
#111111 · --dp-ink
Paper 纸白
#F4F4F1 · --dp-paper
Gray 中性灰
#8A8A8A · --dp-gray
Surface 暗色底盘
#171717 · --dp-surface

04 按钮体系与中间加载态 (Button States)

点击任意按钮体验“加载中”过渡
1. 各种样式层级 (Button Hierarchy)
2. 尺寸梯度与带图标复合按钮 (Sizes & Icons)
<!-- 按钮与中间加载态完整代码 -->
<button class="dp-btn dp-btn-primary" onclick="this.classList.toggle('loading')">
  <span class="dp-btn-spinner"></span>
  <span class="btn-text">提交请求</span>
</button>

05 动效与入场规范 (Motion System)

M01 / SPLASH
01 ↗

全屏开幕穿梭 (Splash Reveal)

指数级放大揭示 · 带有 00%~100% 计数器

M02 / STAGGER
02 ↗

级联入场动画 (Staggered Entrance)

页面加载时区块依次平滑淡入滑上

Cubic Bezier
dapeng / newapi M03 / LOCKUP 03 ↗

导航落位 (.dp-header-lockup)

统一子产品规范 · 引入即生效

开箱即用

06 骨架屏效果 (Skeleton Loading)

在异步数据未返回时使用流光骨架屏，避免布局跳跃（Layout Shift）。点击上方按钮可在“真实数据 / 骨架屏”间无缝切换：

newapi-gateway-01
● 在线 (响应 16.4ms)
MODEL: gpt-4o | LATENCY: 240ms | TOKENS: 14.8k
这是真实数据加载完成后的内容展示，各项工程指标正常运转，支持各种自定义子系统扩展。 
<!-- 骨架屏只需给元素添加 .dp-skeleton 类 -->
<div class="dp-skeleton" style="width: 100%; height: 16px; margin-bottom: 8px;"></div>
<div class="dp-skeleton" style="width: 60%; height: 16px;"></div>

07 规范与 Agent 协同协议 (Usage & AI)

把下方标准化 Prompt 发送给任意 AI Coding Agent，即可让它直接读懂并按此规范构建前端界面： 

你正在为 dapeng.uno 生态开发子系统（如 newapi 网关）。
请遵循以下极简单色（Monochrome Blocky）工程规范：
1. 样式规范：引入 https://design.dapeng.uno/tokens.css ；
2. 标志与 Favicon：使用 https://design.dapeng.uno/icons/favicon.svg ；
3. 导航栏必须使用包含类名 .dp-header-lockup 的标准结构；
4. 严格单色基调：主色仅使用 var(--dp-ink) 与 var(--dp-paper)，严禁使用任何彩色渐变或大范围发光；
5. 所有的指标、数值、Token、状态代号强制使用 var(--dp-font-mono) 等宽字体。
已复制到剪贴板