Autocraft works best when you do not treat it like a prompt box.

The workspace is designed around a sequence of product decisions.

You begin broad.

Choose a direction.

Generate enough of the product to evaluate it.

Then become increasingly precise.

This guide walks through that workflow.

Step 1: Start with the business idea

Do not begin by describing every button on a page.

Start with what the product is.

Useful context includes:

• What the business does
• Who the product is for
• The primary user problem
• The product objective
• Important constraints
• Any strong brand or category signals

You do not need to over-specify the visual design.

The point of the next step is to explore that.

Good starting point

"A financial planning product for independent creative professionals who want simple cash-flow visibility without enterprise accounting complexity."

That describes a product.

It does not prematurely dictate a hero layout.

Step 2: Compare three product directions

Autocraft can turn the business idea into three different product interpretations.

Each direction can establish:

• Colour palette
• Typography
• Interface character
• Hierarchy
• Product atmosphere
• Overall visual language

Do not choose only by asking which direction looks the prettiest.

Ask:

Which direction best represents the customer?

Which one communicates the right level of trust?

Which one matches the product's ambition?

Which one can survive beyond the landing page?

Tip

Treat direction selection as a product decision, not a style preference.

Step 3: Choose the visual system

Once a direction is selected, its visual system becomes part of the project.

That gives future pages a shared foundation.

This is important because multi-page AI generation can easily become visually fragmented if every screen is treated independently.

The selected system helps later generations stay connected.

Tip

Choose a direction you would be comfortable seeing across onboarding, dashboard, settings, pricing, and secondary flows—not only the hero.

Step 4: Generate the first three pages

Autocraft begins the workflow with an initial three-page generation.

The purpose is to give you enough of the product to evaluate the direction as a system.

One isolated page can hide problems.

Three related pages reveal much more.

Look for:

• Consistency
• Repeated patterns
• Information hierarchy
• Product tone
• Navigation logic
• Whether the direction still feels right when scaled

Tip

Do not immediately refine tiny details.

First decide whether the direction itself deserves to continue.

Step 5: Use the infinite canvas as a product view

Zoom out.

This is one of the most important moments in the workflow.

The canvas allows you to see pages, sketches, references, and iterations together.

At this scale, ask:

Does this look like one product?

Do all pages communicate the same brand?

Is one page visually dominating the others?

Are there missing product states?

Would a user understand the overall experience?

Tip

Use the canvas for decisions that are difficult to make while staring at one screen.

Step 6: Continue with project-wide context

When you add more pages, Autocraft can carry project context forward.

That can include:

• Selected direction
• Visual system
• Existing pages
• Interface patterns
• Previous decisions
• Attached media and references
• Current target page or component

This means later generations should require less repetition from you.

Instead of:

"Create a settings page using the same dark navy palette, typography, card style, spacing, dashboard patterns..."

You should be able to focus more on:

"Create the account settings page for this product."

Tip

Use prompts for what is new.

Let project context carry what is already known.

Step 7: Sketch when spatial intent is clearer than language

If you already know the approximate layout of a new page, draw it.

Autocraft includes sketching tools directly on the canvas.

A rough sketch can communicate:

• Relative placement
• Section order
• Card grouping
• Navigation position
• Hierarchy
• Approximate proportions

Select the sketch and convert it into a rendered frontend interface with code.

The sketch does not need to look professional.

Its job is to communicate structure.

Tip

Draw intent, not decoration.

A few clear shapes are often more useful than a detailed mockup.

Step 8: Use Design Chat for interpretive changes

Once the product direction is right, refinement becomes more local.

Design Chat is useful when the change requires the system to reason.

Examples:

• "Make this pricing section feel more premium."
• "Turn this block into a comparison layout."
• "Add a secondary navigation state here."
• "Reduce the visual weight of this component."
• "Restructure this section around three user outcomes."

When possible, select the exact page, section, or component first.

