Oil UI
Agent 指南 · DeepSeek Harness

DeepSeek Harness 原生插件(dsh-oil-ui)安装与 UI 设计实战

如果你使用 DeepSeek Harness 编写前端或独立页面,可以直接安装专门适配的原生插件 dsh-oil-ui。插件内置了 Oil UI 开源版,并会自动识别你本机是否已经安装 Oil UI Pro。画廊中也收录了多件由 DeepSeek 4.1 Flash 在同一任务简报下制作的作品,方便你直观对比不同模型的落地效果。

核心要点

  • 在终端运行 dsh plugin --profile web add github:oil-oil/dsh-oil-ui 即可为 DeepSeek Harness 装好原生插件。
  • dsh-oil-ui 内置免费版设计流程;当你本机装好 Oil UI Pro 后,插件会自动识别并切换到 Pro 的完整能力。
  • 画廊提供了同一任务简报下 DeepSeek 4.1 Flash 与 GPT 模型的同题作品(如 Vesper、Atelier Volders、Fonderie Mercier、Sonar),可逐页对照参考。
  • 使用轻量或高速模型时,把任务拆成清晰的版式结构与必选状态,能显著提升首轮生成的稳定度。
在 DeepSeek Harness 中安装 dsh-oil-ui 原生插件
dsh plugin --profile web add github:oil-oil/dsh-oil-ui

插件仓库地址:https://github.com/oil-oil/dsh-oil-ui(内置免费版,自动识别本机已装的 Oil UI Pro)。

安装 dsh-oil-ui 原生插件与 Pro 自动识别

DeepSeek Harness 提供了基于 profile 的插件机制。为了让开发者不用手动复制提示词文件或配置路径,我们将 Oil UI 封装成了原生插件 dsh-oil-ui,挂载在 web profile 下即可开箱使用。

  1. 添加 dsh-oil-ui 插件到 web profile

    在终端执行下面的命令,DeepSeek Harness 会拉取插件并启用开源版设计流程。

    dsh plugin --profile web add github:oil-oil/dsh-oil-ui
  2. (可选)安装本机 Oil UI Pro,插件自动识别

    如果你购买并通过 oil-cli 在本机安装了 Oil UI Pro,dsh-oil-ui 启动时会自动检测到本机的 Pro 文件并直接调用 Pro 工作流,无需额外修改插件配置。

    npx github:oil-oil/oil-cli install oil-ui-pro
  3. 用具体任务启动设计

    在 DeepSeek Harness 中给出产品背景、目标视口(如 1440×900 或 390×844)和需要验证的 3 个关键状态,按“方向对比 → 选定深入 → 截图走查”推进。

同题对照:DeepSeek 4.1 Flash 在真实任务下的表现

很多团队关心一个实际问题:用速度更快、成本更低的模型(如 DeepSeek 4.1 Flash)配合 Oil UI,能做出什么水准的界面?和顶级大模型相比差别在哪里?

为了给出可验证的答案,我们在画廊里用完全相同的任务简报(TASK.md),分别用 DeepSeek 4.1 Flash 与 GPT 6.1 Sol / GPT 5.4 制作了多组作品。你可以直接点开下面四组作品的在线演示与提示词:

画廊中 DeepSeek 4.1 Flash 与 GPT 系列同题作品对照
产品与任务简报DeepSeek 4.1 Flash 作品同题 GPT 系列作品看点与差异观察
Atelier Volders(比利时橡木三脚凳工坊官网)Atelier Volders · 楔木工坊 (volders-wedge)器物年轮 (volders-grain) / 河岸原木 (volders-hearth)同样实现 3 种高度与 3 种木蜡油表面实时切换、无实拍图下的材质表达与批次预订
Fonderie Mercier(家族青铜铸钟坊官网)Fonderie Mercier · 钟室回响 (mercier-bell)青铜之声 (mercier-voice) / 每月一炉 (mercier-pour)核心都在试听不同钟径的基频与泛音衰减曲线,并按音高与铭文申请排期
Vesper(API 用量计费与账单后台)Vesper · 账目总控 (vesper-ledger)Vesper (vesper, GPT 5.4)1440×900 账单控制台:日常筛选、异常账单时间线与命令面板的两种账本布局
声场 Sonar(30-300 人团队即时通讯)声场 · 暗室 (sonar-desk)声场 · Sonar (chat2, GPT 6.1 Sol)同为三态桌面IM(繁忙频道、消息串展开、@提及与拖入文件待发送)的深浅调探索

给 DeepSeek 4.1 Flash 等高速模型的提示词建议

Skill 能帮模型建立清晰的设计秩序、避开常见的 AI 俗套,但最终上限仍受模型自身能力影响。使用高速模型做界面时,注意以下三点能让产出更稳:

把业务规则写进提示词,不要留给模型猜
像《Atelier Volders》简报那样,直接写明“32cm 矮凳 €240、45cm 餐桌凳 €270、62cm 吧台凳 €310,每月仅做 24 把”,具体的数字与规则能让版面立刻长出真实的骨架。
一次只聚焦一个主交互
在每个页面或状态里明确唯一的主角(如铸钟坊的泛音谱线试听器、年度听歌报告的点阵年鉴),避免在同一屏里塞入五六种互不相关的动画。
坚持跑完真实截图走查
高速模型有时会在长列表或窄视口下漏掉溢出处理。打开真实浏览器截取 1440px 与 390px 画面做一轮修补,往往能把完成度再往上提一档。
适合在 DeepSeek Harness 中使用的工艺/品牌官网提示词
用 Oil UI 设计并实现 [品牌名称,例如:家族式手工器物工坊] 的官网(桌面 1440×900,响应式兼容至 390 宽)。
- 产品与核心参数:只聚焦一件核心器物,提供 [3 种尺寸与对应价格] 以及 [3 种材质/表面处理],访客可在首屏或定制区实时切换并看到参数与价格变化。
- 必含区块:器物实时定制与音频/材质反馈、制作工序时间线、批次印记说明、本批次预订表单。
- 交付要求:不依赖外部实拍图,靠版式、字体与自绘图形展现质感;实现定制切换与预订状态并截图验证。

安装 dsh-oil-ui 后直接发给 DeepSeek Harness 即可触发完整设计流程。

画廊真实案例与提示词参考

打开在线演示查看 1440px 或 390px 下的实际页面,对比不同模型与提示词做出的最终效果。

Atelier Volders · 楔木工坊 · 手作家具工坊官网

Atelier Volders · 楔木工坊

手作家具工坊官网

DeepSeek 4.1 Flash1440×900

比利时根特 Korenlei 14 号的一家双人木工坊官网(1440×900 起,响应式到 390 宽),界面用英文。工坊只做一件器物:手工车削、楔入榫卯的实心橡木三脚凳 De Drievoet。木料在河岸棚下自然风干三年,每月只开窑做一批、固定 24 张。 提供三种高度(32 cm 炉边矮凳 €240、45 cm 餐桌与书桌凳 €270、62 cm 带白蜡木脚圈的高脚凳 €310)和三种表面处理(白亚麻籽皂洗原木、氨熏深褐橡木、熟亚麻籽油蜂蜡)。访客可以实时切换高度与木料表面查看变化,了解六周制作工序、凳底热烙批次印记与周六工坊开放时间,并预留当月批次。不提供现成产品照片。

查看作品与提示词 →
Fonderie Mercier · 钟室回响 · 家族青铜铸钟坊官网

Fonderie Mercier · 钟室回响

家族青铜铸钟坊官网

DeepSeek 4.1 Flash1440×900

