# Save Websites to a Website Mood Board [Open the live Fudge conversation](https://design.withfudge.com/share/save-websites-to-my-website-mood-board) Last updated: 2026-08-25 Save websites to a website mood board by collecting a small set of references around one visual direction, then adding notes that explain what each example contributes. A useful mood board helps you choose a direction for a page instead of becoming a pile of attractive screenshots. ## Build the mood board around one decision Start with a question such as "Should this page feel technical and focused?" or "How can the product look calm without feeling empty?" Save references that answer that question from different angles. A balanced board usually includes one or two structure references for the hero, navigation, and section order; two or three visual references for typography, color, imagery, and spacing; one interaction reference for a demo, hover state, scroll effect, or CTA pattern; and one practical reference for forms, pricing, feature details, or mobile behavior. This keeps the board specific enough to guide decisions while leaving room for your own content. If every saved website looks nearly identical, you may be collecting copies of one direction rather than comparing options. Open the examples below and compare the first screen before choosing a direction. One uses a strong dark grid and restrained CTA, another emphasizes oversized proof and whitespace, another turns the product into a live hero demo, and another uses a compact feature grid with short commands. ## Captured pages [![Vercel AI](https://pin.fontofweb.com/310?format=jpg)](https://design.withfudge.com/share/pin-310) [Vercel AI](https://design.withfudge.com/share/pin-310) [![Braintrust](https://pin.fontofweb.com/189?format=jpg)](https://design.withfudge.com/share/pin-189) [Braintrust](https://design.withfudge.com/share/pin-189) [![json-render](https://pin.fontofweb.com/7794?format=jpg)](https://design.withfudge.com/share/pin-7794) [json-render](https://design.withfudge.com/share/pin-7794) [![AI SDK](https://pin.fontofweb.com/8392?format=jpg)](https://design.withfudge.com/share/pin-8392) [AI SDK](https://design.withfudge.com/share/pin-8392) ## Make each reference earn its place When saving a website, write a note using this structure: > **Direction:** [what feeling or job it supports]. **Evidence:** [specific visible details]. **Borrow:** [one adaptable idea]. For example: "Focused technical direction. Dark grid, restrained CTA, and strong visual composition. Borrow the controlled contrast, not the exact content." Or: "Confident proof direction. Oversized result and generous whitespace. Borrow the scale relationship between evidence and supporting copy." The note should explain why the reference belongs on the board. If you cannot name the detail you want to study, save it to a general library instead of the active mood board. ## Compare directions side by side After collecting several examples, compare them using the same checklist: - Does the hero explain the product quickly? - Is the main action easy to spot without dominating the page? - Does the type feel compact, editorial, technical, playful, or premium? - Is the page open because of generous spacing, sparse content, or both? - Does the color system create a clear hierarchy between background, text, surfaces, and actions? - Do cards and sections repeat a consistent shape and rhythm? - Would the direction still work with your real headline, images, and proof? Score each direction from 1 to 5 for clarity, fit, distinctiveness, and ease of adapting. The highest visual score is not always the best choice. A direction that fits the product and supports the visitor's next step is usually more useful than one that simply looks impressive. ## Turn the mood board into design decisions End the board with a short direction statement covering the mood, type approach, color approach, layout rhythm, and one thing to avoid. For example: "Use a focused technical direction with a dark neutral base, one restrained accent, large but compact headings, generous space around proof, and a clear product visual. Avoid filling every section with cards." Then create a small set of rules: - Use one primary action color. - Keep the hero message to one clear promise. - Use wide spacing around proof and denser spacing inside supporting details. - Repeat one card shape only where grouping improves scanning. - Check the mobile version before finalizing the desktop direction. The mood board is finished when it makes decisions easier. Remove references that no longer support the chosen direction and explain what each remaining example taught you. ## Use this in your AI agent > Help me create a website mood board for [project or page]. Search my saved references for three different visual directions, compare their page structure, typography, color roles, spacing, imagery, and CTA treatment, then recommend one direction with a short set of rules and a list of patterns to avoid copying directly. You can [install Fudge for your AI agent](/mcp) to compare saved references during design work. --- Start with 6 to 10 strong references for one page or visual direction. That is usually enough to compare structure, typography, color, and interaction without making the board difficult to review. A useful mix is two structure references, three visual references, one interaction reference, and one practical reference for forms, pricing, or mobile layout. Add more only when they answer a question the current board cannot answer. If you have 20 references, split them into two or three directions instead of keeping them in one long list. Watch for repetition. If several sites show the same dark hero, large heading, or card grid, keep the clearest example and use the others to compare a specific detail. The goal is not to prove that a style exists. The goal is to decide how your page should work. Before building, narrow the board to a final set of three to five references and write one sentence about the direction they support. Keep the remaining examples in your general library so they are still available for later projects. --- Convert the board into decisions in this order: message, structure, type, color, components, and checks. First write the page's main promise and primary action. Then sketch the section order using the structure references, without copying their wording. Choose a type direction next: display scale, body width, weight contrast, and line height. After that, define color roles for the background, text, surfaces, borders, and action color. Turn repeated visual patterns into a small component list. You might choose a navigation style, one button shape, one card treatment, a proof block, and a product preview. Do not carry every pattern from the mood board into the page. Select only the pieces that support the visitor's decision. Finally, test the draft against the direction statement. Ask whether the hero feels clear, the spacing has the intended rhythm, and the CTA has the right emphasis. Check a real headline and real content early. A mood board can suggest a direction, but the page content decides whether that direction works. ## Related questions - [Search Your Captured Website Designs With an AI Coding Agent](/share/search-my-collection-of-captured-website-designs-with-an-ai-coding-agent) - [Save Websites to a Saved Website Reference Library](/share/save-websites-to-my-saved-website-reference-library) - [Search Your Design Inspiration Collection With an AI Coding Agent](/share/search-my-design-inspiration-collection-with-an-ai-coding-agent) - [Save Websites to a Design Inspiration Collection](/share/save-websites-to-my-design-inspiration-collection)