WindWalker's AI Design System
— Keeping a Consistent Brand Automatically
Type "change the primary color to rose" and buttons, accent colors, and icons update across every page — Home through Contact — all at once. Here's how WindWalker maintains design consistency.
What Is a Design System?
A design system is a set of rules governing the colors, fonts, spacing, button styles, and other visual elements used across a website. When a solid design system is in place, visual consistency is maintained naturally whenever you add new pages or update content.
Building a design system from scratch isn't easy for a startup or small business. Manage multiple pages without a designer and you end up with buttons in different colors on different pages, or inconsistent font sizes throughout.
design_system field in the PRD (Product Requirements Document) manages the color palette, fonts, and spacing rules centrally. The AI uses these values as the reference for generating and modifying styles across all pages.
How the PRD-Based System Works
Inside WindWalker, each project's design information is stored as structured data within the PRD document. Here's roughly what it looks like:
{
"design_system": {
"colors": {
"primary": "blue",
"secondary": "gray",
"accent": "indigo"
},
"typography": {
"heading_font": "Inter",
"body_font": "Inter",
"base_size": "16px"
},
"spacing": {
"section_padding": "5rem",
"container_max": "1280px"
},
"border_radius": "0.75rem"
}
}When you say "change the primary color to rose," the AI updates colors.primary in the PRD and re-renders the HTML for all pages that reference that value. No need to hunt down and change color codes on each page individually.
What You Can Change
Colors
Request brand color changes in natural language:
- "Change the site-wide primary color to emerald"
- "Set the button color to #2563EB"
- "Switch the background from white to slate-50"
- "Change the link color from blue to purple"
Fonts
Swap fonts using Google Fonts. Changes apply consistently across every page:
- "Change the body font to DM Sans"
- "Switch the heading font to Playfair Display"
- "Make the font size slightly larger overall"
Spacing and Layout
- "Increase spacing between sections for more breathing room"
- "Reduce the container max width to 960px"
- "Make card corners more rounded"
Real Conversation Example
Here's what the editing chat actually looks like in practice:
Review the changes, and if you'd like to keep any specific elements in a different color, just let me know.
Current Limitations
The PRD-based design system is convenient, but the current beta has these constraints:
- Per-section exceptions: Granular control — applying a different color to one section on one specific page — is currently limited.
- Custom CSS: Direct CSS code editing interface is still in early beta.
- Animation settings: Applying transitions and animations globally through the design system is planned for a future release.
- Dark mode: Dark/light mode toggle is currently in development.
If an AI request doesn't produce the expected result, adding more specificity usually helps — for example: "Change only the hero section background on the About page." You can always ask again after getting feedback.