codeandbeans/website-creator
Developer tools이 페이지는 AI로 자동 번역되었습니다. 기술적인 세부 사항은 원문을 확인하세요. 원문 보기
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.
개요
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. Instead of jumping straight to code, this skill runs a structured seven-phase process: 1. — Goals, audience, imagery mode, existing brand 2. — Competitor analysis, positioning directions, design aesthetic 3. — Pages, navigation, URL structure, sitemap 4. — Style guide (colors, type, spacing, components) as a live HTML file 5. — Real HTML pages using Tailwind CSS + Lucide Icons, iterable in browser 6. — SEO-optimized writing for every page 7. — 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. - via CDN - via CDN - via CDN - via CDN (when animation is needed) - for placeholder imagery No frameworks. No package managers. No build step.
README
원문 README의 일부입니다. 원문 보기.
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:
- Discovery — Goals, audience, imagery mode, existing brand
- Niche Research — Competitor analysis, positioning directions, design aesthetic
- Architecture — Pages, navigation, URL structure, sitemap
- Design System — Style guide (colors, type, spacing, components) as a live HTML file
- Mockups — Real HTML pages using Tailwind CSS + Lucide Icons, iterable in browser
- Copy & Content — SEO-optimized writing for every page
- 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:
| Technique | Dial | Library |
|---|---|---|
| CSS gradient text | 2–5 | None |
| Staggered line reveal | 4–6 | GSAP |
| Clip-path curtain | 4–6 | GSAP |
| Word-by-word reveal | 5–7 | GSAP |
| Pinned scroll section | 7–9 | GSAP + ScrollTrigger |
| Scroll-linked color shift | 7–9 | GSAP + ScrollTrigger |
Full implementation code for each technique is in references/design-system.md.
Installation
- Download
website-creator.skill - Open Cowork
- 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:
추천 도구
다른 키워드를 입력하거나 필터를 제거해 보세요.
설치
npx skillfish add codeandbeans/website-creator