Neruve
首页

Frontend Design Skills：Claude Code 与 Codex 安装指南

先按任务选 Skill，保留完整目录安装，再给 Agent 一份具体需求。本指南提供本地安装步骤、浏览器实测示例和六个免登录阅读、复制的资源。

Neruve 编写 · 更新于

从可用的页面开始

先预览可用的 HTML 页面，再让编程智能体结合源码和配套 Prompt，练习这些方法。

Framewise — AI 产品落地页 HTML 模板

练习产品叙事、视觉层次和响应式首屏。

预览模板

Aster Hale — 产品设计师作品集 HTML 模板

将服务介绍、项目叙事与联系流程改成你自己的内容。

预览模板

Skills 继续免登录免费阅读和复制。模板可公开预览；源码下载和配套 Prompt 需要账户及相应购买权益或套餐。 查看源码权限和价格

安装前先选对 Skill

Anthropic 的 frontend-design 提供视觉设计指导；Taste 是独立的社区项目，Framer 转换与动效 Skill 则面向不同任务。README 概览不是可安装的 SKILL.md。先核对原始来源、许可证和依赖。以下用 Anthropic frontend-design 演示目录安装，并非适用于所有资源的通用安装器。

在 Claude Code 中安装

优先安装到项目目录，将影响限定在当前仓库。保留原有目录结构、许可证及支持文件。“复制到 Agent”得到的是安装请求，网站不会直接在你的电脑上安装。

  1. 打开下方 frontend-design 原始来源，阅读 SKILL.md、许可证及引用的支持文件。
  2. 将选中的完整 Skill 目录复制到项目根目录的 .claude/skills/frontend-design/。若已有同名目录，先比较内容，再决定是否替换。
  3. 在该项目中打开 Claude Code，输入 / 确认菜单中出现 frontend-design，选中后补上任务。
.claude/skills/frontend-design/SKILL.md

本例使用 /frontend-design 加上具体需求。若未出现，检查目录、SKILL.md 文件名、当前仓库和工作区策略。插件中的 Skill 可能使用带命名空间的命令。

官方安装文档

在 Codex 中安装

Codex 使用不同的项目目录。可复用兼容的 Skill 指令，但应先检查工具专用命令和依赖。Skill 是工作指导，不会提供业务后端或其他工具的账号。

  1. 将已核对的 Skill 目录复制到项目根目录的 .agents/skills/frontend-design/，保留支持文件和许可证。
  2. 确认 SKILL.md 以包含 name 和 description 的 YAML 开头，后面是实际指令。Anthropic 本例的名称为 frontend-design。
  3. 在 Codex CLI 或 IDE 扩展中使用 /skills，或输入 $ 选择 Skill；桌面应用使用 Skill 选择器。若变更未被识别，重启 Codex。
.agents/skills/frontend-design/SKILL.md

CLI／IDE 中选择 $frontend-design 后补上需求。确认 Agent 实际读取了选中的文件；目录同名不代表已经使用。

官方安装文档

运行一个需求，再检查实际页面

写清页面、受众、主操作及必须保留的事实。可以使用下方需求或实测示例。在 1280、390、320 px 检查页面，点击主链接并用键盘操作。保留源码和截图；未通过的检查如实记录。

Frontend Design Skill 没出现或未触发？

先确认安装方式。项目中的 Skill 目录与 Claude Code 插件使用不同的路径和命令名称。

放在项目中的 Skill 目录
Claude Code 手动安装示例将 SKILL.md 和配套文件放在 .claude/skills/frontend-design/。Codex 使用上方 .agents/skills/ 示例。README 概览并非可安装文件。
由插件提供的 Skill
在 Claude Code 中打开 /plugin，确认插件已安装、启用，且作用范围是预期的项目或用户。使用菜单显示的命令；插件 Skill 可能带命名空间。按插件自身说明完成配置。

