Southern Lift Solutions · System Design
Design System
Unify visual rules and page structure into one reusable system.
Interactive System Design Demo
From discovery inputs to design-system output
This runner pulls the approved discovery decisions forward, refines the design-system prompt, and then shows the structured result and handoff package.
01. Input
Start from the two explicit inputs for this workflow: the logo color and the visual reference website links. These are the only required inputs before the skill-based design extraction begins.
Southern Lift Solutions - System Design intake
Input the logo color and reference websites that define the target visual direction
What to provide
This workflow no longer depends on inherited discovery fields. The design extraction is driven by one brand anchor color plus the reference sites that set the visual benchmark.
02. SKILL.md prompt contract
The role, task, output contract, and workflow logic now map directly to `SKILL.md`. This step converts the raw inputs into a structured extraction prompt that produces a reusable `design.md` instead of a generic design-system spec.
Edit design.md generation prompt
Prompt Structure Preview
03. Generated design.md result
The result reflects the generated `docs/design.md` file. This is the website design document produced from the logo color, reference URLs, and the workflow defined in `SKILL.md`.
design.md
Live handoff content loaded from docs/design.md.
View full prompt
Next stage
Page Structure
The design.md handoff is now explicit enough to guide template sequencing, wireframes, and section-level planning.
Go to Page Structure