一项为Claude设计的技能（Cowork / Claude Code），指导整个网站创建过程——从发现和细分市场调研，到设计、文案、SEO到上线。

它的作用

该技能不直接跳入代码，而是运行一个结构化的七阶段流程：

1. 发现 — 目标、受众、形象模式、现有品牌
2. 细分市场研究——竞争对手分析、定位方向、设计美学
3. 架构 — 页面、导航、URL结构、网站地图
4. 设计系统 — 样式指南（颜色、字体、间距、组件）作为实时HTML文件
5. 模型 — 真实HTML页面，使用Tailwind CSS + Lucide Icons，可在浏览器中迭代
6. 文案与内容 — 每页SEO优化写作
7. Schema & Technical SEO — json-LD 结构化数据、meta tags、rich results

输出是一个包含普通HTML文件的文件夹，只需双击即可打开——没有服务器，没有安装，没有终端。两分钟后可以通过Netlify Drop发布。

技术栈

• 顺风CSS通过CDN
• Lucide Icons 来源 CDN
• 谷歌字体通过CDN
• GSAP 通过 CDN（需要动画时）
• Unsplash用于占位图像

没有框架。没有包管理器。没有构建步骤。

Website Creator Skill

A skill for Claude (Cowork / Claude Code) that guides the full website creation process — from discovery and niche research through design, copy, SEO, and launch.

What it does

Instead of jumping straight to code, this skill runs a structured seven-phase process:

1. Discovery — Goals, audience, imagery mode, existing brand
2. Niche Research — Competitor analysis, positioning directions, design aesthetic
3. Architecture — Pages, navigation, URL structure, sitemap
4. Design System — Style guide (colors, type, spacing, components) as a live HTML file
5. Mockups — Real HTML pages using Tailwind CSS + Lucide Icons, iterable in browser
6. Copy & Content — SEO-optimized writing for every page
7. Schema & Technical SEO — JSON-LD structured data, meta tags, rich results

The output is a folder of plain HTML files that open by double-clicking — no server, no install, no terminal. Ready to publish via Netlify Drop in two minutes.

Tech stack

• Tailwind CSS via CDN
• Lucide Icons via CDN
• Google Fonts via CDN
• GSAP via CDN (when animation is needed)
• Unsplash for placeholder imagery

No frameworks. No package managers. No build step.

Animation toolkit

Six approved techniques, selected based on a MOTION_INTENSITY dial (1–10) set per project:

Full implementation code for each technique is in references/design-system.md.

Installation

1. Download website-creator.skill
2. Open Cowork
3. Go to Plugins → Install from file → select website-creator.skill

Once installed, trigger it by asking Claude to build, plan, or redesign a website.

File structure

website-creator-skill/
  SKILL.md                        ← Main skill prompt and phase instructions
  references/
    design-system.md              ← Design dials, animation toolkit, component specs
    architecture.md               ← Site type templates, navigation patterns, URL structure
    copy-frameworks.md            ← Headline formulas, CTA patterns, page templates
    schema-examples.md            ← JSON-LD structured data for all common site types
  website-creator.skill           ← Installable package (zip of the above)
  README.md                       ← This file

Editing the skill

Edit the .md source files directly, then repackage:

cd website-creator-skill
zip -r website-creator.skill SKILL.md references/

Then reinstall the updated .skill file in Cowork.

Inspiration

Built with reference to these excellent community skills: