All posts
UI design

How to Design UI with DeepSeek V4 (Pro vs Flash, 2026)

Design UI with DeepSeek V4 Pro and Flash: 1M-context text-only workflow, DESIGN.md, Codex-compatible prompts, and templates that replace screenshots.

AD
Agent's Design

Designing UI with DeepSeek V4 means picking Flash for cheap section loops and Pro for long 1M-context builds, then compensating for no vision with a stricter DESIGN.md than you would give Kimi K3 or Grok 4.6. V4 is built so agents can actually use a million tokens. It cannot see your preview. The spec has to describe what a screenshot would have shown.

API IDs: deepseek-v4-pro and deepseek-v4-flash. Comparison with K3 and Grok 4.6: Kimi K3 vs DeepSeek V4 vs Grok 4.6.

What DeepSeek V4 is good at for UI

V4 shipped April 24, 2026 as a two-tier open-weight family. Pro is 1.6T total / 49B active. Flash is 284B / 13B. Both are text-only with a 1M context. Hugging Face's overview of the paper is the useful framing: the win is KV-cache cost at long depth, not a new aesthetic engine.

StrengthUI impact
Cheap long context (Flash)Iterate sections all afternoon without frontier prices
1M window (both)Keep DESIGN.md, template prompt, and several routes loaded
Interleaved thinking with toolsFollow-up "fix the hero spacing" does not wipe the plan
Codex-adapted Flash (July 31)Drop into Codex-style harnesses with less glue
Open weightsSame checkpoints on the Hub and the API

Use Flash as the default UI grunt. Switch to Pro when the page spans many files or the agent is losing the brief.

Why V4 UI work is spec-heavier than Kimi or Grok

Kimi K3 and Grok 4.6 can take a screenshot. V4 cannot. If you write "the hero feels tight," V4 guesses. If you write "headline text-5xltext-4xl; gap under subhead 16px24px; only edit hero.tsx," V4 executes.

That is the whole method: numeric, file-scoped instructions plus a DESIGN.md that forbids the median SaaS page.

Three reasoning modes: Non-think, Think High, Think Max. Think Max wants at least 384k context. For UI, Think High is usually enough. Max is for gnarly refactors, not "change button padding."

Recommended sampling from the V4 docs: temperature=1.0, top_p=1.0.

Pro vs Flash for interface work

JobModel
One section, tight files, many retriesV4 Flash
Whole landing + shared layout in one sessionV4 Pro
Token budget is the constraintFlash
Agent dropping constraints mid-tracePro
Codex / ChatGPT coding harnessFlash (0731 Codex-adapted API)

Do not run Max-think Flash on every spacing tweak. You will wait and still not get taste.

The DeepSeek V4 UI stack

LayerWhere it lives
Modeldeepseek-v4-flash or deepseek-v4-pro
DESIGN.mdRepo root, more numeric than for vision models
Template promptPROMPT.md with named sections
Skills.agents/skills/ or .codex/skills/ (V4 skills guide)
HarnessDeepSeek API, Codex-compatible client, or OpenAI-compatible base URL

Legacy IDs deepseek-chat and deepseek-reasoner retired July 24, 2026. Do not use them in new UI scripts.

Step 1: Write a DESIGN.md V4 cannot dodge

Lead with measurable rules:

  • Exact font families and Tailwind size steps
  • Color roles mapped to CSS variables or theme keys
  • Section padding (for example py-24 desktop, py-16 mobile)
  • Hero split (55/45) and max content width
  • Anti-patterns as a checklist, not a vibe

Copy a spec from the gallery and add numbers where the gallery is qualitative. Format: agent-ready DESIGN.md.

First prompt:

Read DESIGN.md and PROMPT.md.
Restate tokens, type scale, and anti-patterns in a short list.
Do not edit files until I name a section and paths.
If a visual choice is not in DESIGN.md, ask. Do not invent.

Step 2: Section loops on Flash, assemble on Pro

Flash loop:

  1. Name the file (components/landing/hero.tsx)
  2. Paste the section of PROMPT.md that applies
  3. Require existing primitives (components/ui/button.tsx)
  4. Review in the browser yourself
  5. Send a measured correction, not a screenshot

Example correction V4 can use:

In hero.tsx only: reduce h1 from text-6xl to text-5xl. Change the CTA row gap from gap-2 to gap-4. Do not touch the nav.

When the page has a shell plus four sections and the agent starts restyling the footer, switch the session to Pro and re-attach DESIGN.md.

Step 3: Tool schema and harness gotchas

V4 prefers a |DSML| XML tool format over nested JSON strings. If your agent CLI still emits JSON-in-string tools, expect a setup pass. Official API supports OpenAI Chat Completions and Anthropic-style interfaces; the model id is the switch.

Keep reasoning across tool turns (V4 does this when tools are in play). That helps multi-step UI. It does not help if DESIGN.md was never in the first turn.

When to use templates with DeepSeek V4

Always, if the alternative is "build a modern landing page." V4 will happily emit the internet's average site for cheap. A template is the cheapest way to not do that.

See UI templates for DeepSeek V4. Gallery templates work because they are text: prompts and markdown specs, not Figma. That matches a text-only model.

DeepSeek V4 vs Kimi K3 vs Grok 4.6 for UI

NeedPick
Lowest cost section grindV4 Flash
Screenshot feedbackKimi K3 (guide)
Cursor, image in, frontier first passGrok 4.6 (guide)

Share one DESIGN.md. V4's copy of it should be the strictest.

Common DeepSeek V4 UI mistakes

MistakeBetter
"Make it look like the screenshot"Describe pixels, type steps, gaps
Pro + Think Max for a buttonFlash, Non-think or High
Legacy deepseek-chat iddeepseek-v4-flash
No file pathsNamed files every turn
AdjectivesTokens

FAQ

Can DeepSeek V4 design UI from a screenshot?

Not natively. It is text-only. Describe the screenshot, or use Kimi K3 / Grok 4.6 for the visual pass and V4 Flash for cheap follow-up code edits with a written punch list.

Is V4 Flash good enough for production UI?

For implementing a spec, yes. For inventing a visual system, no. Flash plus Agent's Design is a production path. Flash plus "make it premium" is not.

Should I use Think Max for landing pages?

Only if the agent is lost in a large refactor. Spacing and section builds do not need Max. Max also wants a large context window (384k+).

Does V4 work in Cursor?

Via whatever custom model / OpenAI-compatible endpoint you configure. It is not the day-one Cursor model the way Grok 4.6 is. Many teams run V4 in Codex-style CLIs instead.

Spec first, then spend the 1M window

DeepSeek V4 will stay in context longer than last year's open models. Fill that window with a brief, not with another request to "make it pop."

Copy DESIGN.md and a template prompt from the Agent's Design gallery, run Flash for sections, and keep Pro for the long assemble.

Ship the next screen with taste

Browse agent-ready templates, DESIGN.md specs, and prompts in the gallery — then paste into Cursor, Claude Code, or v0.

Keep reading