su-webstyle-top12

中文 | English

海外网页风格 Top 12 图谱 Skill，适用于 Codex、Claude Code 和其他 Agent 编程工具。

它不是一个替用户拍板的模板包，而是一个开放风格图谱：Agent 先列出风格，用户自己选择，然后再落地产出。

它能做什么

su-webstyle-top12 可以帮助 Agent：

• 列出 12 种海外主流网页设计风格
• 用简单语言解释每种风格的区别
• 生成可视化风格看板，方便用户自选
• 在用户选定风格后，生成完整首页或 landing page
• 通过 Markdown 指令适配 Codex、Claude Code 和其他 Agent

默认原则：

先列风格，让用户选，再开始产出。

Top 12 风格

直接产出示例

用户选定风格后，这个 skill 可以把风格落到完整首页方向。下面示例包含 Modern SaaS Clean、Luxury Editorial 和 Bento Dashboard。

网页样例里的 UI 文案默认保持英文，以维持海外网页调性；中文内容主要用于 README、教程、风格解释和外层宣传图。

安装

Codex

复制到 Codex skills 目录：

cp -R su-webstyle-top12 ~/.codex/skills/

自然语言使用：

列出海外主流网页风格，我想自己选。

或者：

用 su-webstyle-top12，给我一个网页风格看板。

Claude Code

复制到 Claude skills 目录：

cp -R su-webstyle-top12 ~/.claude/skills/

显式调用：

/su-webstyle-top12 show me the web style atlas

当你的请求明显是在要海外网页风格、landing page 视觉方向或风格看板时，Claude Code 也可能自动使用它。

通用 Agent

可以使用：

• SKILL.md：Agent Skills 兼容工具
• AGENTS.md：通用 coding agent
• CLAUDE.md：Claude Code 项目
• adapters/cursor-rule.md：Cursor / IDE Agent 规则

用法示例

浏览风格：

列出海外主流网页风格。

生成看板后自选：

给我一个 Top 12 网页风格看板，我自己选。

需要 Agent 辅助 shortlist 时：

我做的是 AI 数据分析产品，你帮我 shortlist 3 个适合的海外网页风格。

选定后直接产出：

用 10 Luxury Editorial 做一个完整首页，品牌是一个高端 AI 顾问工作室。

中文设计说明

这个 skill 面向中文用户友好，但网页样例中的 UI 文案默认可以保持英文，以维持海外网页调性。中文内容适合用于说明、README、教程、风格解释和外层宣传图。

本仓库不包含字体文件。实际生成网页或视觉稿时，请根据项目环境自行配置可用字体。

项目结构

su-webstyle-top12/
├── SKILL.md
├── AGENTS.md
├── CLAUDE.md
├── README.md
├── references/
│   ├── style-atlas.md
│   ├── usage-modes.md
│   └── output-patterns.md
├── assets/
│   ├── style-board-template.html
│   ├── promo-01-style-atlas.png
│   ├── promo-02-how-it-works.png
│   ├── promo-03-output-examples.png
│   ├── promo-en-01-style-atlas.png
│   ├── promo-en-02-how-it-works.png
│   └── promo-en-03-output-examples.png
├── examples/
│   └── prompts.md
└── adapters/
    └── cursor-rule.md

Creator Mark

本仓库公开宣传图包含小号署名：

@Sukiea1008

Skill 不会在普通用户产出里自动添加这个署名，除非用户明确要求。

License

MIT

su-webstyle-top12

中文 | English

Top 12 overseas web style atlas for Codex, Claude Code, and other agentic coding tools.

This is not a template pack that forces a design decision. It is an open style atlas: the agent lists clear style directions first, the user chooses, and then the agent produces.

What It Does

su-webstyle-top12 helps an agent:

• show 12 mainstream overseas web design styles
• explain the difference between styles in plain language
• generate a visual style board for self-selection
• apply a selected style to a complete homepage or landing page
• support Codex, Claude Code, and other agents through portable Markdown instructions

Default workflow:

list styles first, let the user choose, then produce.

Top 12 Styles

Example Outputs

After the user chooses a style, the skill can apply it to complete homepage directions. These examples include Modern SaaS Clean, Luxury Editorial, and Bento Dashboard.

Install

Codex

Copy this folder into your Codex skills directory:

cp -R su-webstyle-top12 ~/.codex/skills/

Then prompt naturally:

Show me the Top 12 overseas web styles so I can choose one.

or:

Use su-webstyle-top12 to create a web style board.

Claude Code

Copy this folder into your Claude skills directory:

cp -R su-webstyle-top12 ~/.claude/skills/

Invoke directly:

/su-webstyle-top12 show me the web style atlas

Claude Code may also auto-use it when your request clearly asks for overseas web style options or a landing page visual direction.

Generic Agents

Use:

• SKILL.md for Agent Skills-compatible tools
• AGENTS.md for generic coding agents
• CLAUDE.md for Claude Code projects
• adapters/cursor-rule.md for Cursor-style rules

Usage Patterns

Browse styles:

Show me the Top 12 overseas web styles.

Self-select from a board:

Create a Top 12 web style board and let me choose.

Ask for a shortlist only when wanted:

I am building an AI data analytics product. Shortlist 3 suitable overseas web styles.

Produce after selection:

Use 10 Luxury Editorial to create a complete homepage for a premium AI consulting studio.

Notes

The repository does not include font files. Configure available fonts based on your own project environment.

Project Structure

su-webstyle-top12/
├── SKILL.md
├── AGENTS.md
├── CLAUDE.md
├── README.md
├── references/
│   ├── style-atlas.md
│   ├── usage-modes.md
│   └── output-patterns.md
├── assets/
│   ├── style-board-template.html
│   ├── promo-01-style-atlas.png
│   ├── promo-02-how-it-works.png
│   ├── promo-03-output-examples.png
│   ├── promo-en-01-style-atlas.png
│   ├── promo-en-02-how-it-works.png
│   └── promo-en-03-output-examples.png
├── examples/
│   └── prompts.md
└── adapters/
    └── cursor-rule.md

Creator Mark

Public promo assets in this repository include a small creator mark:

@Sukiea1008

The skill does not add this mark to ordinary user outputs unless the user explicitly asks.

License

MIT