Dubrovnik Daily – iamchuck.online

THE PROBLEM

Dubrovnik Daily is a local news site that has to pay for itself. That meant two products, not one. Readers needed a fast, clean place to scan the news. The team needed a way to publish, and the business needed a way to sell ads and track leads. The client had no system for either. I designed both, built both with AI, and hosted them on the client's own server. I did it solo, with AI as a very quick pair of hands and me making every decision.

HOW I WORK NOW

This is my daily workflow today. Design and development are one job, powered by AI. It runs in five stages.

Think

ChatGPT helps me work out the roles, the content and what each screen must do.

Draft

The Figma agent gives me a fast first iteration of each screen.

Edit

I rework the draft to my taste and my design system. The draft is never the design.

Connect

Figma MCP sends tokens, icons and assets to Claude, mapped and linked to their source.

Build and Host

Claude builds the front end and back end. I review, then host it on the client's server.

THE BRAND COMES FIRST

Before any screen, I set the visual identity. Simple, black and white, with a calm editorial voice on the public side. Everything after this follows from it.

Typography

Four typefaces with four jobs: Instrument Serif for editorial display, Instrument Sans for the interface, Geist for forms and actions, and Bricolage Grotesque for feature stories. The dashboard stays on Inter only.

Color

Fifteen neutral variables. Color only appears when it carries meaning, like Published, Draft or Delete.

Buttons

DESIGNED IN FIGMA FIRST

Every screen started in Figma, from my own design system. Desktop and mobile were designed together so neither one is an afterthought.

Desktop

Mobile

MAKING MY DESIGN SYSTEM AI READY

AI has limits. It invents values, drifts from the style and forgets earlier decisions. I do not fight that. I remove the guessing. I exported my Figma variables, connected the file to Claude through Figma MCP, then wrote everything down in one markdown file that Claude reads before it builds anything.

It Invents Values

So every color, size and radius is a token. It uses those or nothing.

It Forgets Style

So the rules live in DESIGN_SYSTEM.md and get read at the start of every session.

It Sounds Sure When Wrong

So it must report which tokens it used, and I check them against Figma.

AI ready design system: tokens, components and rules for the AI

The Markdown File In Action

Pulling Real Frames Through Figma MCP

When I share a frame link, Claude reads the variables and the layout straight from Figma, maps them to the tokens in the markdown file, and builds with existing components. Corrections I make become new rules, so the same mistake does not come back.

THE FINISHED SITE

The result is live: a story slider, a Latest feed with five categories, Featured Advertisers, Editor's Picks, a Trending list ranked by views, and a Thursday newsletter. The Advertise With Us page has four placement options and a simple inquiry form. Here it is on mobile, playing on a loop.

Article Detail

THE CUSTOM CMS DASHBOARD

Same system, different surface. No editorial type, no decoration. Black, white and grey, with color only for status. From here the team writes and publishes posts, manages media, tracks who advertises, and sees subscribers. Leads from the Advertise With Us form arrive here too.

Posts

Write, categorise and publish articles with a full editor

Media Library

Upload, preview and reuse images and video

Advertisers

Add advertisers, placements and amounts paid, and feature them on the site

Subscribers

See everyone on the newsletter list

Dashboard In Action

Custom Built, Not a Template

The back end is custom PHP, written with Claude and hosted on the client's own hosting. There is no page builder and no plugin pile. The whole site is controlled from the dashboard, including the categories. The team can create a new category, list the existing ones, and the site updates from there. Posts, media, advertisers and subscribers work the same way, so nothing needs a developer after launch.

WHAT WENT WRONG, AND THE RULES I ADDED

The AI was fast and mostly right, but it slipped in the same places a junior designer would. Each slip became a written rule, and after that it stopped happening.

Spacing Drifted

The gaps between elements did not match Figma. Distances looked close but were not exact. I rechecked every screen against the frame. The new rule: spacing comes only from the spacing tokens, in multiples of 4, never by eye.

Alignment Was Off

Elements sat slightly off the grid and did not line up with the parts around them. The new rule: align to the layout grid from the frame, and compare position against Figma before calling a screen done.

After The Rules

Once both rules were in DESIGN_SYSTEM.md, the next screens came back correct the first time. The fix was not a better prompt. It was a better rulebook.

RESULTS AND WHAT I LEARNED

[ADD: what the client liked, and any real numbers.]

Rules Before Screens

AI is only as accurate as the rulebook. I write the rules first.

Map, Do Not Describe

Linking Figma to code through MCP removed most of the guessing.

Taste Stays Mine

AI gives speed. The judgement that makes it good stays with the designer.