← Previous7 / 23Next →

Campsite Create Element

CampsiteWhere teams share work in progress

Design with AI

Create a new design inspired by Campsite Create Element, 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 892 words

# Design from Reference: Campsite Create Element

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

## Reference

- **Product:** Campsite
- **Category:** Add & Edit
- **Screenshot:** attached to this message (also available at https://media.saasframe.io/o/662e76b50d3d8f27c2a2.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

- **Style:** A minimal post-creation modal floats over a dimmed team feed.
- **Character:** White and pale-gray surfaces, fine outlines and compact controls keep the composition functional and quiet.

### Page composition

- **Capture:** The source measures 1440 × 821 pixels. Dimensions below approximate image pixels; CSS scale is unverified.
- **Background shell:** A roughly 240-pixel sidebar contains workspace, navigation and project links. A feed with media cards occupies the main region.
- **Overlay:** A gray scrim dims the full application.
- **Dialog:** A centered panel around 670 × 400 pixels contains a title strip, large text area, tag field, media drop zone and footer actions.

### Information hierarchy

- **Title:** New post identifies the task in a compact header.
- **Content:** The largest input asks what the user is working on.
- **Metadata/media:** A separate tag entry and large attachment region follow.
- **Footer:** Audience selection and Add poll sit left; a muted Post button aligns right.
- **Background:** Feed imagery remains recognizable but visually suppressed.

### Typography

- **Family:** Neutral sans serif throughout; exact identity is unverified.
- **Dialog title:** Approximately 14 pixels, semibold.
- **Input placeholder:** Around 16 pixels, pale gray.
- **Media text:** Around 14 pixels, with the primary instruction darker than the secondary drag/drop line.
- **Controls:** Approximately 13–14 pixels.

### Colors & surfaces

- **Measured surfaces:** White #FFFFFF and pale #FAFAFA define dialog regions.
- **Scrim:** Dominant gray #7D7D7D and #7F7F7F appear in the dimmed background.
- **Ink:** Black #000000 and dark gray supply labels and icons.
- **Borders:** Thin light-gray outlines separate form regions.
- **Depth:** A broad soft shadow lifts the white dialog above the feed.

### Components

- **Dialog shell:** Small roughly 6-pixel corners with a thin header divider.
- **Text area:** Approximately 645 × 98 pixels, white, outlined and rounded.
- **Tag field:** Full-width outlined input around 44 pixels high.
- **Media drop zone:** Roughly 645 × 105 pixels, pale fill, small image-plus icon and two centered text lines.
- **Audience control:** A roughly 190-pixel outlined dropdown with icon, label and chevron.
- **Poll action:** A compact white outlined button with list icon.
- **Post action:** A small gray button with white label; its disabled behavior is not independently verified, though its appearance is muted.

### Visual rhythm

- **Stack:** Uniform roughly 12-pixel gaps separate the main form regions.
- **Insets:** Header, fields and footer share consistent horizontal padding.
- **Footer separation:** A subtle rule distinguishes content from action controls.

### Responsive

- **Evidence:** Only desktop is shown; composer expansion, upload and mobile behavior are unverified.
- **Recommended shell:** Constrain the modal to viewport width/height and allow internal scrolling.
- **Recommended footer:** Wrap audience and poll controls while retaining a clear primary action.
- **Accessibility:** Label inputs, describe attachment limits and provide keyboard focus management.

### Adaptation guidance

- **Preserve:** Keep the distinct content, tag, media and audience regions.
- **Implementation:** Use accessible textarea, tag entry, file input/drop target and audience selector.
- **Scope:** No post has been created in the screenshot; do not infer a publication result.
- **Behavior:** Define upload feedback, validation and posting states explicitly.

## 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.