saccoai-proposal

This skill takes site analysis output and generates a branded saccoai project proposal — a polished document with executive summary, current state assessment, proposed solution, scope, timeline, pricing, and a "Book a call" CTA. Output is a Vercel-hosted HTML page (interactive, with PDF download) plus a saved PDF file.

The skill works standalone (give it a URL and a client name) or as the final step in the sales pipeline after competitive analysis.

Inputs

Input	Required	Default	Description
Target URL	Yes (if no analysis)	—	Site to analyze — triggers saccoai-website-analysis if no .saccoai/analysis/ exists
Client name	Yes	—	Company name for the proposal cover and throughout the document
Client industry	No	auto-detect	Industry for pricing context and framing
Pricing model	No	fixed	fixed (3 package tiers in CHF) or hourly (estimated hours × rate)
Rate / packages	No	saccoai defaults	CHF/hour rate or package price overrides
Proposal language	No	en	Language for the proposal document itself

Execution Model

Single-agent sequential. No parallelism needed — phases are dependent on each other's output.

Phase 1: Gather Context

Collect all available analysis output and synthesize a project scope assessment.

Step 1a: Check for existing analysis

Check if .saccoai/analysis/content-inventory.md exists:

• If yes: proceed directly to Step 1b — use existing analysis.
• If no: run saccoai-website-analysis on the target URL. Wait for it to complete before continuing.

Step 1b: Read analysis output

Read each file if it exists (skip silently if missing):

1. .saccoai/analysis/site-structure.md — page count, navigation structure, multilingual status, detected issues
2. .saccoai/analysis/content-inventory.md — number of content sections per page, content complexity, image count
3. .saccoai/design-system/design-tokens.md — current design quality (presence signals: custom tokens vs defaults, consistency of palette)
4. .saccoai/compliance/audit.md — compliance gaps (from saccoai-swiss-compliance, if run)
5. .saccoai/competitive/comparison.md — competitive position (from saccoai-competitive-analysis, if run)

Step 1c: Synthesize

From the files read, build a working context summary (kept in memory):

Project Context:
- Client: {client name}
- URL: {target URL}
- Page count: {N}
- Multilingual: {yes/no, languages if yes}
- Content complexity: {low / medium / high}
- Design quality: {poor / adequate / strong} (based on token consistency)
- Compliance gaps: {list of gaps, or "none / not assessed"}
- Competitive position: {summary, or "not assessed"}
- Lighthouse scores: {if available from analysis}

This context drives both the scope recommendation (Phase 2) and the proposal copy (Phase 3).

Phase 2: Scope

Auto-generate a scope recommendation from the Phase 1 context.

Step 2a: Determine complexity tier

Classify the site into one of three tiers:

Tier	Criteria
Simple	1–5 pages, no i18n, no CMS, marketing only
Standard	5–15 pages, multilingual or some interactivity, light content management
Complex	15+ pages, CMS, auth, app features, multiple integrations

Apply the highest matching tier. When in doubt, go one tier up.

Step 2b: Recommend deliverables

Based on the context, produce a recommended deliverables list:

• Pages to rebuild: list each page with complexity label (simple / standard / complex)
• Design direction: informed by current design quality assessment — note if a full redesign vs a refresh is warranted
• Multilingual support: include if the site has multiple languages or is based in Switzerland
• CMS integration: include if the site has frequently-updated content (blog, news, team, jobs)
• Compliance fixes: include all gaps from the compliance audit (nDSG privacy policy, Impressum, cookie consent)
• Performance improvements: include if Lighthouse scores indicate significant uplift opportunity (delta vs best-practice benchmarks)

Step 2c: Estimate timeline

Map complexity tier to a phase-based timeline:

Phase	Simple	Standard	Complex
Discovery & Design	3 days	5 days	7 days
Development	5 days	10 days	20 days
Content & QA	2 days	3 days	5 days
Launch & Handover	1 day	2 days	3 days
Total	~2 weeks	~4 weeks	~7 weeks

Adjust if the deliverables list adds or removes scope (e.g., multilingual adds ~1 week).

Step 2d: Calculate pricing

Fixed pricing model (default):

Generate 3 tiers — Basic, Standard, Premium — with what each includes and its CHF price. Use saccoai's default package prices unless overridden by the Rate / packages input.

Basic:     Rebuild of up to 5 pages, standard design, no CMS, no i18n
Standard:  Rebuild of up to 12 pages, custom design, optional CMS, 1 language
Premium:   Full rebuild, custom design, CMS, multilingual, compliance, 1 yr support

