In this class, you will learn practical techniques for controlling visual style in vibe coding workflows.
You will use moodboards or web references and iterative prompts to build, test, and refine a reusable DESIGN.md that keeps your UI consistent across generations.
Always remember: Your first draft is useless — keep iterating.
I frequently hear people commenting Vibe-coded digital products all look the same. Unfortunally, that is true. Here are some reasons:
A design system is a shared rulebook for visual and interaction decisions in a product. It usually includes design tokens, reusable components, layout rules, and usage guidelines, so teams can build consistent interfaces faster.
Design systems connect design decisions and implementation decisions into one shared language. In UI/UX, they improve consistency, reduce design debt, and help teams deliver better usability across different screens and user flows. In frontend development, they speed up implementation through reusable components and tokens, while reducing bugs caused by one-off styling.
The key roles are:
Suggested references:
DESIGN.md is the source-of-truth document for your
product's visual language and interaction rules. Think of it as a practical instruction
manual that both humans and AI agents can read before generating or editing UI.
In AI-assisted workflows, this file is critical because it
reduces ambiguity in prompts. Instead of repeatedly describing your style in every request,
you define it once in DESIGN.md and ask the agent to follow it.
Without this document, AI agents may produce inconsistent or off-brand UI elements.
Treat DESIGN.md as a living document. Update it when design
decisions change, and keep your generated code aligned with it.
NOTE: You will use this approach to create the DESIGN.md file for your course project.
In next three section, you will learn how to develop your DESIGN.md file iteratively based on your moodboard. This process will help you create a clear and actionable design specification that guides your AI agent to generate consistent and high-quality UI.
First, have your moodboard ready.
Create a new project folder and start the first prompt with your moodboard. This could be a temperary folder. The purpose is to develop a DESIGN.md file.
Analyze this mood board and extract reusable visual patterns.
Do not describe each image separately. Summarize system-level patterns:
- color palette tendencies
- typography style
- spacing density
- layout structure
- border radius / shape language
- shadow / elevation style
- imagery style
- overall mood and personality
Return the result as a clear design analysis, not marketing language.When you finish, switch the model to "Auto" to save tokens.
On this step, your initial DESIGN.md is created. However, it
is not ready to use yet.
Next step: Test and Iterate.
After creating the initial DESIGN.md file, we need to test it by generating some UI screens and reviewing the results. This will help us identify any gaps or issues in the design specification and refine it for better consistency and quality.
Prompt Reference:
Use DESIGN.md as the source of truth. Create a reservation page and follow the design system exactly.
Do not invent new colors, typography styles, border radii, or component patterns.
If a design decision is not defined in DESIGN.md, choose the simplest option that matches the system.This will generate a test page with some css files based on the design specification. This is the testing of your DESIGN.md file. With you page, you can start to iterate on your design.
You can also view the full iteration process in this video: https://youtu.be/Oq4uc3VoqCA
Updated DESIGN.md file. Now it's the time to test this. Move to the next section.
You can also view the full iteration process in this video: https://youtu.be/Oq4uc3VoqCA
NOTE: You will use this approach to create the DESIGN.md file for your course project.
Skill: more than a reusable prompt.
Pre-defined Prompts
Reusable instructions that guide the agent's behavior for a specific task or workflow.
Automated Scripts
Code that the agent can execute to perform actions like file manipulation, running builds, or processing data.
Reference Documents
Files the agent reads for context, such as design guidelines, coding standards, or project notes.
Tool / API Integrations
Connections to external services (search, databases, browsers) that let the agent act beyond generating text.
Memory & Context
Persistent information the agent can read and write across sessions, like prior decisions or project state.
Any major AI tools: Cursor, Codex, VS Code, Claude Code...
A wide range of tasks - programming, research, data analysis, automation, and more - especially when combined with the right tools and integrations.
In the following video, I will create a skill called "inspire-design-system." This skill will help me generate a DESIGN.md file based on the refernece images and web link I provided. The creating of the skill is not a one-prompt task. After these steps, you need to keep testing and updating it before it becomes truly useful.
Websites you can find reference for inspiration:
When using visual references from existing websites, avoid directly copying unique branded assets, proprietary illustrations, exact layout compositions, or trademarked elements. Instead, extract reusable style principles such as spacing rhythm, typography hierarchy, color balance, and component behavior, then reinterpret them in your own design system.
Mitigation checklist:
This week includes a mini project and the continue of the course project.
Week 4. Desgin Systems."