DJI

DJI
难度:
行业风格
DJI 效果预览

效果预览

设计规范

由官方品牌资料与该风格提示词推导的关键 token,可复制或配合下方 DESIGN.md 使用。

颜色

  • primary品牌色

    主操作与高亮

  • on-primary推导

    主色上的文字

  • secondary推导

    标签、徽章与次级强调

  • on-secondary推导

    辅色上的文字

  • neutral提示词

    页面底色

  • on-neutral推导

    底色上的文字

  • surface推导

    卡片、面板与浮层

  • on-surface推导

    表面上的文字

  • border推导

    边框与分割线

圆角与形状

提示词
sm · 4px
md · 8px
lg · 12px
full

交互控件使用全圆角胶囊形状。

间距

推导
  • sm8px
  • md12px
  • lg24px

阴影与层级

推导

层级由细边框与色调分层表达。

字体

提示词
  • Ag

    标题 32px · 粗体

    Open Sans

  • Ag

    正文 16px · 常规

    Open Sans

  • Ag

    标签 13px · 中等

    Open Sans

白色影棚是 DJI 页面的底色:全幅产品渲染嵌在等宽白缝分隔的方角图块里,界面元素退到摄影之后。品牌站只用一种工程蓝(#0070d5)承担主操作,商店切换为略亮的 #0060ef,胶囊按钮配 1px 墨色描边次按钮,橙褐色(#be4e04)仅以小号字标提示产品等级。Open Sans 以 -0.02em 至 -0.03em 的负字距和 600/400 的窄字重区间,塑造紧凑而工程化的阅读节奏;商店再叠加 8px 选项卡、2px 蓝色选中环与吸底购买栏。

DJI媒体与消费

提示词模板

基础模板
Design a DJI-inspired interface. - Photography-first showroom: full-bleed studio renders in square, gutter-separated tiles on a white canvas; - One engineering blue for every primary action -- #0070d5 on the brand site, #0060ef in the store -- always expressed as a pill, with 1px ink-outline pills for secondary actions; - Open Sans throughout with negative tracking (-0.02em body, -0.03em headings) and a narrow 600/400 weight range; - Burnt-orange (#be4e04) eyebrow labels marking product tier, never used as a button fill; - Store surfaces built from 8px option cards with a 2px #0060ef selection ring and a sticky white purchase bar. Colors: #0070d5, #0060ef, #be4e04, #262626, #ffffff, #f5f5f5 with #0070d5 accent. Typography: Open Sans.

变体提示词

📱 移动端
Design a mobile app with DJI aesthetics. Use DJI color identity with #0070d5 accents. Photography-led cards, pill actions, and a compact sticky purchase bar.
💻 Web端
Design a web application with DJI style. Use DJI color identity with #0070d5 accents. Square studio tiles, white gutters, and restrained engineering-blue actions.
📊 仪表板
Design a dashboard with DJI design language. Use DJI color identity with #0070d5 accents. Telemetry cards, clear spec hierarchy, and pill-shaped filters.
📄 落地页
Design a landing page with DJI visual identity. Use DJI color identity with #0070d5 accents. Full-bleed product hero, square tiles, and a single blue conversion path.

使用示例

DJI 产品商店

Web 端
Build a DJI-style product store page with a full-bleed hero carousel, square studio tiles, and #0070d5 pill CTAs.

DJI 飞行数据仪表板

仪表板
Create a drone fleet dashboard using DJI's restrained system: white canvas, Open Sans, spec cards, and #0070d5 status pills.

✅ 适合场景

  • 无人机与相机产品页
  • 摄影棚式硬件展示
  • 消费电子商店

❌ 不适合场景

  • 高密度后台表格
  • 柔软生活方式品牌

DESIGN.md 文件

符合 design.md 开放格式的设计系统描述,可复制或下载后交给 AI 编程工具使用。

下载