本文へ移動
cccskills
無料GitHub で公開

website-reference-researcher

Research 3–5 confirmed same-industry or cross-industry websites and translate their brand narrative, page architecture, art direction, and visual-system evidence into one reusable Visual Reference Brief. Use when strong references are scarce, a site needs brand-led or premium positioning, a page lacks a narrative spine, or a key module lacks a credible design precedent. Do not create page content, a Design System, UI directions, HTML, or a permanent brand gallery.

インストール方法を見る

含まれるファイル(5)

  • SKILL.md5.2 KB
  • agents/openai.yaml288 B
  • evals/reference-research-cases.md2.5 KB
  • references/cross-industry-analysis.md5.1 KB
  • references/visual-reference-brief-contract.md2.8 KB

SKILL.md(原文)

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Website Reference Researcher

把真实网站参考转化为可迁移的设计证据。目标不是复刻品牌外观,而是解释某种叙事、构图、素材或视觉规则为什么适合当前设计问题,并将结论分别交给 Page Content、Design System 和 UI Architecture。

触发与跳过

满足任一条件时使用:

  • 同行业缺少高质量或有设计深度的参考;
  • 用户要求品牌型、体验型、议题型或“大牌感”官网;
  • Page Content 缺少中心命题、叙事主线或内容取舍依据;
  • Design System 方向持续模板化,缺少 Art Direction 证据;
  • UI Architecture 的关键页面或模块缺少合理表达方式;
  • 用户明确要求研究参考网站。

普通转化页任务清晰、单模块已有强参考、或现有 Visual Reference Brief 仍覆盖当前目标时跳过。Existing Site 为保持原站风格而提取当前站点基线,属于 website-design-system-architect,不由本 Skill 接管。

输入