法国里昂索恩河畔 Quai Saint-Vincent 28 号的一家三代家族铸钟坊官网(1440×900 起,响应式到 390 宽),界面用英文。工坊用 78% 铜、22% 锡的钟铜在河沙模中浇铸案头与建筑青铜钟 Le Bourdon de Table,冷却后上车床旋削内壁调准音高,每月只开炉浇铸一次、固定 18 只。 提供三种尺寸与音高(Ø 72 mm 案头钟 A4 440Hz €180、Ø 96 mm 庭院钟 F#4 370Hz €240、Ø 124 mm 附锻铁壁架与生皮拉绳的门廊钟 D4 293.7Hz €340)及三种包浆(车床原色青铜、烟熏深褐、盐霜铜绿)。访客可以试听三个音高、切换尺寸与包浆,查看五道浇铸调音工序、冠部冷钢印记录与周五开放时间,并填写下一炉的预留单。不提供现成照片。

查看作品与提示词 →
Vesper · 账目总控 · API 用量计费与账单后台

Vesper · 账目总控

API 用量计费与账单后台

DeepSeek 4.1 Flash1440×900

为 AI 与开发者工具团队设计一个 API 用量计费与客户账单管理后台,采用英文界面,桌面视口为 1440×900。用户可以管理订阅方案与实时 API 用量,查看本周期应收金额和异常账单,按状态与用量阈值筛选客户或账单,并打开单条记录查看计费明细、扣款与 Webhook 时间线及事件报文,完成重试扣款、调整配额或导出账单等操作。 实现三个关键状态:展示收入与用量走势、客户或账单列表及实时筛选的日常工作区;展示用量拆解、状态时间线和恢复操作的异常账单详情;以及快捷命令面板。交付可离线打开的 `index.html`,并以 1440×900、DPR=2 截取 `shots/desktop.png`、`shots/state-1.png` 和 `shots/state-2.png`。

查看作品与提示词 →
声场 · 暗室 · 团队即时通讯

声场 · 暗室

团队即时通讯

DeepSeek 4.1 Flash1440×900

一个给 30–300 人公司用的即时通讯桌面端(1440×900):左边是频道、群组和私聊,中间是正在进行的对话。消息里有文字、图片、文件、代码片段、投票和表情回应。界面用中文。 聊天的即时感是这件作品的核心:发出一条消息、几个同事同时在输入、对某一条展开话题回复、别人的回复和表情实时冒出来,都要顺手、有分量。不要做成邮件客户端或任务看板。 设计三个状态:一个热闹频道里的日常对话;在某条消息上展开话题回复;在输入框里 @ 同事、拖进文件后准备发送。

查看作品与提示词 →
浏览同类案例合集 →

dsh-oil-ui 与 Oil UI Pro 无缝衔接

已经装了 dsh-oil-ui 的用户如果要升级到 Oil UI Pro,只需在本机执行下面的安装命令完成授权。dsh-oil-ui 会自动识别本机已装的 Pro,立即启用老项目改造、10 类后台骨架和多轮盲审。

了解 Oil UI Pro 完整能力
npx github:oil-oil/oil-cli install oil-ui-pro
了解 Oil UI Pro 完整能力 →

常见问题

dsh-oil-ui 和 npx skills add oil-oil/oil-ui 有什么区别?

dsh-oil-ui 是专为 DeepSeek Harness 打包的原生插件(通过 dsh plugin --profile web add 安装),内置了免费版并支持自动识别本机已装的 Oil UI Pro。如果你使用的是 Claude Code、Codex、Cursor 或 Windsurf,则使用 npx skills add oil-oil/oil-ui。

DeepSeek 4.1 Flash 适合做哪类界面?

从画廊实测看,它在结构清楚的品牌官网(如《楔木工坊》《钟室回响》《秩序刻盘》)、规则明确的账单与消息工作台(《账目总控》《声场 · 暗室》)以及卡片式年度报告(《Tempo · 点阵年鉴》)上都能交出干净、可用的作品。

装了 Oil UI Pro 后需要卸载 dsh-oil-ui 吗?

不需要。在 DeepSeek Harness 里保留 dsh-oil-ui 即可,它会自动检测并优先加载你本机安装的 Oil UI Pro。

能查看画廊里 DeepSeek 作品的原始提示词吗?

可以。点击任意作品卡片进入详情页,展开“查看任务提示词”即可看到生成该作品时使用的完整中英文简报与模型标识。

延伸阅读