Back to Details

publish-research-site

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Publish Research Site

发布研究类网站

Overview

概述

Use this skill to orchestrate a four-stage pipeline: deep research, generated bitmap assets, production-grade interactive website creation, and Vercel CLI deployment. Treat the final artifact as a public-facing, shareable microsite: rigorous enough to cite, visual enough to travel, and fast enough to open on mobile.
使用此技能可编排一个四阶段流程：深度研究、生成位图资源、创建生产级交互式网站以及通过Vercel CLI部署。最终产出物是一个面向公众的可分享微型网站：严谨到可用于引用，视觉表现力强便于传播，且加载速度快可在移动端流畅打开。

Workflow

工作流程

0. Preflight dependencies

0. 前置依赖检查

Before research or implementation, check that the required skills and CLIs are available. Prefer the user's Codex-local toolchain paths when commands are not on the default PATH:
bash
export PATH="$HOME/.agent-reach-venv/bin:$HOME/.codex/toolchains/node-current/bin:$HOME/.codex/toolchains/gh-current/bin:$PATH"

for cmd in node npm npx vercel agent-reach mcporter yt-dlp gh; do
  command -v "$cmd" >/dev/null || {
    echo "Missing required dependency: $cmd"
    exit 1
  }
done

agent-reach doctor
Also confirm the skill files are present when the environment exposes the local skills folders:
bash
test -f "$HOME/.agents/skills/deep-research/SKILL.md" || echo "Missing skill: deep-research"
test -f "$HOME/.agents/skills/agent-reach/SKILL.md" || echo "Missing skill: agent-reach"
test -f "$HOME/.agents/skills/frontend-design/SKILL.md" || echo "Missing skill: frontend-design"
test -f "$HOME/.codex/skills/.system/imagegen/SKILL.md" || echo "Missing skill: imagegen"
If a required dependency is missing, stop before starting the project and ask the user to install or authorize installing the missing prerequisite. Do not discover missing deployment tools after the site is already built.
在开始研究或实现前，检查所需技能和CLI是否可用。当命令不在默认PATH中时，优先使用用户的Codex本地工具链路径：
bash
export PATH="$HOME/.agent-reach-venv/bin:$HOME/.codex/toolchains/node-current/bin:$HOME/.codex/toolchains/gh-current/bin:$PATH"

for cmd in node npm npx vercel agent-reach mcporter yt-dlp gh; do
  command -v "$cmd" >/dev/null || {
    echo "Missing required dependency: $cmd"
    exit 1
  }
done

agent-reach doctor
当环境暴露本地技能文件夹时，还需确认技能文件是否存在：
bash
test -f "$HOME/.agents/skills/deep-research/SKILL.md" || echo "Missing skill: deep-research"
test -f "$HOME/.agents/skills/agent-reach/SKILL.md" || echo "Missing skill: agent-reach"
test -f "$HOME/.agents/skills/frontend-design/SKILL.md" || echo "Missing skill: frontend-design"
test -f "$HOME/.codex/skills/.system/imagegen/SKILL.md" || echo "Missing skill: imagegen"
若缺少必要依赖，需在项目启动前停止操作，并请求用户安装或授权安装缺失的前置条件。切勿在网站已构建完成后才发现缺失部署工具。

1. Scope the proposition

1. 明确命题范围

Restate the user's thesis or topic as a working brief:
  • Core proposition or question
  • Intended audience and desired tone
  • What the site should make the audience believe, understand, compare, or explore
  • Any required language, region, timeframe, or deployment preference
Proceed autonomously when the intent is clear. Ask only when the proposition, audience, or deployment target is too ambiguous to act safely.
将用户的论文或主题重述为一份工作简报：
  • 核心命题或问题
  • 目标受众与期望语气
  • 网站应让受众相信、理解、对比或探索的内容
  • 任何要求的语言、地区、时间范围或部署偏好
当意图明确时可自主推进。仅当命题、受众或部署目标过于模糊，无法安全开展工作时才询问用户。

2. Run deep research

2. 开展深度研究

Invoke the existing 
$deep-research
skill when available. Use standard mode by default; use deep or ultradeep when the site supports a consequential decision, controversial claim, investment argument, technical architecture judgment, or public-facing factual report.
Research output must include:
  • Executive thesis with confidence level
  • Key claims with citation IDs
  • Contradictions, counterarguments, and uncertainty
  • Source list with URLs, publication dates where relevant, and credibility notes
  • 5-10 material facts that should appear in the website
  • 3-5 visual opportunities suggested by the evidence
