类型：App · 分类：SaaS · 源码：会员可见
[hidecontent type="vip1"]# PROMPT — Recreate “siteforge” landing page exactly
Create a **single self-contained `index.html`** that recreates this page pixel-faithfully. Title: `siteforge — Build websites at scale`.
## Critical facts (do not invent)
- **No external URLs.** No Google Fonts, CDNs, images, favicons, or remote assets. Everything is inline.
- **No CSS animations, transitions, or `@keyframes`.** No hover motion, no dashed-line draw, no pulsing nodes. The only “motion” is a **responsive JS layout engine** that recalculates absolute positions on resize / orientation / visualViewport / ResizeObserver via `requestAnimationFrame`.
- **No links, buttons, or real interactivity.** This is a static artboard mockup of a product UI, not a working app.
- Architecture: fixed full-viewport dark stage with an absolutely positioned artboard of UI chrome.
Reference live file (local): `http://127.0.0.1:9555/index.html`
Reference artboards in the same folder: `pc-preview-1282x981.png`, `tablet-preview-768x1024.png`, `mobile-preview-390x844.png`, `mobile-preview-360x640-9x16.png`.
---
## Fonts (exact family names used in source)
Embed two custom families as **WOFF2 `@font-face` data URIs** (as in the original), `font-display: block`:
| Family | Weights | Role |
|---|---|---|
| **`Sf Sans`** | 400, 500, **600** | Brand + headline + body + “You” pill |
| **`Sf Mono`** | 400, **500** | All UI chrome labels (tabs, ELEMENTS, node titles, steps, AUTO SAVE, LAYERS, toolbar labels) |
Body stack:
```css
font-family: 'Sf Sans', Inter, -apple-system, 'Helvetica Neue', Arial, sans-serif;
```
Also set:
- `-webkit-font-smoothing: antialiased`
- `font-kerning: none`
If you cannot embed the original base64 fonts, closest public substitutes:
- **Sf Sans** → Geist Sans / Inter / SF Pro Display–like geometric sans
- **Sf Mono** → JetBrains Mono / IBM Plex Mono / SF Mono–like technical mono
Keep the **same names in CSS** (`'Sf Sans'`, `'Sf Mono'`) so styles match.
---
## Color system (exact)
| Token | Value | Use |
|---|---|---|
| Page / stage bg | `#08090a` | `html`, `body`, `#viewport` |
| Card gradient | `linear-gradient(180deg, #08090a 0%, #08090a 40%, #0b0c0d 80%, #0b0c0d 100%)` | Main card |
| Pure white | `#fff` / `#fdfdfd` / `#f8f8f8` / `#fbfbfb` | Logo, wordmark, headline, active tab bg, icons, nubs, cursor, live dot |
| Soft white | `rgba(255,255,255,.93)` | Eyebrow |
| Mid gray text | `#a9a9a9` | Lede |
| Node subtitle | `#9d9d9d` | `.nsub` |
| Dim UI text | `rgba(255,255,255,.86)` / `.82` / `.78` / `.72` | Tabs inactive, toolbar, ELEMENTS, AUTO SAVE, LAYERS, steps |
| Hairlines | `rgba(255,255,255,.062)` | Vertical page rules |
| Borders | `rgba(255,255,255,.082)` panel; `.105` tabs/cells/toolbar | |
| Node borders | `rgba(255,255,255,.72)` | Nodes + plus boxes |
| Connector stroke | `rgba(255,255,255,.55)` dashed; `.505` solid stubs | |
| You pill | bg `#232324`, border `rgba(255,255,255,.14)`, text `#f2f2f2` | |
| Active tab text | `#0b0b0c` | BUILDER |
| Hatch pattern | `repeating-linear-gradient(45deg, rgba(255,255,255,.95) 0 2.1px, transparent 2.1px 4.72px)` | |
**Live status dot is white `#fff` in code** (not green), 8×8px circle.
---
## Stage / coordinate system (exact desktop reference)
```
#viewport: position fixed; inset 0; overflow hidden; bg #08090a
#stage: 1282 × 981; transform: scale(var(--fit-scale,1)); transform-origin: 0 0
#artboard: left -82px; top -46px; 1448 × 1086
#artboard > *: position absolute
```
Card (visible frame): `left:82px; top:46px; width:1282px; height:981px` (fills stage in desktop mode).
Three vertical rules inside card at x = `319.5`, `641.5`, `962.5` (1px wide, full card height, `rgba(255,255,255,.062)`).
`overflow: hidden` on html/body — no page scroll.
---
## Header / hero (desktop absolute positions)
**Logo mark** (SVG, left `128px`, top `99px`, 42×34, fill `#fff`):
- Path A: `M8 0 L26.2 0 L20.3 17 L0 17 Z`
- Path B: `M20.3 17 L41.2 17 L32.2 33.4 L15.2 33.4 Z`
(Two offset parallelograms / chevrons.)
**Wordmark** `.wordmark`: `siteforge`
`left:184.5; top:99; font-size:28.5; font-weight:600; letter-spacing:-.42px; line-height:34px; color:#fdfdfd`
**Eyebrow hatch** `.hatch-eyebrow`: `left:433; top:112; 29×13` diagonal slash block.
**Eyebrow** `.eyebrow`: `OUR PLATFORM` (non-breaking space after OUR)
`left:475; top:108; Sf Mono 15/20; letter-spacing:-.50px; color:rgba(255,255,255,.93)`
**Menu** (top-right): two white bars `.menu i` at `left:1289`, width `33`, height `3`, tops `107` and `117`, `border-radius:.5px`.
**H1**:
`Build websites<br>at scale`
`left:432; top:160; width:620; font-size:67.5; font-weight:400; line-height:66; letter-spacing:-1.15px; color:#f8f8f8`
**Lede** `.lede`:
Line 1 (`letter-spacing:-.20px`): `Design, launch, and manage high-performance websites`
Line 2 (`letter-spacing:-.055px`): `with a visual builder. No complex coding—just results.`
`left:434; top:313; width:520; font-size:18; line-height:33; color:#a9a9a9`
---
## Builder panel shell
`.panel`: `left:122; top:428; 1200×544; border:1px solid rgba(255,255,255,.082); border-radius:3px`
### Left rail
- Side hatch `.hatch-side`: `158,461` size `13×91`
- Tab **BUILDER** `.tab.tab-a`: `208,466` size `163×40`; bg `#fbfbfb`; text `#0b0b0c`; Sf Mono 13.6; letter-spacing `.22px`; centered
- Tab **TEMPLATES** `.tab.tab-b`: `208,516` size `163×39`; border `1px solid rgba(255,255,255,.105)`; text `rgba(255,255,255,.86)`
- Label **ELEMENTS**: `208,588`; Sf Mono 13.4; letter-spacing `-.33px`; color `.78`
- **3×3 element cells** (each `47×45`, border `.105`, radius `2`), icons 21×21 stroke `#fff` stroke-width `~1.7`:
| Position | Icon |
|---|---|
| 208,616 | Text “T” (horizontal + vertical stroke) |
| 266,616 | Image (rect + circle + mountain paths) |
| 324,616 | Sidebar layout (rect + vertical divider + filled bar) |
| 208,671 | Stacked layers (3 chevrons) |
| 266,671 | Button / pill (rounded rect + midline) |
| 324,671 | 2×2 grid of rounded squares |
| 208,726 | Code chevrons `<>` |
| 266,726 | Bulleted list (3 dots + lines) |
| 324,726 | Plus |
- Vertical tool divider `.vline`: `160,608` size `2.4×224`, bg `rgba(255,255,255,.72)`
- Bottom-left L-bracket SVG at `157,862` (60×72, stroke `#fff` width `2.6`)
- **AUTO SAVE** at `227,915`; Sf Mono 10.4; letter-spacing `.2px`
- Live dot `.dot-live`: `291.5,921` 8×8 white circle
- Save hatch `.hatch-save`: `309,920` `62×11`
### Top toolbar (y≈467, height 38, border `.105`, radius 3)
1. History control `left:403.5; width:77` — undo + redo (redo is same SVG flipped `scaleX(-1)`), vertical divider at x38
2. **VIEW** box `497.5` width `92.5` + chevron
3. **PAGE: HOME** box `602.5` width `140.5` + chevron
4. Settings gear box `759.5` width `38`
Toolbar labels: Sf Mono 11.3; letter-spacing `-.2px`; color `.86`
### Canvas
`.canvas`: `404,513` size `852×424`
Dot grid:
```css
background-image: radial-gradient(
circle,
rgba(255,255,255,.225) 0 .55px,
rgba(255,255,255,.10) .55px 1.15px,
transparent 1.15px
);
background-size: 22.3px 22.3px;
background-position: -1.95px -.15px;
```
### Right edge
**LAYERS** rotated 90°: `left:1288; top:472; Sf Mono 11.2; color .72; transform:rotate(90deg); transform-origin:0 0`
---
## Workflow nodes (exact copy + structure)
**Row 1** (nodes top `568`, height `59.5`, border `.72`, radius `10`, white filled icons ~29×29):
| Node | Title | Subtitle |
|---|---|---|
| Lead Form | Lead Form | Capture Leads |
| Choose Template | Choose Template | Pick a Starter |
| Customize Layout | Customize Layout | Visual Builder |
| CMS | CMS | Content Hub |
| Publish Site | Publish Site | Deploy |
Between consecutive row-1 pairs: tiny **`1 step`** labels (Sf Mono 7.2, color `.78`) above the connectors.
White rectangular **nubs** (ports) `10×13`, radius `2.5` on node left/right edges.
After Publish Site: small **plus** box `17×18` with + icon.
**Row 2** (`.node2`, top `747.5`, height `57`) inside a dashed group rect:
| Node | Title | Subtitle |
|---|---|---|
| Mobile Preview | Mobile Preview | Responsive Check |
| SEO Check | SEO Check | Optimize |
| Go Live | Go Live | Launch |
Plus two more **`1 step`** labels between those three, then another trailing plus.
Icons (exact meaning):
- Lead Form: person (circle head + body)
- Choose Template: split layout window
- Customize Layout: pencil + underline
- CMS: stacked database cylinders
- Publish Site: rocket (with small dark window circle)
- Mobile Preview: phone outline
- SEO Check: magnifying glass
- Go Live: checkmark in circle
### Connectors (SVG overlay, pointer-events none)
- Horizontal **dashed** links row 1: `stroke rgba(255,255,255,.55)`, width `1.5`, `stroke-dasharray: 13 9`
- Vertical **dashed** branch from Customize Layout down into group
- Dashed rounded group rect around row 2: `x=686 y=717.3 w=468 h=152.7 rx=2`
- Short **solid** stubs to trailing pluses / group edges: stroke `.505`
- White mouse cursor polygon near bottom pointing at the You pill
### Collaboration pill
`.youpill`: text **`You`**
`647,902` size `51×32`, radius `16`, bg `#232324`, border `.14`, font-size `14.5`, color `#f2f2f2`
---
## Responsive behavior (must implement)
Breakpoints from source JS:
```
mobile: width <= 599 AND height >= width
tablet: width <= 1024 (else)
desktop: width > 1024
tablet orientation: portrait if height >= width else landscape
```
### Desktop
- Fit scale = `min(1.2, availableWidth/1282, availableHeight/contentHeight)`
- Set `--fit-scale` on `#stage`
- Grow card/panel/canvas horizontally; redistribute header / toolbar / flow nodes / ports / step labels / connectors proportionally
- Vertical rules stretch with growth using workspace anchor from first rule
### Tablet / mobile
- Rebuild layout into stacked / reflowed compositions (sidebar rail, scaled toolbar, reflowed node rows, recomputed connector geometry)
- Use token functions from source (`MOBILE_TOKENS`, `TABLET_TOKENS.portrait|landscape`) for margins, headline sizes, node sizes, etc.
- Force `--fit-scale: 1` in mobile/tablet modes while manually positioning elements
Listeners: `resize`, `orientationchange`, `visualViewport.resize`, `ResizeObserver` on `documentElement`.
---
## What NOT to add
- No purple gradients, glassmorphism, drop shadows, glow, rounded-full marketing pills, emoji
- No cards-as-marketing-sections — the only “panel” is the builder chrome
- No real navigation destinations / URLs
- No CSS animation of connectors, cursors, or tabs
- No green auto-save indicator (code uses white)
---
## Delivery
Output one production-ready `index.html` with:
1. Embedded `@font-face` (or documented substitute mapping)
2. Exact copy, hierarchy, and desktop absolute artboard
3. Inline SVG icons matching the described strokes/fills
4. Full responsive JS layout engine matching the breakpoints above
5. Visual match to `pc-preview-1282x981.png` at ~1282×981 and the mobile/tablet preview PNGs at their breakpoints
Match the aesthetic: flat, technical, blueprint / wireframe SaaS dark mode — almost zero ornament beyond hatch marks, hairlines, and the node graph.
---
### Notes for you (not part of the prompt)
- Original fonts are proprietary **embedded base64 WOFF2** named `Sf Sans` / `Sf Mono` — there are **zero** remote font URLs to paste.
- There are **no animations** in the real file; if someone asks for “animations,” the accurate answer is responsive reflow only.
- Closest public font stand-ins: **Geist/Inter + JetBrains Mono**.