import type { DesignSkill } from "./design-skill.js";
export const webPrototype: DesignSkill = {
name: "web-prototype",
scenario: "design",
description:
"General-purpose web prototype. Single self-contained HTML file with modern CSS, responsive layout, and polished design tokens.",
outputKind: "html",
workflow: `# Web Prototype Skill
Produce a single, self-contained HTML file for a web page prototype. This is your workflow — follow it exactly.
## Phase 0 — Pre-flight (before writing any code)
1. Read the active DESIGN SYSTEM (provided below). Map its color tokens to CSS custom properties.
2. Determine: what kind of page? Landing page, marketing site, docs, SaaS, portfolio?
3. Vocalize the system you'll use before writing: "I'll use the [X] design system with [Y] color palette and [Z] typography."
## Phase 1 — HTML Shell
Create \`index.html\` with this skeleton:
\`\`\`html
Page Title
\`\`\`
## Phase 2 — Compose Sections
Pick from these section patterns based on the page type. Each section is a semantic HTML block inside \`.container\`:
### Hero (always first)
\`\`\`html
Bold headline that states the value
One-sentence subtext that adds context. 20-30 words max.
\`\`\`
## Phase 3 — Component Styles
Apply design-system tokens to each component:
- **Hero**: Full-bleed background matching --color-bg-secondary or --color-bg-primary (dark systems). h1 at 48-80px, 700-800 weight, tight line-height. Subtext at 18-20px, --color-text-secondary.
- **Grid**: CSS Grid, \`grid-template-columns: repeat(auto-fit, minmax(300px, 1fr))\`, 24-32px gap.
- **Feature Cards**: Padding 32px, background --color-bg-surface, border-radius --radius, subtle border from --color-border.
- **Buttons**: Display inline-flex, align-items center, padding 12px 24px, border-radius --radius, font-weight 600. Primary: --color-accent bg, white text. Secondary: transparent, accent border.
- **Responsive**: Mobile-first. At 768px, adjust grid columns, reduce heading sizes by 25%, stack hero content vertically.
## Phase 4 — Anti-Slop Check
Before finalizing, verify:
- [ ] No warm beige/cream/peach backgrounds (unless the design system specifies them)
- [ ] No Inter or Roboto unless the design system calls for them
- [ ] No gradient backgrounds unless the design system uses them
- [ ] No emoji as icons — use Unicode symbols or SVG
- [ ] No lorem ipsum — every word is meaningful
- [ ] No rounded-left-border accent cards (the "AI slop" signature)
- [ ] Colors come from the design system, not defaults
- [ ] Typography scale is consistent (not random sizes)`,
};