按这个顺序检查

  1. 确认当前项目、选择的 Skill 来源和安装范围。保留必要的配套文件；替换前先比较同名目录。
  2. 检查 SKILL.md 文件名，确保 YAML 从第一行开始。Claude Code 需检查 name、description 和调用控制字段；YAML 格式错误可能影响自动匹配，即使手动调用仍可用。
  3. 确认 Skill 已被列出。在 Claude Code 中询问可用 Skills 并检查 / 菜单。若已列出但未使用，用菜单中的命令加上符合描述的任务手动调用，并检查 disable-model-invocation 和 user-invocable。
  4. 确认 Agent 实际读取了目标 Skill 并执行所需任务。随结果保留文件路径或工具记录，再用浏览器检查页面。只有目录名或好看的截图，不能确认 Skill 被使用。

下方 Codex 案例是手动读取固定版本文件，未验证自动发现或 Claude Code 插件安装。请结合所用版本查阅官方文档。

官方安装文档

按用途选择相关 Skill

六个详情页均可免登录阅读和复制。先看各页的使用说明：Framer 集成、视频工具和支持模块不能当作普通前端 Skill 混用。

可自行改写的原创练习

以下 Neruve 原创示例保留英文，是建议输入，不是工具实测输出或付费模板 Prompt。使用前请替换虚构事实。

提供给前端设计 Skill 的项目需求

Work in this project's current stack. Read the existing routes, shared components,
styles and the selected frontend-design skill before proposing changes.
Use only the project files and assets I have permission to use.

Task: improve a fictional research-notes landing page for small product teams.
Page goal: explain collect → compare → decide; the primary link targets #workflow.
Design direction: warm paper, ink text, a clear research-note specimen and generous spacing.
Keep the existing API contracts, authentication, prices and route paths unchanged.
Use the skill for the design procedure; use my brief for product facts.

First propose the section order and the shared typography/spacing decisions.
Then implement one coherent pass. Check 1280, 390 and 320 px widths, keyboard focus,
the workflow anchor and reduced motion. Report the checks actually run and defects
still open. Do not invent testimonials, customer logos, metrics or a signup backend.

限定范围的设计审查

Review this existing page using the selected design skill.
Before editing, list the three highest-impact defects with a selector or section
name, viewport width and screenshot evidence. Separate styling defects from
broken behavior. Choose one defect, explain the smallest change that addresses it,
and preserve the current copy, prices, forms and navigation contracts.
After the repair, repeat the same browser check and report any regression.
Do not replace the whole page or add another component library for this repair.

实测示例：用 frontend-design 制作 Fieldnote

一个虚构的研究笔记页面：笔记示例、收集—比较—决定的流程，以及可点击的页内链接。可打开示例，也可下载原始需求和 HTML；示例保留英文。

2026 年 10 月 13 日在 Codex 中手动读取固定版本的 Anthropic Skill 后实现，并做浏览器检查。所用来源： Anthropic frontend-design · dbd4588

下载完整输入（英文）下载未改动的 HTML 源码（英文）打开生成的练习页面（英文）
Fieldnote 桌面示例：标题与虚构研究笔记并排显示
1280 × 900：标题与研究笔记并排。
Fieldnote 手机示例：介绍下方显示研究笔记
390 × 844：笔记排列在介绍之后，主操作可点击。

复现时，按上方步骤安装已核对的 Skill，再把下载的需求交给 Agent。在 1280、390、320 px 比较实际输出，核对流程链接和键盘焦点，并如实保留差异。

这只是一次手动提供指导的示例，未验证自动发现 Skill、Claude Code、Taste 或 Neruve 生成服务；没有模型对比、注册流程或转化提升结论。

常见问题

安装设计 Skill 就能保证网站更好吗？

不能。这里的实测示例是在 Codex 中手动读取固定版本的 Anthropic Skill 后完成的一次实现，没有无 Skill 对照，也不证明所有工具都会改善。旧版 Fieldnote 示例未使用设计 Skill。

浏览设计与配套 Prompt

Neruve 的公开目录提供网站设计、可用的配套提示词和 Skills 目录。交互预览无需登录；配套提示词按条目与套餐权益获取。本工作流使用你自己的编程工具，无需公开的 Neruve 网站生成器。

官方参考资料

第三方工具和 Skill 属于各自作者。链接用于参考，不表示合作关系或已包含相关使用权益。