Skafold Documentation

Getting Started

Using Skafold

Create a project, choose a starting point, navigate Structure Studio, and understand saving and readiness.

Skafold projects are edited in Structure Studio, a visual canvas divided into planning frames. You can begin with a blank project, a built-in preset, a saved preset, or an AI-generated JSON package.

Create a project

From the dashboard, choose New Project and enter:

  • Project Name: the site, product, or client project name.
  • Context: an optional short description such as the product type, launch, or planning goal.

The new project opens in Structure Studio. On an empty canvas, Skafold offers built-in presets or a blank canvas.

Choose Import from AI instead when you already have a skafold-context JSON package. That workflow creates a new project from the package.

Choose a starting point

Use a built-in preset when the project resembles a common pattern:

  • Marketing Website
  • Ecommerce Store
  • Web App / SaaS

A preset gives you an initial brief, pages, page sections, design direction, architecture, and direct relationships. It is a starting structure, not a locked template.

Choose a blank canvas when the project has an unusual information architecture or you want to build the plan incrementally.

Applying a structure preset replaces the current Structure canvas. Save the current canvas as a saved preset or export the project first when you need to retain it.

Navigate Structure Studio

The workflow navigation at the top focuses the main planning sequence:

  1. Brief
  2. Structure
  3. Page Hierarchy
  4. Design
  5. Readiness
  6. Export

Selecting a workflow step focuses its frame. User Journeys and Technical Architecture remain available on the canvas even though they are not part of the minimum readiness sequence.

Each frame header provides:

  • Buttons for adding node types relevant to that frame.
  • Copy frame context
  • Download frame Markdown
  • Copy frame screenshot

Hover or select a frame to expose contextual tools and keyboard shortcuts. Use Select to edit or connect nodes and Pan to move around the canvas.

Add and edit nodes

Select a frame action such as Page, Constraint, Direction, or Service to add that node to the frame. Contextual node tools can also be selected and placed at a specific point. Edit the title and body directly inside the node.

Connections should communicate a useful relationship:

  • In Structure, connect only direct parent and child pages.
  • In User Journeys, connect the actor and significant steps in order.
  • In Technical Architecture, connect direct dependencies, data, API, authentication, or event relationships.

Avoid connecting every node merely because navigation or implementation could eventually link them.

Saving

Structure Studio autosaves changes. The toolbar reports:

  • Saving... while remote persistence is in progress.
  • Saved when the current draft is synchronized.
  • Draft when a newer local draft exists.
  • Save failed or Session expired when synchronization needs attention.

Wait for Saved before closing the project after substantial changes.

Plan readiness

Readiness measures the minimum useful handoff:

  • A project brief with substantive context.
  • At least one meaningful page.
  • At least one page with sections.

A strong export handoff means the brief exists and every meaningful page has named sections. Design guidance is optional. User journeys and technical architecture should be added when they clarify the implementation.

The Readiness panel shows gaps and can take you directly to the suggested next step.

Next steps