# Design Research > Use when retrieving real design references — landing pages, user flows, visual styles — from free public galleries to ground imagegen or frontend-design work in what real products actually do. Triggers on "design references", "real UI references", "find design inspiration", "设计参考", "真实设计参考", "找设计灵感", "设计灵感". Not for generating design images (use imagegen) or writing frontend code (use frontend-de… - **Type:** Skill - **Install:** `agentstack add skill-int2t05-engineering-skills-design-research` - **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior - **Seller:** [int2t05](https://agentstack.voostack.com/s/int2t05) - **Installs:** 0 - **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills) - **Latest version:** 0.1.0 - **License:** MIT - **Upstream author:** [int2t05](https://github.com/int2t05) - **Source:** https://github.com/int2t05/engineering-skills/tree/main/skills/03-design/design-research ## Install ```sh agentstack add skill-int2t05-engineering-skills-design-research ``` Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent. ## About # Design Research Retrieve real, published design references from free public galleries and curate them into a cited reference board that grounds downstream design work in what real products actually do — not in memory or generic AI patterns. Output is a reference board (URLs + analysis), never fabricated screenshots. ## When to use - Before `imagegen` or `frontend-design`, when the brief would benefit from real-market reference (how do fintech landing pages actually handle hero? how do SaaS pricing sections read?) - Researching a design pattern across real products (onboarding flows, empty states, pricing layouts) - Grounding a style direction in what the market already ships, not internal catalogs alone - Triggers on "design references", "real UI references", "find design inspiration", "设计参考", "真实设计参考", "找设计灵感", "设计灵感" **Not for:** generating design images (use `imagegen`); writing frontend code (use `frontend-design`); image-first code pipeline (use `image-to-code`); cited-text market/tech research (use `research` market/tech-selection modes). ## Steps ### 1. Frame the brief Extract four dimensions that route the search: - **Domain** — fintech, SaaS, AI, e-commerce, health, etc. - **Surface** — landing page / user flow / visual style. This decides the source, not platform. - **Intent** — feeding `imagegen` (art-direction inspiration), `frontend-design` (style grounding), or pattern research (standalone). - **Scope** — how many references are enough (default 5-8; state the target). ### 2. Route to source Match the surface to the source that covers it. Don't hit every source — route by surface. Full matrix and per-source details in [references/sources.md](references/sources.md). - Landing page + industry → Lapa Ninja (Finance/SaaS/AI categories) or Craftwork public pages (Finance/E-commerce/AI) - User flow / onboarding → Pageflows (web + mobile flows by type) - Visual style / aesthetic → Godly/Recent (discipline: Web/Interface/Branding) or Land-book (type: E-commerce/Apps & Software) **Capability boundary (read before promising):** free public sources cover landing pages and user flows well. iOS per-screen deep retrieval (Login/Wallet/Paywall/Settings tagged by screen type) is weak — that is a paid-source capability. WebFetch returns markdown (image URLs + visible text), not the screenshot pixels, so visual analysis is text-descriptive, not pixel-level. State this limit when the brief demands pixel precision. ### 3. Build the query For public galleries, a "query" is a category URL path + a search term, not an API call. Build the specific URL for the source's category that matches the brief's domain. - Lapa Ninja: `lapa.ninja/category/finance/`, `lapa.ninja/category/saas/` - Pageflows: search by flow type (onboarding, checkout, signup) - Godly/Recent: `recent.design/?type=interface` filtered by discipline - Craftwork: `craftwork.design/curated/websites` filtered by Money/Tech categories Per-goal example queries in [references/query-patterns.md](references/query-patterns.md). ### 4. Retrieve via WebFetch WebFetch the category/search page. Extract, per result: the source URL (deep link to the page), the image URL (CDN-hosted preview), the title, and any visible metadata (industry, type, tags). Record the source URL for every reference — it is the citation. - Fetch one category page at a time; extract 10-15 candidates, then curate down in Step 6. - If a source page is JS-heavy and returns little content, note it and try the next source rather than fighting the renderer. ### 5. Analyze each reference From the page's visible information, extract the design axes downstream skills need — as **text description**, not pixel measurement (WebFetch gives markdown, not the image): - Layout rhythm (section order, density, pacing) - Grid (columns, alignment, asymmetry) - Spacing (generous vs tight, breathing room) - Type scale (display vs body contrast, weight hierarchy) - Visual density (minimal vs rich, layering) - Accent-color logic (where the one accent lands, how it recurs) Full analysis lenses (8 dimensions, adapted from established UX-research frameworks) and output templates in [references/analysis-framework.md](references/analysis-framework.md). ### 6. Curate + synthesize Cross-reference the candidates, cluster patterns (e.g. "fintech heroes lead with trust signal, not feature list"), pick the 5-8 strongest, and write `docs/design/references.md`. Each entry pairs: - Source URL (markdown link) + image URL - The extracted analysis (axes above) - Which downstream skill it feeds (`imagegen` art direction / `frontend-design` style / `image-to-code` section plan) **Never fabricate screenshots or URLs.** Every entry must trace to a real fetched page. If a candidate couldn't be fetched, drop it. ### 7. Hand off End the reference board with the load instruction: "Load this file in `imagegen` Step 4 (Match references), `frontend-design` Step 2 (Pick a style), or `image-to-code` Step 1 (Plan sections)." **Output:** `docs/design/references.md` — curated reference board (source URL + image URL + text analysis + downstream-skill tag), feeding imagegen/frontend-design/image-to-code. ## Verify - [ ] Reference count meets the stated target (≥5) - [ ] Every entry has a real source URL (fetched, not invented) + image URL + analysis - [ ] No fabricated screenshots or URLs — each entry traces to a fetched page - [ ] `docs/design/references.md` written to disk with the load instruction - [ ] Capability boundary stated when the brief demanded pixel precision or iOS per-screen depth ## References - [${CLAUDE_PLUGIN_ROOT}/references/engineering-principles.md](${CLAUDE_PLUGIN_ROOT}/references/engineering-principles.md) — shared discipline (surface assumptions, verify don't assume, push back when warranted) - [${CLAUDE_PLUGIN_ROOT}/references/design-principles.md](${CLAUDE_PLUGIN_ROOT}/references/design-principles.md) — design discipline (CRAP, hierarchy before decoration, consistency from systems) - [references/sources.md](references/sources.md) — 5 free public sources (coverage, category URL patterns, WebFetch feasibility) + routing matrix + capability boundary (iOS per-screen, markdown-not-pixels) - [references/query-patterns.md](references/query-patterns.md) — brief → category URL path + search term, with per-goal example queries (fintech landing, SaaS hero, onboarding flow, error/empty states) - [references/analysis-framework.md](references/analysis-framework.md) — extraction axes (layout/grid/spacing/type/density/accent, text-descriptive) + 8 analysis lenses + 3 output frameworks (Reference Board / Competitive Comparison / Decision Log) ## Source & license This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code. - **Author:** [int2t05](https://github.com/int2t05) - **Source:** [int2t05/engineering-skills](https://github.com/int2t05/engineering-skills) - **License:** MIT Install and usage instructions live in the source repository linked above. ## Pricing - **Free** — Free ## Security capabilities Automated source analysis of v0.1.0 — what this tool can access: - **Network access:** no - **Filesystem access:** no - **Shell / process execution:** no - **Environment & secrets:** no - **Dynamic code execution:** no *"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.* ## Versions - **0.1.0** — security scan: passed — Imported from the upstream source. ## Links - Listing page: https://agentstack.voostack.com/l/skill-int2t05-engineering-skills-design-research - Seller: https://agentstack.voostack.com/s/int2t05 - Browse the marketplace: https://agentstack.voostack.com/browse --- Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.