Highlight the recommended tier (the one matching the site's complexity) with a note.

Hourly pricing model (if --pricing hourly):

Estimate hours per phase using the timeline above (8h/day). Multiply by the provided rate (or saccoai default CHF rate). Present as a table: phase, estimated hours, rate, subtotal. Add a 15% contingency buffer.

Step 2e: Save structured scope

Save to .saccoai/proposal/scope.json:

{
  "client": "{client name}",
  "url": "{target URL}",
  "complexity_tier": "simple | standard | complex",
  "deliverables": ["page rebuild", "design direction", "..."],
  "timeline_weeks": N,
  "pricing_model": "fixed | hourly",
  "recommended_package": "Basic | Standard | Premium",
  "generated_at": "{ISO date}"
}

Phase 3: Generate Proposal

Produce a complete branded proposal document. Write all sections in the proposal language specified by the user (default: English).

Section 1: Cover

• saccoai logo (SVG inline or linked from saccoai.com assets)
• Client name, large and prominent
• Document title: "Website Rebuild Proposal"
• Date: today's date
• Subtitle: "Prepared by saccoai — Swiss Web Engineering"

Section 2: Executive Summary

One paragraph (4–6 sentences) covering:

• What the current site's main limitations are (draw from analysis)
• What saccoai will build and the tech approach (Next.js + Vercel)
• The expected outcome (performance, design quality, compliance, growth)

Keep it direct and outcome-focused. No fluff.

Section 3: Current State Analysis

Structured findings from Phase 1:

• Site overview: page count, navigation structure, multilingual status
• Lighthouse scores: Performance, Accessibility, SEO (if available) — use a simple table or score badges
• Design assessment: current design quality rating with 2–3 specific observations
• Compliance gaps: list each gap from the compliance audit with severity (critical / moderate / minor). If no audit was run, note "compliance not assessed — recommend saccoai-swiss-compliance audit"
• Competitive position: summary from competitive analysis if available, otherwise omit this subsection

Section 4: Proposed Solution

• Tech stack: Next.js 16 + Vercel + shadcn/ui + Tailwind CSS v4
• Design approach: custom direction developed via saccoai-frontend-design — briefly describe the methodology (emotional territory, visual anchor, signature element)
• Hosting: Vercel — preview deployments, instant rollbacks, edge network
• Pipeline: reference the saccoai delivery pipeline phases (analysis → design → build → multilingual → QA → compliance → deploy)

Section 5: Scope & Deliverables

• Page list: table with page name, complexity (S/M/L), and what's included
• Features included: bullet list of what is in scope
• Features excluded: explicit out-of-scope list (prevents scope creep conversations later)
• What the client receives: deployed site + source code on GitHub + design tokens file + 30-day post-launch support

Section 6: Timeline

Phase breakdown table using the estimates from Phase 2:

Phase	Duration	What happens
Discovery & Design	X days	Site analysis, design brief, client sign-off
Development	X days	Scaffold, build all pages, responsive
Content & QA	X days	Content migration, Lighthouse audit, fixes
Launch & Handover	X days	Deploy to production, DNS, training

Include a Gantt-style visual: a simple HTML/CSS horizontal bar chart (one row per phase, bars scaled to duration). No external chart libraries — pure CSS.

Section 7: Investment

Fixed model: 3-tier table (Basic / Standard / Premium) with:

• CHF price per tier
• What's included in each (bullet list)
• Recommended tier highlighted (bold border or accent background)
• Payment terms: 50% upfront, 50% on delivery

Hourly model: phase-by-phase estimate table with hours, rate, subtotal, and total. Include the 15% contingency line. Payment terms: invoiced monthly.

Both models: note that CHF prices are exclusive of VAT.

Section 8: Why saccoai

• Swiss-based, privacy-focused engineering
• Direct access to senior engineers — no account managers or outsourcing
• Built on Vercel's enterprise-grade infrastructure
• Portfolio highlights: 2–3 short project references (use placeholder text if no portfolio data available)
• Turnaround: typical project delivered in 2–7 weeks

Section 9: Next Steps

• Bold CTA: "Book a 30-minute call to discuss your project"
• Link: https://cal.com/saccoai/30min
• Secondary contact: hello@saccoai.com
• "This proposal is valid for 30 days from the date above."
• Closing: "Looking forward to working with you — Riccardo, saccoai"

Branding

Apply saccoai visual identity throughout:

• Color palette: warm off-white background (#FAF9F6), dark primary (#1A1A18), red accent (#E8321A)
• Typography: use system-safe stack for HTML email compatibility — Inter or system-ui for body, a bold weight for headings. In the HTML version, load Inter from Google Fonts.
• Logo: Swiss cross motif + "saccoai" wordmark
• Tone: professional, direct, Swiss — no superlatives or marketing filler
• Section dividers: thin red accent lines (border-top: 2px solid #E8321A)
• Highlight callout: use a warm card (background: #F5F0E8) for the recommended pricing tier

Phase 4: Output

Produce two artifacts from the proposal content generated in Phase 3.

Step 4a: HTML version

Generate a single self-contained HTML file (proposal.html) with embedded CSS:

Layout: single-page scroll with sticky top navigation (section anchors: Summary, Analysis, Solution, Scope, Timeline, Investment, Next Steps).

Features:

• Smooth scroll between sections
• Animated stat counters on the Lighthouse scores (count up on first scroll into view — vanilla JS, no libraries)
• Responsive — readable on mobile (client may open the link on phone)
• "Download PDF" button in the sticky nav and at the bottom of the page
• "Book a call" CTA button linking to https://cal.com/saccoai/30min
• Gantt chart rendered in pure CSS (flexbox bars, labeled rows)
• Pricing tier cards with the recommended tier visually highlighted

Deploy to Vercel:

1. Create a temporary directory: .saccoai/proposal/html-deploy/
2. Copy proposal.html into it
3. Run vercel deploy .saccoai/proposal/html-deploy/ --name {client-slug}-proposal
4. Collect the preview URL
5. If Vercel deploy fails (not linked, no auth): save the HTML file and tell the user to open it locally with open .saccoai/proposal/proposal.html

Step 4b: PDF version

Generate proposal.pdf from the HTML:

1. Use agent-browser (Playwright) to open the HTML file locally or via the preview URL
2. Call page.pdf({ format: 'A4', printBackground: true, margin: { top: '20mm', bottom: '20mm', left: '15mm', right: '15mm' } })
3. The PDF should include:
   • Branded header on every page: saccoai logo left, client name right
   • Branded footer on every page: page number, "Confidential — prepared for {client name}"
   • Table of contents on page 2 (generated from section headings)
4. Save to .saccoai/proposal/proposal.pdf

If agent-browser is not available, output a note: "PDF generation requires agent-browser. Run vercel agent-browser to install, then re-run Phase 4."

Step 4c: Final output summary

Print to terminal:

Proposal generated for {client name}

HTML: {vercel preview URL or local path}
PDF:  .saccoai/proposal/proposal.pdf
Scope: .saccoai/proposal/scope.json

Next step: Send the HTML link to {client name} for review, or attach the PDF to your email.
Book a call: https://cal.com/saccoai/30min

Output directory

.saccoai/proposal/
├── proposal.html
├── proposal.pdf
└── scope.json

Composition

saccoai-website-analysis ──────────────→ saccoai-proposal
saccoai-swiss-compliance ──────────────→ saccoai-proposal (optional: compliance gaps in Section 3)
saccoai-competitive-analysis ──────────→ saccoai-proposal (optional: competitive position in Section 3)

SALES PIPELINE:
any URL ──→ saccoai-competitive-analysis ──→ saccoai-proposal ──→ client signs

Consumes output from analysis, compliance, and competitive skills. Silently skips any that haven't been run — those sections are omitted from the proposal with a brief note.

When invoked as part of the sales pipeline, saccoai-website-analysis and saccoai-competitive-analysis should run first so the proposal has full context. Running saccoai-swiss-compliance before saccoai-proposal is recommended for Swiss clients.

saccoai-proposal can also trigger saccoai-website-analysis automatically in Phase 1 if no .saccoai/analysis/ exists — the user only needs to provide a URL and a client name.

Standalone Usage

Invoke this skill when:

• The user says "generate a proposal for {client}", "write a project quote", "create a scope document", or "prepare a client proposal"
• After running saccoai-website-analysis and wanting to turn findings into a client-ready document
• After a competitive analysis and wanting to package the findings into a proposal
• Any time a URL + client name is provided and a proposal is the goal

When invoked, ask for (if not already provided):

1. Target URL (required)
2. Client name (required)
3. Pricing model: fixed or hourly? (default: fixed)
4. Proposal language (default: English)
5. Any pricing overrides (optional — use saccoai defaults if not provided)

Then run all four phases without further interruption.

Edge Cases

• No analysis exists: Automatically trigger saccoai-website-analysis in Phase 1. Do not ask the user — just note "Running site analysis first..." and proceed.
• Analysis is stale (older than 30 days): Warn the user — "Analysis in .saccoai/analysis/ is from {date}. Proceeding with existing data. Run saccoai-website-analysis to refresh." Then continue.
• Compliance audit missing: Omit the compliance section from the proposal and add a note: "Compliance not assessed. Recommend running saccoai-swiss-compliance before finalizing the proposal."
• Competitive analysis missing: Omit the competitive position subsection from Section 3. No warning needed — it's optional context.
• Vercel deploy fails: Save the HTML file locally and instruct the user to open it. Do not block PDF generation — use the local file path for Playwright.
• agent-browser not available for PDF: Produce the HTML only. Note that PDF generation requires agent-browser and provide the install command.
• Proposal language is not English: Translate all proposal copy into the specified language. Use AI to generate the text in that language directly — do not generate in English and translate.
• Hourly pricing with no rate provided: Use saccoai's default CHF rate. State the rate explicitly in the proposal so the client sees what was assumed.