Do not build the site until the evidence base is strong enough for the claim. For current topics, verify facts with recent sources and label dates explicitly.
若现有
$deep-research
技能可用，则调用该技能。默认使用标准模式；当网站支持重大决策、有争议的主张、投资论证、技术架构判断或面向公众的事实报告时，使用深度或超深度模式。
研究输出必须包含：
  • 带有置信度的执行摘要
  • 带引用ID的关键主张
  • 矛盾点、反驳论点与不确定性
  • 包含URL、相关发布日期及可信度说明的来源列表
  • 应在网站中呈现的5-10个重要事实
  • 证据所提示的3-5个可视化机会
在支撑主张的证据足够充分前，切勿构建网站。对于时效性主题，需用近期来源验证事实，并明确标注日期。

3. Convert research into a site brief

3. 将研究转化为网站简报

Create a concise site brief before coding. Use 
references/site-brief-template.md
when the project has multiple sections, many claims, or several generated assets.
The brief must define:
  • Narrative arc: hook, evidence path, tension/counterpoint, synthesis, action or takeaway
  • Sections and interactions
  • Claim-to-source map
  • Visual asset list and image prompts
  • Framework choice and project directory
  • Verification and deployment checklist
Keep website copy tight. Turn research into scannable public communication rather than pasting a full report into the UI.
在编码前创建一份简洁的网站简报。当项目包含多个章节、大量主张或多个生成资源时，使用
references/site-brief-template.md
模板。
简报必须明确：
  • 叙事结构：钩子、证据路径、冲突/对立点、综合分析、行动建议或核心结论
  • 章节与交互方式
  • 主张与来源的对应关系
  • 视觉资源列表与图像生成提示词
  • 框架选择与项目目录
  • 验证与部署检查清单
网站文案需简洁紧凑。将研究内容转化为便于浏览的公开传播内容，而非直接将完整报告粘贴到UI中。

4. Generate images

4. 生成图像

Invoke the existing 
$imagegen
skill for raster images that materially improve the site: hero art, editorial illustrations, product/scene imagery, explainers, posters, thumbnails, or social share visuals.
Image workflow:
  • Generate only assets that the site will actually use.
  • Write prompts from the research brief, including subject, composition, style, aspect ratio, avoid list, and whether text should be absent.
  • Avoid putting factual claims or small text inside generated images unless the user explicitly wants typographic art.
  • Inspect outputs, iterate once or twice when needed, and keep only usable finals.
  • Move or copy final project-bound assets into the website workspace, usually under 
    public/assets/
    or the framework equivalent.
  • Record final prompts and saved paths in the site brief or final report.
调用现有
$imagegen
技能生成能切实提升网站质量的光栅图像：首屏视觉图、编辑插图、产品/场景图、讲解图、海报、缩略图或社交分享图。
图像生成流程：
  • 仅生成网站实际会用到的资源。
  • 根据研究简报撰写提示词，包含主题、构图、风格、宽高比、禁忌内容，以及是否应避免添加文字。
  • 除非用户明确要求排版艺术，否则切勿在生成图像中加入事实主张或小字体文本。
  • 检查输出结果，必要时迭代1-2次，仅保留可用的最终版本。
  • 将最终项目所需资源移动或复制到网站工作区，通常放在
    public/assets/
    或对应框架的等效目录下。
  • 在网站简报或最终报告中记录最终提示词与保存路径。

5. Build the interactive website

5. 构建交互式网站

Invoke 
$frontend-design
when available, then implement the actual experience, not a marketing placeholder.
Default implementation guidance:
  • Prefer Vite/React, Next.js, or a static HTML/CSS/JS site according to the workspace and deployment needs.
  • Make the first viewport communicate the proposition immediately.
  • Include at least one meaningful interaction: scrollytelling, timeline, comparison slider, evidence cards, filterable claim map, scenario toggle, chart interaction, annotated diagram, quiz, or calculator.
  • Show citations close to the claims they support.
  • Include a source drawer, notes section, or reference panel for readers who want to verify.
  • Make it responsive, fast, accessible, and visually memorable.
  • Use generated images as real assets, not decoration that could be removed without changing the communication.
