I recently redesigned this blog. I took the visual direction from GOV.UK Design System, checked alphagov/govuk-frontend for implementation details, and asked codex-cli with gpt-5.4 to do most of the coding.

So yeah, this was mostly vibe coding. I only used manual coding for small final tweaks.

Why GOV.UK

I have liked the GOV.UK style for a while. It’s plain. Not in a lazy way though. The pages are easy to read, spacing feels right, and nothing tries too hard to be clever.

Part of that comes from applying for a UK visa before. The GOV.UK service pages left a strong impression on me. The flow was very direct. Kind of boring, but in a good way. It helped me finish a serious task without getting in the way.

I also noticed that my former colleague Han Li uses a GOV.UK-inspired style on his blog. That made me want to try it here too.

I mostly looked at these:

• Styles: page structure, typography, spacing, colour and image guidance.
• Components: buttons, forms, breadcrumbs, details, error messages, notifications, pagination, tables, tags and more.
• Patterns: task-focused page patterns such as addresses, check answers, validation errors and starting a service.
• govuk-frontend: the frontend implementation behind the design system.

At the time of writing, the latest release shown on the Design System homepage is GOV.UK Frontend v6.1.0, released on 2 March 2026.

The vibe coding part

I used codex-cli with gpt-5.4 directly in the repository. It read the Hugo project, changed the theme files, and ran the build after edits.

Nothing fancy here, just:

• Ask Codex to look at the repo first.
• Give it the GOV.UK Design System links and the govuk-frontend repository.
• Let GPT-5.4 generate a first pass.
• Run the site locally and ask for changes.
• Fix the remaining details by hand.

Honestly that’s the part I like: fast iteration, then a little manual coding when taste or judgement is needed.

Rendering check

The section below is example data for checking Markdown rendering.

Heading 1

Heading 2

Heading 3

Heading 4

This is a normal paragraph with bold text, italic text, bold italic text, inline code, and a link to GOV.UK Design System.

This is a blockquote.

It can contain multiple paragraphs for quotes, notes or excerpts.

Unordered list:

• Alpha
• Beta
• Gamma

Ordered list:

1. First item
2. Second item
3. Third item

Task list:

• Read the design system
• Generate the first draft
• Polish the last details

Table:

Code block:

<a class="govuk-button" href="/start">
  Start now
</a>

Horizontal rule:

Image:

Footnote example.¹