优先读取:

  1. 已确认的公司资料、受众、业务边界和素材清单;
  2. 页面或模块目标、目标转化与当前设计问题;
  3. 用户指定 URL、截图或第三方 DESIGN.md;
  4. 现有 docs/research/*-visual-reference-brief.md,用于判断是否可复用。

公司事实不足以判断参考对象时返回总控 Company Intake。参考研究不能补造企业定位、能力或证据。

唯一流程

  1. 定义 Research Scope、触发原因和当前待解决的设计问题;站点、页面和模块研究不得混成无边界的案例集合。
  2. 读取 跨行业分析方法,根据设计问题相似性建立 5–8 个候选。用户已明确给出最终限定名单时直接使用;否则请用户确认最终 3–5 个后才深度研究。
  3. 使用真实浏览器查看确认网站的首页或与范围直接相关的代表页面。记录 URL、查看日期、可见内容、截图或渲染观察;单一网站只查看解决当前问题所需的最少页面。
  4. 按六层分析参考:Brand Narrative、Narrative Architecture、Content Editing、Page / Module Architecture、Art Direction、Visual System / DESIGN.md。当页面动态与当前设计问题有关时,在 Page / Module Architecture 与 Art Direction 中记录 Motion / Interaction Evidence,不把静态截图推断成真实行为。
  5. 将每项结论标记为 Observed / Inferred / Transferable / Not Transferable,说明跨行业相似点、迁移理由和适用边界。
  6. 按 共享简报合同 写入一份 Visual Reference Brief,并执行证据、职责和反复刻自查。
  7. 把同一简报的最小相关部分分别交给 Page Content、Design System 或 UI Architecture;简报本身不是新的确认门禁。

路径

  • 站点级:docs/research/site-visual-reference-brief.md
  • 页面或模块级:docs/research/<scope-slug>-visual-reference-brief.md

scope-slug 使用当前已确认的页面 slug 或 Section ID;若两者均存在,使用 <page-slug>-<section-id>。每次研究只维护当前 Scope 的一份简报,不为每家公司创建独立档案。

证据规则

  • 真实页面观察高于第三方 DESIGN.md、图库摘要或营销说明。
  • DESIGN.md 只在 1–2 个核心参考确有帮助时作为视觉系统辅助证据;不能直接复制为项目 Design System。
  • 静态截图不能证明 Hover、Focus、动效、响应式或完整交互;无法观察时标记缺口。真实观察到的动效需记录 Trigger、运动对象、目的、频率、移动端表现、素材/运行成本及 Reduced Motion 证据(若可见)。
  • 外站事实、品牌命题、专属视觉资产、Logo、角色、摄影和文案不得成为当前企业事实或可直接复制资产。
  • 相似色值、圆角或组件不是跨行业迁移的充分理由;必须说明共享的用户任务、决策成本、证据类型或素材角色。
  • 无法访问的网站保留为 Unavailable,不根据记忆补写观察结论。

交付边界

  • 本 Skill 只交付研究证据与迁移建议,不选择最终品牌方向,不生成 Page Content、Design Board、Design System、Architecture Map、方向图或 HTML。
  • Page Content 只消费品牌命题、叙事、内容取舍和证据策略;Design System 只消费 Art Direction、Visual System、跨页面 Motion 性格和迁移边界;UI Architecture 只消费页面/模块结构、媒体、构图、响应式与可迁移的 Motion / Interaction 模式。
  • 用户不需要单独确认研究简报。所有最终取舍仍由下游原有门禁确认。

需要验证触发、证据和跨阶段边界时读取 行为用例。

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

同じリポジトリのスキル

概要と使いどころ

Initialize a local custom Elementor Widget plugin, design handoff workspace, and pending site-style context, choosing a Flat or Grouped plugin structure from expected Widget scale. Use once before the first custom Widget when no plugin scaffold exists; theme context is optional and read-only. Do not map Elementor Site Settings, design visuals, implement Widgets, deploy, or inspect a live WordPress installation.

日本語の概要は準備中です。原文の説明を表示しています。

javen-wangjunren/elementor-website-skill332026年9月14日 更新

Map a confirmed platform-neutral website Design System to a local Elementor Site Settings and Widget inheritance contract. Use for a new or rebuilt Elementor site that needs Global Style setup guidance, or an existing site that must preserve its current visual system. Do not redesign the site, implement Widgets, or modify WordPress, Elementor, themes, or remote data.

日本語の概要は準備中です。原文の説明を表示しています。

javen-wangjunren/elementor-website-skill332026年9月14日 更新

Coordinate the custom Elementor Widget site workflow for kickoff, lightweight company intake, conditional reference research, new-versus-existing site style routing, uncertain next steps, project resumption, or continuous work across content, Design Systems, UI, HTML, and Widget implementation. Do not use for release, old-Widget troubleshooting, theme development, or remote WordPress management.

日本語の概要は準備中です。原文の説明を表示しています。

javen-wangjunren/elementor-website-skill332026年9月14日 更新

把确认版模块 HTML、整页 HTML 中指定的 Section,或既有 Elementor 页面中用户明确批准的简单强参考模块,以克制字段实现为插件式 Elementor Widget。用于新增或迁移单个已确认 Widget;不用于设计探索、复杂参考图直做、批量整页实现、旧 Widget 排错、主题开发或发布。

日本語の概要は準備中です。原文の説明を表示しています。

javen-wangjunren/elementor-website-skill332026年9月14日 更新

Create or evolve an implementation-agnostic website design system from existing-site evidence, verified brand inputs, and an optional Visual Reference Brief. Use to establish visual and restrained-motion baselines, extract an existing site's rendered system for style-preserving extensions, validate one selected baseline with a compact Design Board, or update shared rules before page/module design. Do not conduct cross-industry reference research, map Elementor settings, create page layouts, design modules, or implement production code.

日本語の概要は準備中です。原文の説明を表示しています。

javen-wangjunren/elementor-website-skill332026年9月14日 更新

Build, review, and browser-test interactive website page or module HTML from a confirmed UI Architecture Map and visual direction. Use for HTML First Drafts, restrained motion implementation, full-page or module-first prototypes, rendered design review, responsive and interaction QA, page composition, and implementation handoff. Do not use for design exploration, unconfirmed visual or motion direction, content strategy, Design Systems, Elementor controls, CMS templates, or framework components.

日本語の概要は準備中です。原文の説明を表示しています。

javen-wangjunren/elementor-website-skill332026年9月14日 更新

javen-wangjunren のスキルをすべて見る

このスキルの問題を報告する