Development workflow Advanced
The design QA checklist to run before release
Most design problems found after release are catchable before it, in order. Here is the pass, in three stages: rules, states and real devices.
Technote
WordPress know-how, from real work Technotes worth picking
17 articles· Development workflow · Designers
Development workflow Advanced
Never deploy without a way back
A rollback is not one button. It is two tracks — code and database — with an order to reverse them in, written down before you deploy.
Development workflow Practical
Review the build against the rules, not against pixels
"Nudge it up two pixels" fixes one spot. "That value is outside the scale" stops the same mistake recurring.
Development workflow Practical
Hand over a spacing scale, not a list of numbers
"37px here" solves exactly one spot. "Spacing is chosen from these twelve steps" solves every screen you never drew as well.
Development workflow Advanced
Visual regression: guarding the screens that must not change
Change one line and something unrelated shifts — an everyday CSS event. Screenshot comparison catches it, but the real work is choosing what to guard and keeping false…
Development workflow Practical
Turning taste arguments into rule checks
"It feels a bit cramped" can be neither argued with nor fixed. Spacing off the scale, colour off the palette, contrast below threshold, missing states — four rules…
Development workflow Practical
Do not swap everything at once
A full swap makes every problem appear at the same moment — which means none of them can be attributed. So you switch one template at a time.
Development workflow Practical
Design with real content, not filler
Filler text of uniform length hides every layout problem you have. Real sentences vary wildly, and that variance is exactly where a layout falls apart.
Development workflow Practical
Review on staging, not in screenshots
A screenshot is one moment under ideal conditions. States, edge cases and real content only surface on staging — and staging has conditions of its own.
Development workflow Practical
Undrawn states are where the build diverges from the design
A composition that shows only the happy path defines half the screen. The other half — empty, error, overlong title — gets improvised during the build, and the…
Development workflow Intro
Getting design and code to use one set of names
Different names mean a translation step in every conversation. That translation lives only in people's heads, and it never reaches whoever joins next.
Development workflow Intro
Hand over rules, not just screens
Hand over twenty screens and the developer asks about the twenty-first. What lets them build the screens you never drew is a set of rules — and rules…
Cited
Technotes worth reading next
Topics outside WordPress are collected on Dongji Communication Tech Insights, run by the same team. The summaries below are quoted from the originals; the titles link to them.
-
Working with AI
Writing a CLAUDE.md — teaching an AI coding assistant your project
AI coding tools such as Claude Code, Cursor and Copilot do better work the more precisely they know your project. Here is a structure and a set of principles that hold up.
-
Working with AI
Prompting an AI for UI design — drafting with Claude and GPT
Asking an AI to "make a nice button" gets you a disappointing button. Structured prompts that carry constraints, references and a defined role get you the design you meant.
-
Themes & plugins
SCSS from the ground up — variables through module structure
The core syntax of SCSS (Sass) and what it solves that plain CSS cannot: variables, nesting, mixins, @use and module structure — organised around patterns you can use immediately.
-
Themes & plugins
Design tokens and theme colour systems — brand identity in SCSS variables
How to turn a colour palette from a pile of hex codes into a system that means something — semantic token structure and SCSS variable patterns, from a real project.
-
Performance optimization
Designing a responsive typography system — the science of readability
Hard-coded pixel font sizes are over. Type scales, fluid sizing with clamp(), Korean webfont optimisation and line-height ratios — building typography that reads well on any screen.
-
Development workflow
From Figma to SCSS — a designer-developer handoff guide
Minimising what gets lost between a Figma file and the code: extracting tokens, naming components, keeping the spacing system in sync — the whole workflow, step by step.