Design with AI
Generate a new design based on this screen using your own content.
# Design from Reference: Claude Code Onboarding
Create an original, high-fidelity visual design inspired by the reference. Prioritize composition, typography, colors, spacing, and component styling over technical implementation.
## Reference
- **Product:** Claude
- **Category:** User Onboarding
- **Screenshot:** https://cdn.prod.website-files.com/5e9dc792e1210c5325f7ebbc/69971c10880099097a2be084_yjJaoqQZBSPu5ZDvg7h25WuuoG3bKn7b6-CtOc1tvz0.avif
Analyze the screenshot first. If inaccessible, request it rather than guessing.
## Content
{{content.instructions}}
{{content.data}}
Preserve essential messaging and factual accuracy. Adapt structure and copy length for visual balance; never invent product claims.
## Visual Design
### Overall aesthetic
- **Character:** A quiet onboarding landing screen pairs warm off-white surfaces with serif display typography and one dark connection action.
- **Capture scale:** The screenshot measures 2880 ร 1624 image pixels. Approximate CSS dimensions assume a 1440 ร 812 viewport at 2ร density; that scale is unverified.
- **Tone:** A centered product preview and broad empty margins create a calm introduction with little navigation.
### Page composition
- **Brand:** A small Claude Code wordmark and Research preview badge sit in the upper-left corner.
- **Main message:** A centered serif heading and two-line sans-serif explanation occupy the upper-middle region.
- **Product preview:** A roughly 576 ร 360px CSS illustration shows a task-entry interface on a beige abstract backing.
- **Primary action:** A dark Connect to GitHub button sits centered below the preview.
- **Open area:** The remaining canvas is intentionally sparse, with no visible footer or additional form fields.
### Information hierarchy
- **Headline:** The large serif message is the strongest live-text element.
- **Explanation:** A smaller centered paragraph describes the cross-device coding-task concept.
- **Demonstration:** The preview introduces repository selection, cloud mode, prompt entry and session list as an illustrative product view.
- **Conversion:** The single dark GitHub action is visually isolated and easy to locate.
- **Release label:** Research preview appears in both the page brand area and embedded product preview.
### Typography
- **Family pairing:** A refined serif serves the wordmark and main heading; a neutral sans-serif serves supporting text and controls. Exact font identities are unverified.
- **Headline:** Approximately 40px CSS, regular weight, around 48px line-height and mildly tight tracking.
- **Supporting copy:** Approximately 16px regular with 22px line-height.
- **Action:** Approximately 16px medium white text beside the GitHub mark.
- **Preview labels:** Small interface text is around 12โ14px at the estimated CSS scale; a small badge has a compact technical appearance.
### Colors & surfaces
- **Canvas:** Sampled #FAF9F5 supplies the warm off-white background.
- **Primary ink:** Sampled #141413 supplies the near-black heading and connection button.
- **Preview backing:** Sampled #E3DBCC and nearby #E2DACB form the beige geometric surface.
- **Input surface:** Sampled #FFFFFF forms the preview's white prompt field.
- **Boundaries:** Sampled #D9D8D4 contributes to fine neutral outlines.
- **Accent:** A small muted terracotta send-arrow control appears inside the preview, without competing with the main dark action.
### Components
- **Preview frame:** A rounded beige rectangle around 576px wide has a subtle abstract ray pattern and an inset white app panel.
- **Repository controls:** An outlined repository selector with GitHub icon sits beside a smaller Cloud control.
- **Prompt field:** A large white multiline box has a thin gray outline, rounded corners and a small terracotta arrow button in the lower-right corner.
- **Session area:** A compact Sessions heading and Active dropdown sit above partially visible session rows.
- **Connection button:** Approximately 212 ร 44px CSS, near-black fill, 10px radius and white GitHub icon.
- **Release badge:** A small pale rounded label follows the serif product wordmark.
### Visual rhythm
- **Centered axis:** Heading, description, preview and action share a central vertical axis.
- **Spacing:** Approximately 32โ40px separates the description from the preview and the preview from the action.
- **Top clearance:** The main heading begins roughly 100px below the upper brand line.
- **Whitespace:** Broad horizontal margins and a generous lower blank region keep the screen focused on one decision.
### Responsive
- **Evidence limit:** Only one desktop state is observed; connection flow and mobile behavior are unverified.
- **Layout recommendation:** Use a fluid centered column with 20โ24px side padding.
- **Preview recommendation:** Scale the illustrative panel proportionally, while keeping its essential meaning available in live text.
- **Typography recommendation:** Reduce the serif title to roughly 30โ34px on narrow screens and allow supporting copy to wrap naturally.
- **Action recommendation:** Preserve a comfortable touch target and visible keyboard focus.
### Adaptation guidance
- **Focus:** Retain one central message, one product illustration and one primary connection action.
- **Asset separation:** Treat the embedded app preview as an illustration unless a functional demo is explicitly required.
- **Visual tokens:** Use warm off-white, beige and near-black as the base palette, with terracotta confined to small product details.
- **Accessibility:** Provide a descriptive preview alternative and clear connection-action labeling; define authorization and error states separately from this static screen.
Use this context to reproduce the reference's visual language: layout, typography, colors, spacing, borders, radii, and distinctive elements. The screenshot takes priority if descriptions conflict.
## Direction
{{preferences.fidelityInstructions}}
## Output
{{output.instructions}}
Deliver a polished, cohesive design with precise alignment, hierarchy, and spacing. Produce the requested visual artifact, not just a description. If unsupported, explain the limitation.