How to use any website's design in Windsurf
Stylepack turns any public website into a design pack: DESIGN.md, BEHAVIOR.md, design tokens, a Tailwind theme and screenshots. Here is how to hand one to Windsurf so what it builds looks and behaves like the site you picked.
Steps
The paths below use example.com. On a pack page they name the site you picked.
- Paste the site's address into Stylepack and download its pack. Packs in the gallery are ready now.
- Unzip the pack into your project so the folder sits at
design/example.com-design-pack/. - In Cascade, type
@and pick thedesign/example.com-design-packfolder. - Paste the prompt below and fill in what you want built.
The prompt
The prompt stays in English: it names the files in the pack, and your AI reads it in any language.
Use the design pack in `design/example.com-design-pack/` as the source of truth for how the UI looks and behaves. It was measured from https://example.com/.
1. Read DESIGN.md (colours, type, spacing, radii, shadows, components) and BEHAVIOR.md (hover, focus, tooltips, menus, motion, scrolling, forms, responsive rules, dark mode) before writing any code.
2. Look at every image in `design/example.com-design-pack/screenshots/` and match the composition, density, whitespace and image treatment. Tokens do not carry those; the screenshots do.
3. Style everything with `design/example.com-design-pack/tokens.css` (or `tailwind.css` if this project uses Tailwind v4). Do not invent colours, radii, shadows or font sizes that are not in the pack.
4. Load the fonts named in DESIGN.md. Where a font is not freely available, use the stand-in it names at the same sizes and weights.
5. Match the breakpoints and hover, focus and motion rules in BEHAVIOR.md. Build both themes.
Now build: [describe the page or app you want]
When you are done, compare the result with the screenshots at desktop and phone widths, fix the biggest visual difference first, and repeat.