That gives the system a clearer scope.

Tip

A precise target plus a clear intent usually creates a better refinement request than a long global prompt.

Step 9: Use Quick Edit when you already know the answer

Do not spend an AI request changing something that is easier to edit directly.

Quick Edit is intended for smaller deterministic changes.

Use direct editing for things such as:

• Text
• Common visual properties
• Spacing
• Straightforward layout values
• Other obvious page-level tweaks

Tip

AI for interpretation.

Direct control for certainty.

Step 10: Use references deliberately

Images and media can play different roles.

Sometimes you want the exact asset used.

Sometimes you only want inspiration.

Make that intent clear.

Useful reference cases include:

• Brand imagery
• Existing product screenshots
• Visual inspiration
• Layout references
• Product assets
• Supporting media

Tip

Do not attach references without knowing why they are there.

Context quality affects generation quality.

Step 11: Keep direction until there is a reason to change it

Consistency is valuable, but products evolve.

Autocraft allows a project to continue within the selected direction while also allowing deliberate direction changes later.

Switch when the product decision changes.

Do not switch simply because one page needs refinement.

Tip

Separate a local design problem from a product-direction problem.

If one component feels wrong, refine the component.

If the entire product language feels wrong, reconsider the direction.

Step 12: Let validation protect stable work

AI-generated transformations are not automatically safe.

Autocraft's workflow includes validation, history, recovery, and rollback concepts designed to reduce the cost of a bad candidate.

If a change fails, the objective is not to pretend failure never happens.

The objective is to avoid losing the last stable page.

Tip

Iteration becomes much faster when failure is reversible.

Step 13: Inspect the frontend code

Autocraft is not only a visual output system.

Generated pages are backed by frontend code.

The current product focuses on HTML and React generation paths.

Before handoff or export:

• Inspect the generated structure
• Check important interactions
• Review anything security-sensitive
• Verify responsive behavior
• Confirm assets and imports
• Test production-critical behavior

AI can accelerate implementation.

It does not remove engineering responsibility.

Step 14: Export and continue development

When the frontend direction is mature enough, export the code.

Continue in the environment that fits the rest of the project.

For example:

• VS Code
• Cursor
• Codex
• Claude Code
• Your existing repository workflow

Autocraft is intended to make the frontend direction concrete and controllable before the project moves deeper into software development.

Tip

Do not wait for the canvas to become the entire software stack.

Move when the frontend is clear enough to continue.

A workflow to remember

The complete loop is:

1. Describe the business
2. Compare three product directions
3. Choose the visual system
4. Generate the first three pages
5. Inspect the complete product on the canvas
6. Continue with project-wide context
7. Sketch directly when drawing is faster
8. Use Design Chat for interpretive refinement
9. Use Quick Edit for deterministic changes
10. Keep or deliberately switch direction
11. Validate and recover when needed
12. Inspect the code
13. Export and continue development

Common mistakes

Over-specifying the first prompt

If you define every visual choice before Autocraft creates directions, you remove the value of direction exploration.

Describe the business first.

Treating every problem as a prompt problem

Sometimes the fastest operation is a direct edit.

Sometimes it is a sketch.

Sometimes it is a scoped AI request.

Use the interaction that matches the problem.

Judging the product from one page

A beautiful landing page can hide a weak product system.

Use multiple pages and the infinite canvas to evaluate coherence.

Changing direction because of one weak component

Refinement and direction selection are different decisions.

Do not restart the product when a local edit can solve the problem.

Assuming generated code is automatically production-ready

Inspect, test, and verify what you ship.

Autocraft is designed to accelerate frontend production, not remove responsibility from the builder.

Final thought

The fastest way to build is not always to generate more.

Often it is to make the right decision earlier.

Autocraft's workflow is designed around that idea:

Make product direction visible.

Carry it across the project.

Give AI a precise scope.

Keep direct control where it is faster.

And leave with frontend code you can continue building.