Prebuilt workflow · Design → code

App Screens

From one brand reference, render live, on-brand HTML screens side by side — landing, pricing, and dashboard.

· You bring Brand reference· Landing· Pricing· Dashboard

Build with it Open the canvas

A real run, unedited4 generations · $2.50 of walletBrand and inputs are fictional, made in Vmotif · 2026-09-24

What came back

Straight off the canvas.

Everything below is what this run returned, untouched.

Landing
Pricing
Dashboard

globals.csscss

@import "tailwindcss";

@theme {
  /* Colors (light) */
  --color-primary: oklch(0.323 0.042 163);
  --color-secondary: oklch(0.59 0.07 133);
  --color-accent: oklch(0.68 0.175 40);
  --color-background: oklch(0.962 0.009 85);
  --color-foreground: oklch(0.2 0.022 170);
  --color-muted: oklch(0.925 0.012 95);
  --color-muted-foreground: oklch(0.5 0.025 140);
  --color-card: oklch(0.982 0.006 85);
  --color-card-foreground: oklch(0.3 0.01 250);
  --color-border: oklch(0.87 0.012 90);

Brand Style GuideDESIGN.md

---
version: alpha
name: Fernway — Explore Further
description: "A grounded outdoor-trail brand system: forest and moss greens on chalk paper, one signal-orange call to action, condensed headlines, and topographic calm."
colors:
  primary: "#1F3A2E"
  primary-foreground: "#F4F1EA"
  secondary: "#6E8B5A"
  secondary-text: "#4F6B3F"
  secondary-foreground: "#FFFFFF"
  accent: "#F26B3A"
  accent-hover: "#DE5A2A"
  accent-text: "#C2461C"
  accent-foreground: "#FFFFFF"

design-tokens.jsonjson

{
  "meta": {
    "generator": "vmotif-design-system-starter",
    "format": "tailwind-v4"
  },
  "colors": {
    "core": {
      "primary": "oklch(0.323 0.042 163)",
      "secondary": "oklch(0.59 0.07 133)",
      "accent": "oklch(0.68 0.175 40)",
      "background": "oklch(0.962 0.009 85)",
      "foreground": "oklch(0.2 0.022 170)",
      "muted": "oklch(0.925 0.012 95)",
      "mutedForeground": "oklch(0.5 0.025 140)",

After the run

Open it. Keep going.

Every screen opens full-screen in the screen editor. Say what to change and it lands on the live page, with version history behind every turn. This is one real turn on the landing screen above.

Fernway landing screen as generated: a light sand hero with a dark green headline, a mountain trail photo and route cards

The same Fernway landing screen after one edit: a deep forest-green hero with a cream headline, the same photo and route cards, and the orange Plan a Route button

One message, unedited6 edits · Claude Opus 5.52026-09-24

How it runs

Two stages, in order.

What each stage reads, what it makes and what it cost on this run. Each stage starts once the one before it finishes. Steps inside a stage don’t wait on each other, so they run side by side.

01
Brand System
Reads your inputsMakes 3 files, DESIGN.md and 1 image
1 stepClaude Opus 5.5$0.42
02
3 screens
Reads stage 01
- Landing Screen
- Pricing Screen
- Dashboard Screen
3 steps, side by sideClaude Opus 5.5$2.09

Where it fits

Part of a bigger job.

Create & edit screens Live HTML screens from one brief, then open any of them full-screen and edit it by hand or with the agent.

More in Design → code

Drop in a screenshot, a live URL, or a brand reference and get production-ready front-end code back.

Component ExtractorTurn a UI design into a typed React component — plus a Storybook story to document it.In — UI designOut — Component.tsx · stories.tsx UI Component ExtractorPull every button, card, and form input out of a screenshot as composable React components with all states.In — UI screenshotOut — Button.tsx · Card.tsx · FormInputs.tsx Wireframe FlowPaste a full product or UX brief and get a connected board of low-fidelity wireframe screens — sitemap first, then one grayscale wireframe per screen.In — Product / UX briefOut — sitemap.md · Wireframe board Animation CapturePoint it at any live site, capture the motion, and reverse-engineer it into a Framer Motion component and CSS.In — Live URLOut — analysis.md · Animated.tsx · animation.css

What will you create?

Start building

Workflow reference →