OutcomeDev adapts to your needs. From business plans to codebases, just describe your outcome.
Landing Pages
SaaS Waitlist
High-converting pre-launch page.
"Create a modern, dark-themed SaaS waitlist page with a viral referral loop using Next.js and Tailwind. Include email capture with Supabase and a confetti animation on success."
"Build a responsive landing page for a new fitness app. Feature a 3D iPhone mockup, scroll-triggered feature animations, and direct links to App Store/Play Store."
"Create a fast local business landing page (plumber/electrician/roofing) with location-based SEO sections, service area map, testimonials, and a call booking form. Include spam protection, a success state, and an admin-friendly way to edit copy."
"Build a link-in-bio page with a profile header, categorized link cards, social icons, and a simple analytics counter (clicks per link). Make it mobile-first, accessible, and editable via a single JSON config file."
"Create a brand-forward landing page with a defined type scale, spacing system, and reusable UI sections (Hero, Logos, Features, CTA). Include a light/dark theme toggle and ensure components are reusable for future pages."
"Develop a Go microservice that wraps Stripe API webhooks to handle subscription events (created, updated, canceled) and syncs status to a Postgres database."
"Build an API gateway middleware that enforces per-user and per-IP rate limits with Redis. Include burst + sustained limits, consistent error responses, and a basic dashboard endpoint to inspect limit status."
"Create a small service that accepts security-relevant events (login, permission change, data export) and stores them in append-only form. Include an authenticated read API with filtering, and add tests for write/read paths."
"Implement a simple feature-flag service with Postgres storage and an SDK-style HTTP endpoint that evaluates flags for a user context. Support percentage rollouts and environment scoping (dev/staging/prod)."
"Create a real-time analytics dashboard using Next.js and Recharts. Visualize page views, unique visitors, and bounce rate from a ClickHouse database."
"Create a finance dashboard that shows MRR, churn, burn rate, and runway with clear charts and a monthly table. Use mock data first, then structure it so data can be swapped to a real API later. Include CSV export."
"Build an incident response dashboard that lists incidents, severity, timestamps, and current status. Include an incident detail page with a timeline view and a checklist for response steps (acknowledge, mitigate, resolve, postmortem)."
"Create an inventory dashboard with a table (SKU, quantity, reorder point, supplier) and a “low stock” alert view. Include filtering, sorting, and a simple form to update quantities."
"Build an integration that fetches unread Gmail messages, groups them by sender/topic, summarizes them, and posts a daily digest to Slack. Include a way to configure filters and the target channel."
"Create a GitHub integration that syncs open pull requests into a Notion database with fields for status, reviewer, labels, and updated time. Update entries when PRs change and archive when merged."
"Create a simple scheduling integration that reads availability from Google Calendar, generates open time slots, and exposes a booking page. When a slot is booked, create the calendar event and send confirmation email."
"Build a pipeline that ingests application logs, parses them into structured fields, and stores them in a queryable database. Include a local dev setup, a sample schema, and a couple of example queries to validate ingestion."
"Implement change-data-capture replication from Postgres to a downstream store using logical replication or Debezium-style events. Include a consumer that applies changes idempotently and produces metrics on lag."
"Create a data quality job that runs on a schedule and checks freshness, null rates, and schema drift for key tables. Output a report and fail the job when thresholds are exceeded."
"Write a script that takes a meeting transcript, extracts decisions, action items, and open questions, then outputs a clean Markdown summary. Include a template format and a way to tag owners and due dates."
"Build an automation that generates a contract PDF from a JSON input (client name, scope, price, dates) using a Markdown/HTML template. Include input validation and a couple of sample contract templates."
"Design a bug triage workflow that routes new issues through steps: Intake -> Repro -> Prioritize -> Assign -> Fix -> Verify -> Close. Include SLAs by severity and a simple state machine representation."
"Create a content workflow that moves an article from Draft -> Edit -> SEO -> Publish -> Distribute. Include checklists per stage and automate distribution to a newsletter and social channels after publish."
"Convert this project into a professional, store-ready PWA. Implementation requirements: 1) Generate pixel-perfect PNG assets from the master SVG for all Android densities (mdpi to xxxhdpi) and iOS sizes, placing them in a structured `public/icons` directory (android/, ios/, maskable/). 2) Update `manifest.json` to reference these specific PNG files with correct sizes and purposes ("any" vs "maskable"), avoiding SVG-only icons to prevent Android blank icon issues. 3) Implement theme-adaptive favicons and meta tags in the layout (light/dark mode support). 4) Configure the service worker to precache all generated icon assets. 5) Ensure `display_override` includes `window-controls-overlay` for desktop polish."
"Prototype a study assistant web app that turns a PDF or Markdown lesson into flashcards and quizzes, tracks progress, and explains incorrect answers. Include local storage persistence and an exportable progress report."
"You are an elite creative front-end engineer and digital artist. Deliver ONE complete standalone HTML file. Constraints: - Single-file HTML with all CSS and JavaScript inline. - Static-hosting compatible (no backend, no build tools). - Include these exact CDNs: <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> Design style: - Cyberpunk / Matrix / futuristic digital gallery - Dark mode - Neon accents, glow, glass, HUD-like elements - Smooth motion, cinematic transitions - Mouse- and scroll-reactive interactions - Subtle glitch or distortion effects (tasteful, not noisy) 3D: - Three.js used as a living visual element (depth, motion, particles) - Integrated into the layout, not decorative filler. Required sections: 1) Hero 2) About (CA journey + tech mindset) 3) Skills (Finance/CA and Tech clearly separated) 4) Projects (3–6 showcase items) 5) Contact"
"Analyze this SQL query for performance bottlenecks. Suggest specific indexes to add and rewrite the query using CTEs (Common Table Expressions) for better readability."
"Review this React component code. Identify unnecessary re-renders and suggest `useMemo` or `useCallback` optimizations where they actually make sense."
"You are a Senior Architect. Refactor this legacy jQuery spaghetti code into a modern React hook structure. 1) Analyze state dependencies. 2) Create custom hooks. 3) Implement with TypeScript and strict typing. 4) Add unit tests."
"Audit this Solidity smart contract function. Identify vulnerabilities (Reentrancy, Overflow, Access Control) and propose specific code fixes to secure it."
"Design a Micro-Frontend architecture for a large dashboard. Define: Integration method (Iframe vs Web Components vs Module Federation), Shared State strategy, and CSS isolation techniques."
"Create a comprehensive article outline on [Topic]. Include H2/H3 structure, target keywords to include, internal linking strategy, and semantic entities to cover."
"Design a content repurposing system. Input: One YouTube video. Output: 1) Blog post (Markdown). 2) Twitter thread (JSON). 3) LinkedIn carousel text. 4) Newsletter draft. Constrain to distinct tones for each platform."
"Generate a JSON set of design tokens for a [Brand Style] brand. Include color palette (10 shades), typography scale, spacing units, and shadow elevations."
"Conduct a heuristic evaluation of [Interface Description]. Identify 5 usability issues based on Nielsen’s heuristics. Then, propose a redesign with specific UI changes to solve them."
"Architect a dynamic pricing engine for a marketplace. Inputs: Demand, Supply, Time, Weather. Output: Price multiplier. Optimize for conversion + margin."
"Design a self-healing system on Kubernetes. If a pod crashes > 3 times, trigger a rollback, alert on-call, and spin up a debug container to capture logs."
"Build a multi-agent system where Agent A (Researcher) scrapes web data, Agent B (Analyst) processes it, and Agent C (Writer) produces a report. Manage state and handoffs."
"Create a CI/CD compliance step that scans code for PII patterns, checks dependency licenses against a whitelist, and blocks deployment if violations are found."
"Build a browser-based Markdown editor with a live split-pane preview. Include syntax highlighting, local storage auto-save, and a "Copy HTML" button."
"Create a weather app that fetches data from an open API. Show current conditions, 5-day forecast, and change the background gradient based on the weather."
"Create a simple step sequencer in the browser. Allow users to toggle beats on a grid for different instruments (kick, snare, hi-hat) and play the loop."
"You are a specialized 3D web developer. Build a car configurator using Three.js. Constraints: Single file, no build. Load a placeholder geometry (cube/sphere) representing the car. UI controls for paint color (change material), wheel type (change geometry), and environment lighting. Cinematic camera orbit."
"You are a data visualization expert. Build a high-frequency trading dashboard. Constraints: Use Canvas API for performance (no SVG charts). Simulate a WebSocket stream of 1000 updates/sec. Render a candlestick chart, order book depth, and trade history list without lag. Dark mode, monospace fonts."
"You are a game developer. Build a 2D physics puzzle game using Matter.js (via CDN). Constraints: Single HTML file. Create a "stacking" game where users drop shapes to reach a height. Realistic gravity, collisions, and win/loss states."
"You are an audio engineer. Build a frequency spectrum analyzer. Constraints: Use Web Audio API. Input from microphone. Render a 3D bar graph using Three.js that reacts to bass/mid/treble frequencies. Neon/Cyberpunk aesthetic."
"You are a systems programmer. Build a browser-based terminal emulator. Constraints: Specific command parsing (ls, cd, cat, echo). In-memory file system structure. Retro CRT effect with scanlines and screen curvature via CSS/Canvas."
"You are a generative artist. Build a flow field simulation. Constraints: HTML5 Canvas. Particle system that leaves trails based on Perlin noise (simulate noise function). Controls for noise scale, particle count, and color palette. "Save High-Res" button."
"You are a cartography dev. Build a vector tile map viewer (mocked). Constraints: SVG-based rendering of a city grid. Pan/Zoom interactions (scroll/drag). Clickable buildings showing metadata. Smooth transitions."
"You are a UI historian. Build a Windows 95 style desktop environment. Constraints: Draggable windows, Start menu, Taskbar. "Minesweeper" clone in a window. Bevelled grey buttons. Pixel-perfect font rendering."
"You are a fintech frontend lead. Build a professional crypto exchange trading view. Constraints: Split pane layout (Chart, Order Book, Trades, Order Form). Responsive grid. WebSocket connection simulation for all data panels. "Buy/Sell" rapid execution buttons."
"You are a tooling engineer. Build a VS Code-like editor interface in the browser. Constraints: Sidebar file tree, tabbed editor area, minimap, status bar. Syntax highlighting logic (regex-based) for a sample language. Command palette (Ctrl+P) modal."
"You are a network scientist. Build a force-directed graph visualization of a social network. Constraints: D3.js (or similar logic implemented manually). Draggable nodes, elastic links. Zoom/Pan. Tooltip on hover with node details."
"You are a mathematician. Build a graphing calculator. Constraints: Parse mathematical expressions. Plot 2D functions on a canvas grid. Zoom/Pan graph. History tape of calculations."
"You are an IoT specialist. Build a smart home control panel. Constraints: Floor plan view with interactive light/temp zones. Usage history charts. Schedule slider controls. Dark/Night mode toggle."
"You are a career tech dev. Build a live resume editor. Constraints: Split screen (Form vs Preview). A4 PDF export layout. Draggable sections. Real-time preview update."
"You are a sound designer. Build a TR-808 style drum machine. Constraints: 16-step sequencer grid. 8 tracks. BPM control. Swing slider. Web Audio API for synthesis (or sample playback)."
"You are a CS educator. Build a sorting algorithm visualizer. Constraints: Bars representing values. Animate Bubble, Merge, and Quick sort. Speed control. Step-by-step text explanation of current operation."
"You are a performance engineer. Build a web-based spreadsheet. Constraints: Virtualized scrolling for 100k rows. Formula parsing (=SUM, =AVG). Cell dependency graph for updates."
"You are a game dev. Build a city building interface. Constraints: Three.js isometric view. Grid placement system. Resource counters. Day/Night cycle lighting."
"Build a single-file HTML portfolio. Must include: sticky nav, smooth scrolling, dark/light toggle saved to localStorage, and a contact section that uses a mailto link. Keep it responsive and accessible."
"Build a responsive image gallery with swipe gestures on mobile, keyboard navigation on desktop, a lightbox viewer, and lazy-loading placeholders. Use only vanilla JS and CSS."
"Create a dashboard with mock data. Include: date range filter, segment filter chips, KPI cards, one chart, one table, and a CSV export button. Ensure the filters update URL query params."
"Create two different landing page layouts for the same product copy (Variant A: minimal, Variant B: bold). Keep the same sections and CTAs, but change layout, typography, and visual hierarchy. Explain why each variant converts."
"Build a search + filters UI for a list of items. Include: debounced search, multi-select category filters, and sort dropdown. Persist state in the URL and make it keyboard accessible."
"Given an informal API description, produce a clean OpenAPI 3.1 YAML. Include request/response schemas, error responses, auth, and 2 example curl commands per endpoint."
"Write a 7-email onboarding drip sequence for a [Product]. For each email: subject line, preview text, key message, and one CTA. Make the tone consistent and progressively deepen value."
"Design a Postgres schema for a [SaaS]. Include tables, primary keys, foreign keys, unique constraints, and indexes. Then provide example queries for the most common reads."
"Design an auth flow for web + mobile using access/refresh tokens. Include token storage strategy, rotation, logout semantics, and a short threat model with mitigations."
"Given a bug report, produce: minimal repro steps, suspected root causes ranked by likelihood, instrumentation to confirm, and a step-by-step patch plan with test cases."
"You are an elite creative front-end engineer and digital artist. Deliver ONE complete standalone HTML file. Constraints: Single-file HTML with all CSS and JavaScript inline. Static-hosting compatible (no backend, no build tools). Include these exact CDNs: <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script> Design style: dark mode, neon accents, glass/HUD UI, smooth cinematic transitions, subtle glitch effects (tasteful). Three.js must be integrated into the layout as a living visual element (particles/depth) and react to scroll + pointer. Required sections: Hero, About, Skills (Finance/CA and Tech separated), Projects (3–6), Contact. Include performance safeguards (resize handling, reduced motion)."
"You are an elite front-end engineer. Deliver ONE complete standalone HTML file. Use inline CSS/JS and static-hosting compatibility. Use Three.js as an interactive product hero: parallax camera, hover highlights, scroll-triggered scene transitions. Build a full landing page (Hero, Features, Pricing, FAQ, CTA). Dark mode + glassmorphism + motion design. Add accessibility (keyboard focus, reduced-motion)."
"You are an elite creative coder. Deliver ONE complete standalone HTML file. Requirements: Web Audio API input (microphone + sample track fallback), Three.js scene with neon bars/particles reacting to bass/mid/treble, and UI controls for sensitivity + color palette. Integrate the visualizer into the page layout (not full-screen-only). Dark mode, cinematic transitions, tasteful glitch accents."
"You are a senior product engineer. Design and implement an offline-first notes app architecture. Requirements: IndexedDB persistence, conflict-safe sync model (assume later server), full-text search, tag system, and export. Deliver: data model, sync strategy, and a minimal working implementation outline with tests and edge cases."
"You are a senior data engineer. Build an idempotent ETL pipeline design for [Source] -> [Warehouse]. Include: retries, dead-letter queue strategy, checkpointing, schema drift handling, and data quality checks. Provide a runnable minimal prototype (Python) with clear modules and a test plan."
"You are a security-first backend engineer. Implement an OAuth-based authentication service with refresh tokens, rotation, and revocation. Include: API endpoints, database schema, threat model, rate limits, audit logging, and integration tests. Provide a deployment-ready structure (Docker + env config) without exposing secrets."
"You are a platform engineer. Design an observability stack for microservices: structured logs, metrics, and traces. Include: OpenTelemetry instrumentation approach, sampling, correlation IDs, dashboards, alerting rules, and a rollout plan. Provide minimal example code for one service."
"You are an AI systems engineer. Build a multi-agent workflow: Researcher collects sources, Analyst extracts insights + data, Writer produces a polished report. Define state schema, tool boundaries, guardrails (hallucination checks), and retry strategy. Deliver: architecture diagram in text, data contracts, and a minimal runnable prototype outline."
"You are a senior frontend engineer. Design a checkout flow as a state machine (Cart -> Address -> Payment -> Review -> Complete). Include: validation rules, async failure handling, optimistic UI, and accessibility. Deliver: state chart, event list, and a reference implementation approach."
"Create a production-ready SVG favicon and PWA icon set optimized for modern browsers. Constraints: 1) MAXIMIZE VISIBILITY: Design must be edge-to-edge (no internal padding) to utilize full 100% viewport. 2) ADAPTIVE: Support Light/Dark mode via CSS media queries within SVG or separate files. 3) CLARITY: Use solid fills (not strokes) for legibility at 16x16px. 4) Deliverables: icon.svg (adaptive), icon-light.svg, icon-dark.svg, and a web app manifest snippet."
"Create a lightweight “operating system” inside this repo. Outcome: persistent memory for an agent-run workflow. Constraints: no external services. Artifacts: /ops/state/kpis.json, /ops/state/pipeline.json, /ops/decisions.md, /ops/experiments/experiment-log.md, /ops/daily/day-01.md. Definition of done: files exist and are internally consistent."
"Design a simple pipeline state machine for leads and implement it as JSON schema + examples in /ops/state/pipeline.json. Include stages, allowed transitions, required fields (last_contact, next_action, channel), and a daily routine for updating it. Output must be copy/paste-ready and enforceable by an agent."
"Create an experiment system inside the repo. Outcome: a repeatable loop that prevents re-deciding every day. Artifacts: /ops/experiments/experiment-log.md template + 3 filled example experiments. Constraints: include hypothesis, test, metric, result, decision, next step. Keep it short and operational."
"Create a decision ledger in /ops/decisions.md. Outcome: persistent “why” that prevents the agent from re-planning. Include a template (decision, context, options, choice, rationale, review date) and add 5 example decisions for a pre-launch product (positioning, ICP, pricing, onboarding, proof)."
"Create /ops/messaging/canonical.md as the single source of truth for positioning. Include: one-liner, 10-second pitch, 3 proof points, 5 objections with answers, and a “do not say” list. Constraint: everything must be consistent. Goal: prevent drift across posts, DMs, landing pages."
"Write a weekly retrospective template and generate Week 1 as an example. Artifacts: /ops/weekly/template.md and /ops/weekly/week-01.md. Include KPIs, what moved, what blocked, decisions, experiments to run next week, and a “kill list” of distractions. Make it operational, not motivational."
"Create a KPI system as JSON. Artifacts: /ops/state/kpis.json with definitions, formulas, and daily values placeholders for the next 14 days. Include: visits, activation, retention, outreaches, replies, demos booked, pilots, revenue. Constraint: easy for an agent to update without ambiguity."
"Create /ops/content/repurpose.md: a library that turns one idea into a post, thread, newsletter, and Loom script. Include a template and one filled example based on “repo as operating system.” Keep each format short and tuned to its platform."
"Create /ops/playbooks/ with 3 playbooks: onboarding fix, sales outreach day, and demo day. Each playbook must include triggers, steps, artifacts to produce, and definition of done. Goal: convert repeated work into reusable instructions an agent can run."
"Create a blameless postmortem system in the repo. Artifacts: /ops/incidents/template.md and /ops/incidents/incident-001.md (example). Include timeline, root cause, impact, resolution, prevention items, and “proof” (what checks/alerts would have caught it). Keep it short and actionable."
"Implement a minimal CRM using files only. Artifacts: /ops/state/pipeline.json (schema + sample leads) and /ops/state/activities.json (touches). Constraints: no UI, no DB, no external tools. Include a daily update routine and a query checklist (who to follow up today, stalled leads, next best actions)."
"Create a Node script skeleton that reads /ops/outreach/sendlist.csv and sends messages via a generic HTTP API. Constraints: do not include secrets; read API keys from env vars; include dry-run mode and logging to /ops/daily/today.md. Deliver code + a clear config section with placeholder endpoints."
"Create an email onboarding sequence as a JSON data contract. Artifact: /ops/outreach/onboarding-sequence.json with 7 emails (subject, preview, body, CTA, delayDays). Constraint: platform-agnostic so it can be executed via any provider later. Also generate a human-readable Markdown view."
"Create support triage rules in the repo. Artifacts: /ops/support/rules.md and /ops/support/macros.md. Include severity levels, response SLAs, and macro replies. Constraint: everything must be copy/paste-ready. Goal: an agent can categorize and draft responses without a ticketing system."
"Create a pricing experiment tracker in files. Artifacts: /ops/pricing/current.md, /ops/pricing/experiments.md, /ops/pricing/results.md. Include 3 pricing hypotheses, what to change on the page, what metric to watch, and when to roll back. Keep it practical and measurable."
"Given a project idea, decide the smallest container needed: files-only repo, static HTML, or full framework. Produce /ops/architecture/decision.md with criteria: surface area, interactivity, persistence needs, integrations, risk. Include 3 example decisions: marketing OS, landing page, and SaaS dashboard."
"Produce a files-first prototype plan. Outcome: validate demand in 48 hours without building a backend. Deliver /ops/prototype/plan.md with: artifacts to create, distribution plan, success metrics, and what to build only if metrics hit. Keep it specific and timeboxed."
"Write a migration plan from files-only operating system to a full web app. Artifact: /ops/architecture/migration.md. Include triggers (when to migrate), data model, minimal API surface, and phased rollout. Constraint: preserve existing repo artifacts as the source of truth."
"Take existing landing copy files in /ops/landing/ and generate a single standalone HTML landing page (no build tools). Constraint: keep sections and messaging consistent; include a single email capture form (mock) and a clear CTA. Output: /ops/landing/index.html."
"Create a proof loop checklist that applies to both code and non-code work. Artifact: /ops/proof/checklist.md. Include: what counts as proof, how to verify, what artifacts must be present, and failure handling. Keep it short and enforceable."
"Create a robot build plan as repo artifacts. Output: /ops/robot/goals.md, /ops/robot/bom.md, /ops/robot/architecture.md, /ops/robot/test-plan.md, /ops/robot/risk-log.md. Constraint: everything must be reviewable and versioned; include next actions for a 2-week sprint."
"Create a machining part spec pack as files. Artifacts: /ops/part/requirements.md, /ops/part/dimensions.md, /ops/part/tolerances.md, /ops/part/material.md, /ops/part/inspection.md. Constraint: write it so a machinist could execute; include open questions and assumptions."
"Create a community operating system inside the repo. Artifacts: /ops/community/mission.md, /ops/community/rules.md, /ops/community/events.md (next 4), /ops/community/content-calendar.md (2 weeks), /ops/community/moderation.md, /ops/community/kpis.json. Constraint: keep it operational and measurable."
"Create an event production runbook in repo files. Artifacts: /ops/event/overview.md, /ops/event/run-of-show.md, /ops/event/vendors.md, /ops/event/budget.md, /ops/event/outreach.md, /ops/event/postmortem.md. Constraint: include timelines, owners, and checklists; make it copy/paste-ready."
"Create a launch command center as repo artifacts. Output: /ops/launch/checklist.md, /ops/launch/assets.md, /ops/launch/outreach.md, /ops/launch/faq.md, /ops/launch/support.md, /ops/launch/metrics.json. Constraint: everything must map to an action the agent (or human) can execute."
"Create a production-grade Next.js app scaffolding with a "Frame vs. Canvas" layout architecture. Implement a fixed top navbar and fixed bottom footer that never scroll (using flex-shrink-0). The main content area should be the only scrollable region (flex-1 overflow-y-auto). Ensure the layout root uses flex-col h-screen to lock the viewport. This structure prevents "scroll chaining" and keeps navigation elements permanently accessible, similar to a native desktop application."
"Document the OutcomeDev Design System and Philosophy in a new file `/docs/design-system.md`.
**Core Philosophy:**
- **Outcome-First:** The UI is a bridge between intent and result.
- **Evidence beats Vibes:** But vibes (aesthetics) build trust. The interface should feel precise, engineered, and "solid" (no layout shifts, smooth interactions).
- **Frame vs. Canvas:** The app shell (sidebar, header, footer) is the "Frame" (fixed, reliable tools). The content area is the "Canvas" (fluid, scrollable outcome).
**Theming Engine:**
- **Technique:** Use CSS variables with `oklch()` for wide-gamut color support.
- **Themes:**
- *Matrix:* Green/Black high contrast (Code-centric).
- *Neon:* Synthwave Pink/Blue (Creative).
- *Sapphire:* Deep Blue/White (Professional/Trust).
- **Implementation:** Define variables in `globals.css` under `@theme` blocks. Avoid hardcoded hex values. Use `bg-background`, `text-foreground`, `border-border` utility classes.
**Micro-interactions (The "Magic"):**
- **Logo Checkmark:** The OutcomeDev logo is alive. It periodically "redraws" its checkmark every 8 seconds, subtly reinforcing the concept of a "Verified Result" without needing user interaction.
- **Prompt Input:** The "Embossed" look. In light/dark modes, use shadows to create depth. In new themes, use semi-transparent borders (`border-white/20`) and backdrop blur to create a "glass" effect that sits *above* the content.
- **Sidebar Toggle:** When the sidebar closes, the branding doesn't disappear—it slides into the header (OutcomeDev logo appears next to the hamburger). When open, it lives in the sidebar. This ensures the brand anchor is never lost.
- **Modal Swell:** Dialogs don't just appear; they scale up slightly (`scale-95` to `scale-100`) with a springy fade-in, making them feel like they are "swelling" into existence.
- **Horizontal Scroll:** For wide content (like Git Diffs or Tables), use `overflow-x-auto` but hide scrollbars (`no-scrollbar` utility) where possible for a cleaner look, or style them to be minimal.
- **Interchanging Text:** The "Ship [Workflow/Prototypes/Apps]" text in the Hero section cycles to show versatility.
- **Fixed Anchors:** Legal/Docs links are pinned to the bottom (Footer) or top corners, providing a safety net that is always accessible.
**Pitfalls & Workarounds:**
- **Contrast:** `oklch()` lightness channels must be tuned per theme. A simple "invert" doesn't work. We manually adjusted `muted-foreground` for Matrix/Neon to ensure readability on blog/doc pages.
- **Typography:** Markdown plugins (`prose`) often default to standard colors. We force `prose-headings:text-foreground` to respect the theme's palette.
- **Mobile Safari:** The address bar shifting can break `h-screen`. We use `dvh` (dynamic viewport height) or fixed positioning strategies to ensure the "Frame" stays solid.
Output this as a comprehensive design guide that a new developer could read to understand *why* things look the way they do."