# Refframe

> Refframe is a web design inspiration and reference library for finding, saving, organizing, and sharing visual references.

Refframe combines a public catalog of website and interface references with personal boards, filters, tags, uploads, and sharing workflows for designers and creative teams.

## Product

- [Web design inspiration and references](https://refframe.com/): Browse the public Refframe catalog and filter design references.
- [About Refframe](https://refframe.com/about): Learn what Refframe is and why it was created.
- [Pricing](https://refframe.com/pricing): Review current plans and product access.
- [FAQ](https://refframe.com/faq): Read answers about accounts, boards, uploads, sharing, and subscriptions.

## English articles

- [Landing Page Handoff Checklist](https://refframe.com/blog/landing-page-handoff-checklist): A practical pre-handoff checklist covering landing-page content, responsive behavior, states, accessibility, assets, component mapping, and visual verification.
- [Composition, Grid, and Type Rules](https://refframe.com/blog/web-design-composition-grid-typography-rules): Six practical heuristics for checking hierarchy, alignment, spacing, grid behavior, type roles, and readability before a web composition leaves Figma.
- [Design System Handoff to Claude Code](https://refframe.com/blog/pass-components-tokens-site-structure-to-claude-code): A practical context package for Claude Code: where to put design-system rules, how to map Figma components to code, and what the implementation prompt must verify.
- [Prepare a Design System for AI](https://refframe.com/blog/prepare-design-system-for-ai): Make a design system usable by AI coding tools by turning visual choices into explicit tokens, component contracts, responsive rules, examples, and verification criteria.
- [Build a Design System in Figma](https://refframe.com/blog/build-basic-design-system-figma-website): A step-by-step Figma workflow for turning a website’s repeated colors, spacing, typography, controls, and layout rules into a small working design system.
- [Design Systems for Web Designers](https://refframe.com/blog/what-is-a-design-system-for-web-designers): A practical explanation of design systems for web designers: what belongs in one, how it differs from a UI kit, and how small the first useful version can be.
- [Reference, Moodboard, or Example?](https://refframe.com/blog/design-reference-vs-moodboard-vs-example): A practical distinction between evidence for a decision, a shared visual direction, and an illustration used to explain an idea.
- [Find Web Design References](https://refframe.com/blog/where-to-find-web-design-references): Choose a reference source by the research task: web patterns, product flows, visual direction, or a benchmark for creative craft.
- [Refframe vs Awwwards](https://refframe.com/blog/awwwards-alternatives): Awwwards and Refframe answer different questions: creative excellence at the site level versus practical, reusable evidence at the section level.
- [Refframe vs Cosmos](https://refframe.com/blog/cosmos-alternatives): When broad visual discovery is useful—and when a structured web-reference library makes research easier to retrieve and defend.
- [Refframe vs Refero](https://refframe.com/blog/refero-alternatives): A fair comparison for designers choosing between a personal web reference library and structured real-product UI research.
- [Refframe vs Mobbin](https://refframe.com/blog/mobbin-alternatives): Choose between product-flow research and a web-first reference library with a criterion-by-criterion Refframe vs Mobbin comparison.
- [Hero Section Design Patterns](https://refframe.com/blog/hero-section-design-examples): Six current Refframe hero references compared by message, evidence, composition, responsive risk, and best-fit use case.
- [Landing Page Design Patterns](https://refframe.com/blog/landing-page-design-examples): Four current landing-page references from Refframe, analyzed by narrative sequence, product proof, density, and conversion risk.
- [Organize Design References](https://refframe.com/blog/how-to-organize-design-references): A practical workflow that turns scattered screenshots into a searchable reference library your team can actually reuse.
- [Web Design Inspiration Sites](https://refframe.com/blog/best-web-design-inspiration-websites): A task-based comparison of six established design inspiration services, checked against their official product, help, and pricing pages.
- [Refframe Blog Is Live](https://refframe.com/blog/changelog-blog-created): The Refframe blog is now wired into the app as a place for product updates, workflow notes, and changelog posts.
- [References in a Design System](https://refframe.com/blog/teams-reference-library-part-of-design-system): How visual references preserve the reasoning behind design-system tokens, components, patterns, and documented exceptions.
- [A Useful Team Reference Library](https://refframe.com/blog/teams-reference-library-actually-use): A practical structure, ownership model, and maintenance routine for a design reference library people actually reuse.
- [A Shared Reference Language](https://refframe.com/blog/teams-reference-library-mean-same-thing): How to create a small, practical vocabulary for tagging and discussing design references across a team.
- [Make Design Inspiration Reusable](https://refframe.com/blog/web-designers-better-way-to-remember-inspiration): A simple method for saving design inspiration with enough context to make it useful in a future project.
- [A Practical Reference Workflow](https://refframe.com/blog/web-designers-simple-reference-workflow): A six-step workflow for finding, comparing, and reusing design references without turning research into endless browsing.
- [Find References Faster](https://refframe.com/blog/web-designers-finding-reference-took-longer-than-designing): A practical look at how Refframe turns scattered browsing into focused, reusable web design research.

## Russian

- [Референсы для веб-дизайна](https://refframe.com/ru): Русская версия каталога Refframe.
- [О Refframe](https://refframe.com/ru/about): О сервисе и его назначении.
- [Тарифы](https://refframe.com/ru/pricing): Актуальные варианты доступа к продукту.
- [Вопросы и ответы](https://refframe.com/ru/faq): Ответы о работе с Refframe.
- [Чеклист перед сдачей лендинга](https://refframe.com/ru/blog/cheklist-veb-dizaynera-pered-sdachey-lendinga): Практический чеклист перед handoff: контент, адаптивность, UI-состояния, accessibility, ассеты, соответствие компонентам и визуальная проверка.
- [Композиция, сетка и типографика](https://refframe.com/ru/blog/pravila-kompozitsii-setki-tipografiki): Шесть практических правил для проверки иерархии, группировки, выравнивания, сетки, текстовых ролей и читаемости веб-макета.
- [Дизайн-система для Claude Code](https://refframe.com/ru/blog/komponenty-tokeny-struktura-sayta-v-claude-code): Практический пакет контекста для Claude Code: правила проекта, соответствие Figma и кода, структура страницы, референсы и проверка реализации.
- [Дизайн-система для работы с AI](https://refframe.com/ru/blog/kak-podgotovit-dizayn-sistemu-dlya-ai): Как превратить визуальные решения в токены, контракты компонентов, адаптивные правила и проверки, понятные AI-инструменту для разработки.
- [Дизайн-система сайта в Figma](https://refframe.com/ru/blog/bazovaya-dizayn-sistema-v-figma-dlya-sayta): Пошаговый процесс для Figma: как превратить повторяющиеся цвета, интервалы, типографику, контролы и сетки сайта в небольшую рабочую систему.
- [Дизайн-система для веб-дизайнера](https://refframe.com/ru/blog/chto-takoe-dizayn-sistema-dlya-veb-dizaynera): Практическое объяснение дизайн-системы: из чего она состоит, чем отличается от UI-кита и какой может быть первая рабочая версия для сайта.
- [Референс, мудборд или пример?](https://refframe.com/ru/blog/referens-mudbord-primer-raznitsa): Три похожих слова описывают разные рабочие артефакты: источник решения, набор направления и конкретную иллюстрацию.
- [Где искать веб-референсы](https://refframe.com/ru/blog/gde-brat-referensy-dlya-web-dizayna): Как выбирать источник референсов под конкретную задачу: веб-паттерны, продуктовые сценарии, визуальное направление или творческий ориентир.
- [Refframe или Awwwards](https://refframe.com/ru/blog/alternativy-awwwards): Awwwards и Refframe отвечают на разные вопросы: творческое качество цельного сайта и практические доказательства на уровне секций.
- [Refframe или Cosmos](https://refframe.com/ru/blog/alternativy-cosmos): Когда полезен широкий визуальный поиск, а когда структурированная библиотека веб-референсов делает исследование повторяемым.
- [Refframe или Refero](https://refframe.com/ru/blog/alternativy-refero): Refero для исследования реальных продуктов и сценариев, Refframe — для веб-референсов, визуальных тегов, загрузок и досок.
- [Refframe или Mobbin](https://refframe.com/ru/blog/alternativy-mobbin): Когда нужен полный контекст продуктового сценария, а когда быстрее работает сфокусированная библиотека веб-секций и собственных референсов.
- [Паттерны первого экрана](https://refframe.com/ru/blog/primery-dizayna-pervogo-ekrana): Шесть актуальных первых экранов из Refframe с разбором задачи, композиции, компромиссов и адаптивных рисков.
- [Паттерны дизайна лендингов](https://refframe.com/ru/blog/primery-dizayna-lendingov): Четыре актуальных лендинга из Refframe с разбором сценария, доказательств продукта, плотности и конверсионных рисков.
- [Организация дизайн-референсов](https://refframe.com/ru/blog/kak-organizovat-dizayn-referensy): Практический процесс, который превращает разрозненные скриншоты в поисковую библиотеку, полезную вам и команде.
- [Сайты для вдохновения в веб-дизайне](https://refframe.com/ru/blog/luchshie-sayty-dlya-vdohnoveniya-veb-dizaynera): Сравнение шести популярных сервисов по реальным задачам дизайнера, проверенное по официальным страницам продуктов, справки и тарифов.
- [Блог Refframe запущен](https://refframe.com/ru/blog/zapusk-bloga-refframe): Блог Refframe работает как единое место для обновлений продукта, практических процессов и исследований.
- [Референсы в дизайн-системе](https://refframe.com/ru/blog/biblioteka-referensov-kak-chast-dizayn-sistemy): Как связать визуальные референсы с токенами, компонентами, паттернами и исключениями дизайн-системы.
- [Референсы для дизайн-команды](https://refframe.com/ru/blog/biblioteka-referensov-kotoroy-komanda-polzuetsya): Практичная структура, правила и ритм поддержки библиотеки дизайн-референсов, к которой команда возвращается.
- [Общий язык референсов](https://refframe.com/ru/blog/kak-komande-dogovoritsya-o-referensah): Как создать компактный словарь для тегов, поиска и обсуждения дизайн-референсов внутри команды.
- [Сохраняем дизайн-вдохновение](https://refframe.com/ru/blog/kak-veb-dizayneru-sohranyat-vdohnovenie): Как сохранять дизайн-вдохновение с контекстом, чтобы найденные примеры помогали в будущих проектах.
- [Рабочий процесс с референсами](https://refframe.com/ru/blog/prostoy-protsess-raboty-s-referensami): Шесть шагов для поиска, сравнения и повторного использования дизайн-референсов без бесконечного просмотра ленты.
- [Быстрый поиск референсов](https://refframe.com/ru/blog/poisk-referensov-ne-dolzhen-zanimat-bolshe-dizayna): Как превратить разрозненный поиск веб-референсов в сфокусированное исследование, к которому можно вернуться.

## Optional

- [Privacy Policy](https://refframe.com/privacy-policy): Privacy and data-handling terms.
- [Terms of Use](https://refframe.com/terms-of-use): Terms governing use of Refframe.