In the previous post, we covered conceptualization and planning, and now we have the specs and plan in hand. But these are still just words—you can’t see or touch them. In this post, we’ll discuss how to turn this text into something visual.
Style Comes First, Then the Visuals
The first step in design isn’t drawing the UI; it’s deciding on the overall visual direction. I used a tool called cinematic-ui, which generates a complete visual theme based on your description of the style.
I provided the following direction: “space-themed, high-tech, dark color palette,” drawing inspiration from the quiet yet tense visual styles seen in films like *Interstellar* and *Gravity*. Once *cinematic-ui* receives these descriptions, it generates a complete design language:
Color system (primary color, secondary color, background color, text color)
Typography (what to use for headings, body text, and labels)
Spacing and layout rules
Tone for motion effects (easing functions, transition durations)
Once this framework is established, it effectively defines the visual DNA of the entire website. Every subsequent page is developed within this framework.
Confirming the Direction with Design Consultation
Once we have a preliminary visual theme, I use the design-consultation skill to make more detailed design decisions. This tool acts more like a design consultant—you discuss higher-level issues with it, such as brand direction, color psychology, and typography principles.
For example, I might ask: “What color of call-to-action button stands out best against a dark background? Should the navigation bar be fixed at the top or implemented as a hamburger menu? Should the article list use a card layout or a list format?”
It doesn’t just give you an answer; it explains why—what visual impact this choice has and how it affects the user’s reading flow. These discussions help me finalize many design decisions before I even start coding.
design-html: Rapid Prototyping
Once the design direction is confirmed, the next step is to turn it into something you can see. The design-html skill generates an HTML prototype directly based on the page structure and visual style you describe.
This isn’t the final production code, but a rapid prototype used to validate design concepts. It runs in a browser, allowing you to see how colors, fonts, and spacing work together in practice.
The value of this step lies in transforming the design from an abstract description into a concrete visual. Many elements that seem fine in text descriptions turn out to be problematic when displayed on screen—for example, a color that’s too dark to read clearly, or spacing that’s too narrow and makes the layout feel crowded. These issues are hard to spot during text-based discussions, but they become immediately apparent when you see the actual layout.
Conducting a Visual Review with design-review
Once the prototype is ready, we don’t start coding immediately; instead, we first conduct a visual review using the design-review skill.
design-review examines the design from several perspectives:
Consistency: Is the visual language consistent across all pages?
Hierarchy: Is the hierarchy of information clear?
Readability: Are the font size, line height, and contrast suitable for extended reading?
Responsiveness: Does the design display correctly on different screen sizes?
This audit helped me identify several issues: the text in the homepage’s hero section was too large and overflowed on mobile devices; the font sizes for titles on series pages and article pages were inconsistent; and different spacing values were used on certain pages. These minor but critical issues are easily overlooked without a systematic review.
The Bridge from Prototype to Implementation
After going through this cycle of “theme → consultation → prototype → audit,” design is no longer a vague concept. I now have a clear color system, typography guidelines, layout patterns, and a validated HTML prototype to reference.
The next step is to translate these designs into actual code. The next post will cover architecture and implementation—specifically, how to use semantic tools like Serena MCP to ensure that the coding process maintains the same level of organization and efficiency as the design phase.