Sculptor
Sign inRegister

Visual experience: Design system and wireframes before build

By Sculptor team

Deliver DSYS-001, WF-001, and BRND execution artefacts—visual language for startups and enterprise design systems before CX and prototype.

  • startup strategy
  • strategy pack
  • visual design
  • DSYS-001
  • WF-001
  • design system
  • wireframes

If you are building a company and feel lost about visual experience design system, you are not alone. This phase exists so your Strategy Pack stays honest—not pretty.

What this phase is really about

Visual experience translates brand pillars into layout, typography, color, and component patterns. Wireframes show priority flows without final copy. Startups get a coherent MVP skin; enterprises extend or fork design systems with documented tokens.

In Sculptor, VisualExperienceAgent keeps the conversation anchored to Visual / UX so you do not mix this work with other phases. That separation is how consultants run engagements: one room, one decision set, one artefact pack.

Why teams skip this (and regret it later)

Teams jump to high-fidelity mockups in code because wireframes feel slow. Without DSYS-001, every screen invents spacing and buttons—prototype debt becomes brand debt.

Questions this phase must answer

  • Which three flows must wireframes cover for MVP?
  • What tokens inherit from parent design system vs custom?
  • How do accessibility targets constrain color and type?
  • Where must brand pillars show up visually—not just in copy?
  • What components are shared vs one-off marketing pages?
  • How will design hand off to /prototype HTML?
  • Which breakpoints matter for year-one customers?
  • What visual risks confuse category expectations?

Deliverables you should leave with

Visual artefacts include design system tokens (DSYS), wireframes (WF), brand execution (BRND), and key page layouts (BPAGE)—enough for CX and prototype without full production UI.

  • DSYS-001 token set (color, type, spacing, components)
  • WF-001 core flow wireframes
  • BPAGE-001 landing structure aligned to VP
  • BRND-001 logo and asset usage rules

What to prepare before you start

  • BRNDSP and NM artefacts
  • Reference apps or boards the team admires
  • Accessibility requirements from compliance if any

Who should own the answers

Design leads visuals; product validates flows; engineering reviews component feasibility. Marketing signs off customer-facing BPAGE before /prototype codes HTML.

How this connects to the rest of your pack

This phase sits in the Brand and experience group on the Strategy Pack journey.

Previous: Earlier phase

Next: Next phase

See the complete phase guide for all specialists.

Examples from the real world (names changed)

A fintech app DSYS-001 enforced high-contrast statements and tabular numerals, reducing prototype rework for balances and fees.

A B2B SaaS vendor reused parent tokens for admin surfaces while custom BPAGE-001 handled differentiated hero story for a new SKU.

Use this in Sculptor tomorrow

  1. Open Sculptor and create or open a workspace project.
  2. In Chat, type /visual or pick Visual / UX from the command palette—the same rules apply as the slash.
  3. For breadth, start an Agentic Strategy Pack run; the phase executes in journey order and saves library assets.
  4. Read From specialist chat to a library-ready Strategy Pack for how chat and Agentic runs fit together.

Keyword focus: visual experience design system, Strategy Pack coach, startup strategy planning, AI strategy specialist.