Avoid generic placeholder sections, uncited claims, dummy charts, stock-like visuals, or interaction that does not teach the user anything.
若现有
$frontend-design
技能可用，则调用该技能，随后实现真实的交互体验，而非营销占位页面。
默认实现指南：
  • 根据工作区与部署需求，优先选择Vite/React、Next.js或静态HTML/CSS/JS网站。
  • 首屏需立即传达核心命题。
  • 至少包含一种有意义的交互方式：滚动叙事、时间线、对比滑块、证据卡片、可筛选主张地图、场景切换器、图表交互、带注释的图表、测验或计算器。
  • 在主张附近展示对应的引用来源。
  • 为想要验证内容的读者提供来源抽屉、注释区或参考面板。
  • 确保网站响应式、加载快、可访问性强且视觉记忆点清晰。
  • 将生成图像作为真实资源使用，而非可随意移除且不影响信息传达的装饰元素。
避免使用通用占位章节、无引用的主张、虚拟图表、类库存视觉素材，或无法为用户传递任何知识的交互功能。

6. Verify locally

6. 本地验证

Before deployment:
  • Install dependencies only as needed and preserve the existing package manager style.
  • Run lint/typecheck/tests when present.
  • Run a production build.
  • Start the local server when needed.
  • Use browser verification on desktop and mobile widths.
  • Confirm generated images load from project-local paths.
  • Confirm external links and citations are reachable when practical.
  • Fix visible layout problems, overlapping text, blank canvases, console errors, and broken routes.
Do not claim the site is ready until the build and visual checks have actually run, or clearly report what could not be verified.
部署前：
  • 仅在需要时安装依赖，并保留现有包管理器的风格。
  • 若存在lint/类型检查/测试，则运行这些检查。
  • 执行生产构建。
  • 必要时启动本地服务器。
  • 在桌面端与移动端宽度下进行浏览器验证。
  • 确认生成图像从项目本地路径正常加载。
  • 尽可能确认外部链接与引用可正常访问。
  • 修复可见的布局问题、文本重叠、空白画布、控制台错误与路由故障。
在实际完成构建与视觉检查前，切勿宣称网站已准备就绪；若有无法验证的内容，需清晰说明。

7. Deploy with Vercel CLI

7. 通过Vercel CLI部署

Use Vercel CLI for deployment.
Preferred sequence:
bash
export PATH="$HOME/.codex/toolchains/node-current/bin:$PATH"
vercel --version
npm run build
vercel --yes
Use 
vercel --prod --yes
only when the user asks for production or the task clearly requires a production deployment. If an existing Vercel project/domain could be overwritten, ask before production deployment.
If the local 
vercel
command is unavailable after adding the Codex-local Node toolchain to PATH, use 
npx vercel@latest
. If Vercel authentication is missing, ask the user to log in or confirm an alternative deploy path; do not silently switch to a non-CLI deployment service.
Capture the deployment URL from CLI output and test it in a browser. If deployment succeeds but remote verification fails, report both the URL and the failure.
使用Vercel CLI进行部署。
推荐流程：
bash
export PATH="$HOME/.codex/toolchains/node-current/bin:$PATH"
vercel --version
npm run build
vercel --yes
仅当用户要求生产环境部署，或任务明确需要生产部署时，才使用
vercel --prod --yes
。若现有Vercel项目/域名可能被覆盖，需在生产部署前询问用户。
若将Codex本地Node工具链添加到PATH后，本地
vercel
命令仍不可用，则使用
npx vercel@latest
。若缺少Vercel认证，需请求用户登录或确认替代部署路径；切勿默认切换到非CLI部署服务。
从CLI输出中捕获部署URL，并在浏览器中测试。若部署成功但远程验证失败，需同时汇报URL与失败情况。

Final Response

最终反馈

Report only the useful handoff details:
  • Deployed URL
  • Local project path
  • Research scope and source count
  • Generated image asset paths
  • Verification commands run
  • Known limitations or unverified items
Keep the final answer concise and include links or file paths the user can open immediately.
仅汇报实用的交接细节：
  • 部署后的URL
  • 本地项目路径
  • 研究范围与来源数量
  • 生成图像资源的路径
  • 已执行的验证命令
  • 已知限制或未验证项
保持最终回答简洁，并包含用户可立即打开的链接或文件路径。