菜单
Use for distinctive production-grade websites, landing pages, and interactive web experiences with strong design and QA discipline.
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Browser automation CLI for AI agents. Use when the user needs to interact with websites, including navigating pages, filling forms, clicking buttons, taking screenshots, extracting data, testing web apps, or automating any browser task. Triggers include requests to "open a website", "fill out a form", "click a button", "take a screenshot", "scrape data from a page", "test this web app", "login to a site", "automate browser actions", or any task requiring programmatic web interaction.
Control desktop applications on the user's machine using agent-click. Use when you need to click buttons, type text, read screens, scroll, drag files, move/resize windows, open/quit apps, interact with UI elements, or automate desktop workflows. Triggers: 'click on', 'open app', 'type into', 'scroll down', 'drag file', 'take screenshot', 'read the screen', 'interact with UI', 'desktop automation', 'computer use', 'agent-click'. Built on agent-click (https://github.com/kortix-ai/agent-click, https://www.agent-click.dev/) — an open-source computer use CLI by Kortix. Right now only works on macOS.
Use for structured review, fact-checking, annotation, and correction of documents such as PDF, DOCX, PPTX, and XLSX files.
Create professional logos through an intelligent, iterative design process. Use this skill when the user wants to create a logo, icon, favicon, brand mark, wordmark, or any visual brand identity mark. Triggers on: 'create a logo', 'design a logo', 'make me a logo', 'logo for my brand', 'I need a logo', 'brand mark', 'wordmark', 'logomark', 'icon design', 'favicon'. This is NOT a one-shot image generator — it researches, strategizes, generates symbols with AI, visually inspects every output, then programmatically composes them with real Google Fonts typography into complete logo systems (logomark, wordmark, combination marks in multiple layouts).
Free domain research and availability checking. No API keys or credentials required. Uses RDAP (1195+ TLDs) with whois CLI fallback for universal coverage. Checks if domains are available, searches keywords across TLDs, performs WHOIS/RDAP lookups, checks expiry dates, and finds nameservers. Use when the agent needs to: check if a domain is available, search for domains, find who owns a domain, check domain expiration, get nameservers, bulk check domains, or do any domain research. Triggers on: 'check domain', 'is domain available', 'search domains', 'domain availability', 'who owns this domain', 'whois', 'domain expiry', 'when does domain expire', 'nameservers for', 'domain research', 'find domains for', 'domain ideas', 'bulk domain check'.
ElevenLabs audio generation — text-to-speech, voice cloning, and sound effects. Use this skill any time the agent needs to: convert text to spoken audio, narrate documents or content, generate voiceovers, clone voices from audio samples, create sound effects, or produce any audio output from text. Supports multiple voices, languages, models, voice cloning, batch processing, and sound effect generation. Requires ELEVENLABS_API_KEY.
| name | website-building |
| description | Use for distinctive production-grade websites, landing pages, and interactive web experiences with strong design and QA discipline. |
Build distinctive, production-grade websites where every site looks DIFFERENT. Every choice — type, color, motion, layout — must be derived from the subject matter. Run the palette generator (bun run shared/generate-palette.ts "keywords") to create a unique color scheme for each project. NEVER reuse the same palette across sites.
This skill covers everything for web projects. Read the sub-files in this directory as needed based on your project type. For web applications, also read skills/GENERAL-KNOWLEDGE-WORKER/website-building/webapp/SKILL.md.
Universal design principles (color philosophy, default palette, font selection) are shared with other skills via design-foundations. This skill's shared files extend those foundations with web-specific implementation (CSS variables, responsive tokens, base stylesheets). You don't need to load design-foundations separately — the web-specific versions in shared/ are comprehensive.
Use read with the full path, e.g. skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/01-design-tokens.md
Step 1: Identify project type and load domain-specific guidance:
| Project Type | Action | Examples |
|---|---|---|
| Informational sites | read skills/GENERAL-KNOWLEDGE-WORKER/website-building/informational/informational.md | Personal sites, portfolios, editorial/blogs, small business, landing pages |
| Web applications | read skills/GENERAL-KNOWLEDGE-WORKER/website-building/webapp/SKILL.md | SaaS products, dashboards, admin panels, e-commerce, brand experiences |
| Browser games | read skills/GENERAL-KNOWLEDGE-WORKER/website-building/game/game.md + skills/GENERAL-KNOWLEDGE-WORKER/website-building/game/game-testing.md | 2D Canvas games, Three.js/WebGL, HTML5 games, interactive 3D experiences |
Step 2: Read shared files — read skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/01-design-tokens.md and skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/02-typography.md first (mandatory for ALL project types, including webapp). These establish the Kortix design system defaults and typography rules that apply universally. For web applications and dashboards, skip files marked with † below — those contain implementation details pre-configured in the fullstack template.
If the user says just "website" or "site" with no detail, ask what type or default to informational.
shared/) — Every project| File | Covers | Load |
|---|---|---|
shared/01-design-tokens.md | Type scale, spacing, Kortix palette, base.css | Always |
shared/02-typography.md | Font selection, pairing, loading, blacklist | Always |
shared/04-layout.md | Spatial composition, responsive, mobile-first | Always † |
shared/05-taste.md | Skeleton loaders, empty/error states, polish | Always |
shared/08-standards.md | Accessibility, performance, anti-patterns | Always |
shared/09-technical.md | Project structure, sandbox, deploy, checklist | Always † |
shared/head-defaults.html | Attribution block for <head> | Always † |
shared/03-motion.md | Scroll animations, Motion library, GSAP SVG plugins, hover/cursor | When animated |
shared/06-css-and-tailwind.md | Tailwind CSS v3, shadcn/ui, modern CSS | When using Tailwind |
shared/07-toolkit.md | CDN libraries, React, Three.js, icons, maps, SVG patterns/filters, esm.sh | When choosing libs |
shared/10-charts-and-dataviz.md | Chart.js, Recharts, D3, KPIs, sparklines | When data viz needed |
shared/11-web-technologies.md | Framework versions, browser compatibility | When checking compat |
shared/12-playwright-interactive.md | Persistent Playwright browser QA, screenshots, visual testing | When testing |
shared/19-backend.md | FastAPI/Express/Flask servers, WebSocket, SSE, port forwarding | When backend needed |
shared/20-llm-api.md | LLM/AI API integration reference | When site uses AI APIs |
All paths are relative to skills/GENERAL-KNOWLEDGE-WORKER/website-building/.
† Skip for webapp and dashboards — implementation details pre-configured in the fullstack template. Design-tokens and typography are NOT skipped — they provide the authoritative design system defaults and font selection guidance for all project types.
| File | When to load |
|---|---|
read skills/GENERAL-KNOWLEDGE-WORKER/website-building/webapp/SKILL.md | SaaS, dashboard, admin, e-commerce, brand experience (child skill with fullstack template) |
webapp/dashboards.md | Dashboard or data-dense interface (companion to webapp) |
informational/informational.md | Personal site, portfolio, editorial, small business, landing |
game/game.md | Browser game, Three.js, WebGL, interactive 3D |
game/2d-canvas.md | 2D Canvas game (companion to game.md) |
game/game-testing.md | Any browser game — load alongside game.md |
Interactive QA: Read skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/12-playwright-interactive.md for persistent browser automation with Playwright (screenshots, functional testing, visual QA). Required for game testing, useful for any complex site.
Read ALL of these in one batch — they are mandatory for every project:
read("skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/01-design-tokens.md")
read("skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/02-typography.md")
read("skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/04-layout.md")
read("skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/05-taste.md")
read("skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/08-standards.md")
Then load the domain-specific file (informational, webapp, or game) from Step 1 below.
Run the palette generator with keywords describing the subject:
bun run skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/generate-palette.ts "subject keywords here"
Pick the best harmony, customize if needed.
Build the site with the generated palette, following all the loaded design guidance.
Show via static server: show(type: "url", url: "http://localhost:3211/open?path=/workspace/project/index.html")
skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/12-playwright-interactive.md to screenshot at desktop (1280px+) and mobile (375px). Compare against references. This is mandatory, not optional. See Visual QA below.Every project gets a custom inline SVG logo. Never substitute a styled text heading.
currentColor for dark/light mode.aria-label, viewBox, fill="none", currentColor strokesFor SVG animation (DrawSVG, MorphSVG), see shared/03-motion.md. For SVG patterns/filters, see shared/07-toolkit.md.
Every deployment must pass visual QA. Screenshots are quality gates.
Read skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/12-playwright-interactive.md for all visual QA. Playwright provides a persistent browser session for screenshots, interaction testing, and viewport verification.
Cycle: Build → Playwright QA → Evaluate → Fix → Repeat → Deploy when ready
After building each page:
QA failures: text overflow, inconsistent spacing, off-token colors, missing dark mode, squished mobile, generic AI look, placeholder content, missing logo.
Every site should have a visual identity derived from its content. Do not skip to the Kortix fallback palette. The Kortix palette is a last resort for when both inference and asking have failed — not a convenient default.
informational.md, webapp/SKILL.md, game/game.md) has an Art Direction table mapping site/product types to concept-driven directions and token starting points. Use these as a springboard.When inference yielded no clear direction AND the user was asked but gave no style guidance, use defaults from skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/01-design-tokens.md with:
--text-3xl/--text-hero are for informational site heroes only.See skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/08-standards.md for the full anti-patterns list.
Use real local preview commands first and only publish with the target project's actual deployment workflow. See skills/GENERAL-KNOWLEDGE-WORKER/website-building/shared/09-technical.md for the recommended preview and delivery flow.
pty_spawn for the preview or dev server.