← Previous14 / 17Next →

Assembly Account Setup

AssemblyMarketing calendar with superpowers

Design with AI

Create a new design inspired by Assembly Account Setup, with your own content.

1Content

2Fidelity to the reference

Keeps its visual language, rearranges freely around your content.

3Your brand Optional

Use the reference style

Brand nameColorsFontsGuidelines

4Output

Prompt 1,004 words

# Design from Reference: Assembly Account Setup

Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.

## Reference

- **Product:** Assembly
- **Category:** Account Setup
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/v/2235fc3bc1f33117ebd8-1600.webp)

Analyze the attached screenshot first. If no image is attached, open the screenshot link; if neither is accessible, ask for it rather than guessing.

## Visual Design Context

### Overall aesthetic

- **Character:** A highly minimal onboarding step uses a white canvas, dark-green brand and action accents, and one required text field.
- **Evidence:** The source is 2880 × 1642 px, inspected at 1400 px width. Dimensions below are approximate CSS-scale estimates assuming a 1440 px layout captured at 2×; the ratio is unverified.

### Page composition

- **Brand:** A small green Assembly wordmark sits at the upper-left corner with roughly 20 px padding.
- **Form:** A compact centered module occupies about 400 CSS px of width near the middle of the viewport.
- **Content order:** A bold team-introduction heading sits above a required company-name label and a single underline input.
- **Actions:** Back and Next sit side by side beneath the field, aligned to the module's right edge.
- **Support:** A dark-green circular chat launcher sits near the lower-right corner.

### Information hierarchy

- **Primary:** The heading is the main content landmark; the required company name is the only data request.
- **Requirement:** A small red asterisk follows the uppercase field label.
- **Progression:** Next is filled dark green, while Back uses a pale neutral surface.
- **Current state:** The field is empty, with no placeholder, error message, progress indicator, or additional fields visible.

### Typography

- **Family:** A plain sans serif carries heading and brand lettering; controls and label have a compact utility appearance. Exact identities are unverified.
- **Heading:** Approximately 28–30 CSS px, semibold, with roughly 36 px line-height.
- **Label:** Approximately 11–12 px uppercase, compact and regular weight.
- **Buttons:** Approximately 13–14 px uppercase, medium weight, centered within their rectangles.

### Colors & surfaces

- **Measured palette:** Source samples include white #FFFFFF, deep green #01584C, warm pale neutral #F4F2EC, black #000000, and near-whites #FEFEFE and #FDFDFD.
- **Semantic use:** Green marks brand, Next, and support launcher. The pale warm surface marks Back.
- **Field:** A fine light-gray underline defines the input without a surrounding box.
- **Contrast:** Main heading is black; the required asterisk adds a small red accent. The white page has no outer panel or border.

### Components

- **Input:** A single approximately 400 px-wide line-style field beneath an external label. No entered text or focus state is shown.
- **Buttons:** Each is roughly 80 × 40 px with small 4–5 px corner radii and about 16 px between them.
- **Chat launcher:** Approximately 48 px in diameter, green with a white message icon and a soft surrounding shadow.
- **Form module:** No enclosing card, illustration, or decorative progress graphic is visible.

### Visual rhythm

- **Whitespace:** The form occupies a small fraction of the page, with especially broad empty side regions.
- **Vertical grouping:** A roughly 40 px gap separates heading and label; the field underline sits below a generous entry area.
- **Action spacing:** Buttons sit approximately 32 px below the underline, creating a distinct navigation row.
- **Alignment:** The heading is centered over the module, while label and underline align left and actions align right.

### Responsive

- **Observed limit:** Only a desktop starting state is visible; actual breakpoints and validation are unverified.
- **Recommended form:** Use a fluid maximum-width module with 20–24 CSS px side gutters and sensible vertical positioning on short screens.
- **Recommended actions:** Preserve the primary/secondary distinction and comfortable touch targets.
- **Recommended support:** Keep the chat launcher clear of form navigation and mobile keyboards.

### Adaptation guidance

- **Preserve:** Keep one focused question, a required external label, simple underline field, and a clear Back/Next pair.
- **Implement:** Associate the label and required state programmatically; add visible focus and validation without relying solely on the asterisk.
- **Layout:** Center with flexible layout instead of absolute screenshot coordinates.
- **Validate:** Confirm fonts, true CSS dimensions, keyboard order, error behavior, and progression states. These are not established by the static image.

## Content

**Instructions:**

Generate realistic example content that fits the selected design reference.

Create appropriate headlines, descriptions, labels, buttons, and supporting copy based on the type of interface being designed.

If a product or business description is provided, use it to guide the content.

Otherwise, invent a plausible fictional SaaS product appropriate for the reference.

Keep the content concise, coherent, and visually balanced.

Do not present fictional statistics, customer names, or testimonials as verified facts.

## Design Direction

**Instructions:**

Use the reference screenshot as the main source of visual inspiration rather than a strict layout template.

Preserve its most distinctive design characteristics, such as typography, visual rhythm, color relationships, component treatments, and overall aesthetic.

Feel free to modify section arrangements, proportions, spacing, and individual components to better suit my content.

Introduce original design decisions where they improve usability, composition, or brand consistency.

The result should clearly reflect the reference's visual language without looking like a direct reproduction.

Follow the visual identity of the reference design.

Use its typography, color palette, component styling, and overall aesthetic as the primary design direction.

Do not introduce an unrelated visual identity.

## Output

**Instructions:**

Generate a high-fidelity visual mockup of the requested interface.

Present the design as a polished, realistic website or product UI screenshot.

Prioritize visual composition, typography, spacing, colors, alignment, and component details.

Use the available image-generation or visual-design capabilities.

Do not replace the mockup with source code, a written design specification, or a textual description.

If direct visual generation is unavailable, clearly explain the limitation.

## Constraints

- Use the actual screenshot as the primary visual reference.
- Preserve essential messaging and factual accuracy.
- Prioritize visual quality and consistency.
- Do not invent unsupported product claims.
- Adapt structure and copy length for visual balance.

Reference imageAttach it to your message: assistants can’t open image links.

Build it in

Opening a tool copies the screenshot so you can paste it with your prompt.